The site im designing for is : www.efficient-heat.net

When I check the site in IE7 I see images for the content area being placed incorrectly. They are over to the right of the page when they should be in the middle.

When I check the images with IE dev bar they have a position of absolute. However the ie_7style.css sheet has them with a position float left. When I link to the ie7style.css without conditional comments and load the page it works as intended.

I believe the absolute positioning is coming from the style.css sheet which is intended for Firefox.

It seems to me that the ie7style sheet isn't being implemented properly and is relying somewhat on the style.css to render the page.

How do I resolve this problem?

So they are in IE6. You should probably serve the IE style sheet to IE5+, or possible all IE.



I don't see that you have nullified the AP in the IE style sheet. 'float' doesn't undo 'position'. IE will read both style sheets, so of course it uses style.css.

"So they are in IE6. You should probably serve the IE style sheet to IE5+, or possible all IE."


Im going to do a style sheet for IE6 and IE 7. That's about as much as I can take of debugging for these browsers, especially as I'm a newbie without an intimate knowledge of the oddities these browsers perform. I'm hoping after this project I will know enough to be able to use more elegant solutions that don't involve conditionals and bunch of hacks but I need to build my knowledge base first.



I don't see that you have nullified the AP in the IE style sheet. 'float' doesn't undo 'position'. IE will read both style sheets, so of course it uses style.css.
[/quote]


Yeah that seemed part of the problem I've now given position relative to all the images and done some clearing which has brought them to where I need them.

Why is IE reading both style sheets when I only want it to read the style sheet intended for it : ie_7stle.css ?


Thanks for your help

All browsers see a link element for styles.css, and a style element that imports reset.css. MSIE also sees a link element for ie_7style.css. Why shouldn't it use the other style sheets as well?

That's very true. However if you move:

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="assets/scripts/ie_7style.css" />
<![endif]-->

to the very bottom of the style tag I'll bet you'll get what you're wanting. Yes the browsers will see all the styles but when IE sees this as the *last* one that's the one that will take precedence. That's why they're called *Cascading* Style Sheets.

Yes, but the cascade is more than that. The cascade includes style sheets from different sources (author, user, or user agent), rules of different importance (normal or !important), selectors with different specificity, and finally the order in which rules are specified.

Darin I agree the cascade is more than that. In this case I didn't see any other source for styles provided by the author. The user or the user's agent can impose different styles of course but when I use my own style sheet with Opera I can't expect to see exactly how the author meant the page to look. I see the page the way I want it to look.

I would imagine the majority of users don't impose their own style sheets and rely on the page rendering as the author intended. That's why I suggested moving the conditional IE style to the bottom of the style list. If you disagree I'd appreciate knowing how and why.

No, I don't disagree. I just wanted to clarify that the cascade refers to more than just multiple author-specified style sheets.

That won't help. As long as there are declarations in the common style sheet that aren't overridden by the specific one, their order doesn't matter (for this).

I didn't mean you should use a special style sheet for every version of IE, I just suggested that you should extend the conditional you already have to include at least IE 5 and 6 since they seem to need the same treatment.

Thanks for the replies.

It seems to be working now without dragging in stuff from the style.css sheet. I had an code error , an open </style tag which was adding to my problems.


To be bringing code from 2, 3 or more style sheets would make things a bit too complicated for me.


I've nearly completed the ie_7style sheet and it doesn't appear to be conflicting with the other sheets. I would prefer for simplicities sake to not have a cascade across style sheets intended for different browsers.

Now I just need to finish the ie_6 style sheet.

After this project maybe I would have enough know how to work out more refined solutions. For now im just grateful for the if then logic.

Thanks for taking the time to help me out.

You already do... I think you miss the point.

"You already do... I think you miss the point."




Yeah I can appreciate what is going on now. What I should do for my is_6style sheet is to include the changes that are necessary to make it work in that browser because the rest gets pulled in from the style.css sheet.

What I did wrong in my ie_7style sheet was to copy and paste all of my style.css sheet and make changes not realising that it deliberately takes any styles that haven't been changed.

To make the ie_7style sheet rely more on the cascade I should take out any styles that haven't changed from the style.css sheet.

This would be more like how the style sheets should be used.


Thanks

Yes, that sounds right. But why do you need yet another style sheet for IE6? It's fine with the IE7 styles. It's likely that IE5 is too. Change the conditional to include them (but check in IE5 first if that's important to you).

"Yes, that sounds right. But why do you need yet another style sheet for IE6? It's fine with the IE7 styles. It's likely that IE5 is too. Change the conditional to include them (but check in IE5 first if that's important to you)."

When I check the site in ie6 on windows it looks a mess. The changes that I've made in the ie_7style sheet don't make the site work in ie6 so I have to change the styles yet again for ie6 browser.

Making a conditional and a separate sheet for ie 6 seems appropriate ?

When you checked, did you let IE6 see the IE7 style sheet?

Yes I removed the 7 so it looked like this < [if IE]>. That should have brought in the ie_7style sheet ?

I see now that there are images down at the bottom too. They don't look the same in IE6 as in FF, but those positioned images definitely does. Sorry, didn't scroll that low earlier, thought the issue was the image higher up.