Problems centreing header/background

Discussion in 'CSS' started by webs, Nov 19, 2007.

  1. #1
    Hey,

    I'm trying to use a background tiled all the way to the bottom to create an effect of a white background behind my text. It's working OK, but the one problem is that for some unknown reason it is centreing itself 1pixel to the left of the header (which is the same width) on Internet Explorer. It seems to work fine on Firefox (could someone confirm?) so I am very confused about what to do.

    If someone could help that would be awesome. The code I use for the white background tiled down the page is:

    body {
    margin: 0 auto;
    padding: 0;
    font: 62.5%/200% Arial, Helvetica, sans-serif;
    text-align: center;
    background: #67A7CA url(http://arsenalfcblog.com/wp-content/uploads/blogmiddle.jpg) repeat-y 50% 0;


    }

    Cheers.
     
    webs, Nov 19, 2007 IP
  2. DKameleon

    DKameleon Member

    Messages:
    29
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #2
    It is difficult to say anything regarding to this code, but you can try:

    background: #67A7CA url(http://arsenalfcblog.com/wp-content/...blogmiddle.jpg) repeat-y center top;

    Also you can try to change your layout with for +-1 pixel. looks like this is IE rounding problem.

    PS. Confirm that FF displays fine.
     
    DKameleon, Nov 19, 2007 IP
    webs likes this.
  3. webs

    webs Guest

    Messages:
    201
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Tried center top, it does the same thing. FF definitely displays OK. If it is an IE rounding problem then I guess there's not much I can do. Maybe widen the header and the white area and hope for the best?

    How could I change the layou +1 or -1 pixel??

    Thanks for your help.
     
    webs, Nov 19, 2007 IP
  4. DKameleon

    DKameleon Member

    Messages:
    29
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #4
    Try to create internal layer with fixed width:

    <body>
    <div class="layout">....</div>
    </body>

    .layout {
    width: 800px; /* this can be adjusted */
    margin: 0 auto;
    background .......
    }
     
    DKameleon, Nov 20, 2007 IP
  5. webs

    webs Guest

    Messages:
    201
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Is that meant to be put in the Stylesheet? I can't seem to find the '.layout' spot...
     
    webs, Nov 20, 2007 IP
  6. DKameleon

    DKameleon Member

    Messages:
    29
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    38
    #6
    just create it :)
    it is only guidance. not exact solution.
     
    DKameleon, Nov 20, 2007 IP
  7. Crimsonc

    Crimsonc Peon

    Messages:
    616
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    0
    #7
    sorry but your whole theme is badly coded, it needs to be redone, even if you manage to fix this.
     
    Crimsonc, Nov 21, 2007 IP
  8. webs

    webs Guest

    Messages:
    201
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Can you give me some details about this? It seemed to be working fine to me? What needs to be redone?

    Thanks for your help.
     
    webs, Nov 22, 2007 IP
  9. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #9
    It says that in the URL - It's a turdpress template, of COURSE it's badly coded. The number of remotely well coded wordpress themes I've seen can be counted on two fingers.

    Well, first the page header, currently done via a DIV and a class should probably be a HEADER, as in the tag... specifically an H1... each of the topic headers should be *** SHOCK *** a header, probably h3's since "Arsenal news, opinions and discussion." should be an h2. If you are going to make your news items a list, they should be a SINGLE list, not a list for each item - at which point you shoudn't be using a list. (here's a tip, if there's only one <li></li> pairing inside your UL, you're doing it wrong) - you have paragraph tags around elements that are not paragraphs, multiple excess container DIV's and classes that serve no purpose... and to top it off 315 validation errors.
     
    deathshadow, Nov 23, 2007 IP
  10. webs

    webs Guest

    Messages:
    201
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #10
    As someone who has very limited knowledge of how to edit these problems, what is the best way to get around to fixing them?
     
    webs, Nov 25, 2007 IP
  11. blueparukia

    blueparukia Well-Known Member

    Messages:
    1,564
    Likes Received:
    71
    Best Answers:
    7
    Trophy Points:
    160
    #11
    I've coded one in valid xHTML 1.0 Strict, fully cross browser compliant and looks nice to boot. Of course, I hate coding for Wordpress, and prefer t use sNews, which is just adding a line of PHP where you want things to appear.

    Anyway, </randomness>
     
    blueparukia, Nov 26, 2007 IP
  12. webs

    webs Guest

    Messages:
    201
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #12
    That sounds a little more positive. Can I have some feedback on the header - is it still 1 pixel off??

    Also, another CSS question I may as well ask while I'm here - how can I put an Adsense Ad just after the first excerpt on my Index page? Or indeed after the first and second, if I prefer? Anyone know the code?
     
    webs, Nov 26, 2007 IP