Welcome to WebmasterWorld Guest from 50.19.34.234

Forum Moderators: not2easy

Message Too Old, No Replies

background image does not display in IE6

they display in Opera and FF

     

KatrinR

4:25 pm on Jul 28, 2007 (gmt 0)

5+ Year Member



I created a faux column, yet the repeating background image does not display in IE6 (displays fine in Opera and FF)
Following is the css code

(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">)

#wrapper{

position:relative;
left:50%;
top:20px;
margin-left:-425px;
width:850px;
border:1px solid #999999;
background:url(images/design/wrapperbgd1000.gif)repeat-y top center;
}

I searched the forum, yet haven't found any answer.
TYIA
Katrin

Marshall

6:26 pm on Jul 28, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



This may be a quik, but you might have to put the image url in single quotes:

background:url('images/design/wrapperbgd1000.gif')repeat-y top center;

Don't know why, but some times this makes a difference.

Marshall

KatrinR

7:28 pm on Jul 29, 2007 (gmt 0)

5+ Year Member



Hi Marshall - no, that didn't work.

I validated the html:-/, tried to resolve this with stacking orders as the 'body' has a background color (which displays fine). Yet, it didn't work, either.

Does anybody else has an idea?

Thank you,
Katrin

Xapti

8:29 pm on Jul 29, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



What situation are you using as a test case? a page with only a div with id of wrapper?(which would seem strange to me considering all the extra code for the wrapper) Make sure you test it in the simplest situation, otherwise something else is likely causing the problem, in which case you will need to include more code.

The code included in the wrapper may be triggering some sort of bug in the rendering of the IE background. I believe IE is rendering the background, but due to the negative margin AND position relative-left:50% and background position center, it's likely somehow rendering outside of where it should be rendering, so that it cannot be seen (depending on the width of your image).

Can I ask why you are even doing that margin-left:-450px, left:50% thing anyways?
I'm not sure if you know this, but left:50% moves the element 50% the width of it's containing block to the right of the element's normal position... NOT 50% of the width of the element itself.

Oh... lastly, it looks like your doctype is incomplete! unless you just didn't show us all of it. You must include the link to the DTD file as well for (virtually) all browsers to run in compliance mode.
FYI in quirksmode, IE6 renders position:relative percentage to be relative to it's element, not it's container. I don't know if that's a problem for you, but some other thing about quirksmode may be causing the problem.

[edited by: Xapti at 8:48 pm (utc) on July 29, 2007]

KatrinR

9:55 pm on Jul 29, 2007 (gmt 0)

5+ Year Member



Hi Xapti - thanks for your answer.

I fixed the doctype issue, thank you, yet it wasn't the reason.
I created a minimal test case to work on this.

I used this 'margin-left:-450px, left:50% thing' to center my design using that the element moves 50% of its 'containing block' to the right...(I read about it and found it clean)

Yet, I tried a different method now (as I am pretty new to designing with css and the comment in your 2. paragraph concerned me).
Also the other method doesn't work, though.

I post the minimal code below (if you have advice on shorten it further, please let me know)

<body>
<div id="wrapper">

<div id="leftcontent">
<h1>Lorem ipsum dolor</h1>
</div>
<div id="rightcontent">
<p class="quoteright">This p tastes like homemade because it is!</p>
</div>
<div id="footer">
<p class="footertxt">&copy;2007</p>
</div>
</div>
</body>

css

* {margin:0;
padding:0;
}

body{font:14px Bookman Old Style,Tahoma;
background-color:#ffffcc;
text-align:center;
min-width:890px;
}
#wrapper{
margin:0 auto;
width:850px;
text-align:left;
border:1px solid #999999;
background:url(images/design/wrapperbgd1000px.gif)repeat-y top center;
}
#leftcontent{
width:500px;
float:left;
}
#rightcontent{
width:330px;
float:right;

}
#footer{
clear:both;
height:30px;
}

Thank you!
Katrin

Xapti

11:42 pm on Jul 29, 2007 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Oh yeah silly me. That was just simple centering code. That's only necessary for vertical centering though.
There's an easier way for horizontal, which you know now I see.

If the code you used is the code you posted there, no typos, then I think see a problem... you're missing a space after the image URL in both your CSS codes. That could be causing IE to ignore everything, instead of just a bit.
Validating HTML doesn't check the CSS. If you're having a CSS problem, it's always a good idea to validate the CSS, since there may be typos.

[edited by: Xapti at 11:46 pm (utc) on July 29, 2007]

KatrinR

12:18 am on Jul 30, 2007 (gmt 0)

5+ Year Member



Hi Xapti - that was it!

Getting a css validator is my next task.

Thank you so much for finding the problem!

Katrin:-)

 

Featured Threads

Hot Threads This Week

Hot Threads This Month