#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    29
    Rep Power
    0

    CSS background-color not displaying properly in IE.


    I've got a mostly-css layout here:

    http://highballsociety.com/~lwco/test.php

    Using the following CSS page here:

    http://highballsociety.com/~lwco/lwc.css

    For some reason, the div on the right will not display the off-white background color in IE 6. It looks fine in Firebird and even on IE 5 for Mac. I have a feeling that this has something to do with the fact that I've not done very precise sizing of various divs and haven't really implremented the IE box-model hack for much of the site. Let me know if you can help.

    Also, when I force IE to redraw, by moving the page off the screen and back on, or if I hover over the text in the div, it seems to try redrawing the off-white background, but never actually completes.

    Thanks,
    m__
  2. #2
  3. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    16
    IE won't apply the background for div's inside a table element without you specifying a class or id in the, either place the graphics in absolutely sized div's, or change the background colour for div inside of the table cell, becuase it's defaulting to white. Silly IE.

    Code:
    <div align="center">
    <a href="">
    <img class="Preview" src="http://highballsociety.com/~lwco/portdata/E3Logo_thumb.jpg" alt="E3 - May 13, 2004" title="E3 - uploaded May 13, 2004" border="0" /></a></div>
    That div should have a class attributed to it, with the CS set to what you want it to be... the colour in this scenario.

    I'm not really sure why you've chosen to use div's inside of a table, expecially for a task that can be easily accomplished using just a couple of properly positioned div elements... but if you want to figure that out I suggest studying the box model... relative positioning would work rather well in this situation, and you wouldn't even need to set a background colour for tables as you wouldn't need to use tables in this layout at all anymore. You can use the 'text-align:center;' attribute for centering the table... I think... without having to wrap the object in a centering div... which I don't think is compliant in the next version up of xhtml past transitional...
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2003
    Posts
    29
    Rep Power
    0
    Thanks for the reply. A few comments:

    Originally Posted by 1beb
    IE won't apply the background for div's inside a table element without you specifying a class or id in the, either place the graphics in absolutely sized div's, or change the background colour for div inside of the table cell, becuase it's defaulting to white. Silly IE.
    - The off-white color is actually the color I want for the background of the entire sidebar. The problem is the background from the body is coming through.

    Originally Posted by 1beb
    Code:
    <div align="center">
    <a href="">
    <img class="Preview" src="http://highballsociety.com/~lwco/portdata/E3Logo_thumb.jpg" alt="E3 - May 13, 2004" title="E3 - uploaded May 13, 2004" border="0" /></a></div>
    That div should have a class attributed to it, with the CS set to what you want it to be... the colour in this scenario.
    - I'm not trying to set the background with the divs inside the table, it's being set by the div.RightColSidebar which contains the tables and other divs.

    Originally Posted by 1beb
    I'm not really sure why you've chosen to use div's inside of a table, expecially for a task that can be easily accomplished using just a couple of properly positioned div elements... but if you want to figure that out I suggest studying the box model... relative positioning would work rather well in this situation, and you wouldn't even need to set a background colour for tables as you wouldn't need to use tables in this layout at all anymore. You can use the 'text-align:center;' attribute for centering the table... I think... without having to wrap the object in a centering div... which I don't think is compliant in the next version up of xhtml past transitional...
    - I resorted to the table because it was the only layout that was consistent with Firefox, IE 6, IE for Mac, and Safari. No matter what I did in CSS, the images would not center align in a nice three column format on all browsers. I was floating the three boxes containing the images left, but then I needed to add a div with clear:both to bring the next div below the images, but that had some VERY different results among the different browsers. I'm sure there's a way with CSS, but I couldn't spend any more time with it.

    Also, to alleviate the concern that the divs within the tables are to blame, I've removed the table, the divs it contained, and the images from the code. You can still see that the div does not apply the off-white color.

    Thanks again for your help.
  6. #4
  7. This tagline is not long enoug
    Devshed Novice (500 - 999 posts)

    Join Date
    Aug 2003
    Location
    Toronto, ON Canada! I AM CANADIAN
    Posts
    863
    Rep Power
    16
    I don't see anything else that would cause this to happen, it's possible that there could be an error earlier on in the CS that FireFox is ignoring and IE is holding on to
    --> http://jigsaw.w3.org/css-validator/v...Elwco/test.php

IMN logo majestic logo threadwatch logo seochat tools logo