strange ie6 css bug...

MuGeN

MuGeN

MuGeN

Associate
Joined
21 Oct 2008
Posts
1,679
Location
Mooching... in your house
now here is a real weird one... the background image was only being displayed for one page, so after lots of moving code around to establish where the problem was, it came down to this, and now i have hit a brick wall...

this bit of css:

Code: 
#contentTop { padding: 20px 410px 20px 20px; min-height: 250px; }
#contentTop.contact { background: #2d2825 url(../graphics/office.jpg) no-repeat top right; }
#contentTop.about { background: #2d2825 url(../graphics/about-us.jpg) no-repeat top right; }
#contentTop.chartered { background: #2d2825 url(../graphics/chartered.jpg) no-repeat top right; }
#contentTop.gallery { background-color: #2d2825; padding-right: 0; }

is the problem, basically, whichever class i put at the top, is the one that works :confused: - so in the code above, the only page that will display the background image is the contact page (office.jpg)... if i put .chartered above .office, then only that one will work...

this is only ie6 btw, but its got me proppa foxed :confused: - can anyone shed any light?
 
unfortunately the guy is very secretive and certainly won't want this website shown until its fully ready to go, if theres no way to work it out without i'll have to keep playing (i know what you're saying, but on this one my hands are tied)...

surely we're nearly at the point where we can start ignoring ie6 :(
 
not if you're making a site as a service for someone. If I come across something that's being a pain in IE6, I tend to look at ways around changing the look/functionality to retain the essential and remove the fancy pants. It's not worth wasting your life on IE6 (unless the person you're looking for designed it and uses IE6)
 
Which better describes your relevant markup, MuGeN:

Code: 
<div id="contentTop" class="contact">

or

Code: 
<div id="contentTop.contact">

?

Incidentally, I wouldn't mix case when naming your selectors, I'd use all lower-case; IE6 can behave oddly when it encounters mixed case declarations.
 
Last edited:
I think the example is actually viable. If you're using it to switch styles with Javascript it's quite handy.
 
tried changing all the contentTop instances to content-top... no joy...

my markup now looks like this:

Code: 
<div id="content-top" class="about">

this has got to be the most infuriating ie6 bug i've ever come across...
 
well bugger me, how the hell did you come across that???

many many thanks, i'll look into it :)
 
MuGeN said:
well bugger me, how the hell did you come across that???

many many thanks, i'll look into it :)
Click to expand...
Because CSS specificity and selector confusion problems are like bloody sudoku to me; I see one and I have to solve it or it bugs the hell out of me for days :D

Incidentally, it's occurred to me that a more elegant way of doing this would be to have body ids for each page:

CSS:
Code: 
body#contact #contact-top { background: #2d2825 url(../graphics/office.jpg) no-repeat top right; }
body#about #contact-top { background: #2d2825 url(../graphics/about-us.jpg) no-repeat top right; }
...etc...

Markup:
Code: 
<body id="about">
<div id="contact-top">
...actual content over a background image called "about-us.jpg"...
</div>
</body>

And to think I design and code HTML emails for a living :/
 
Last edited:
hehe, went through and fixed this problem this morning, and just came back to check this page out of interest... that body id is the exact way i had fixed it :D

thanks very much :)
 
You must log in or register to reply here.
Back
Top Bottom