homepage Welcome to WebmasterWorld Guest from 54.161.236.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
background image does not display in IE6
they display in Opera and FF
KatrinR




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

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




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

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




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

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




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

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




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

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




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

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




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

Hi Xapti - that was it!

Getting a css validator is my next task.

Thank you so much for finding the problem!

Katrin:-)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved