The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> I want to use conditional comments to load a style sheet for IE7, I want to use conditional comments to load a style sheet for IE7.
kam2701
post Jun 16 2008, 02:47 PM
Post #1





Group: Members
Posts: 8
Joined: 16-June 08
Member No.: 5,911





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?

This post has been edited by kam2701: Jun 16 2008, 02:48 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 16 2008, 03:54 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



QUOTE
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.


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

QUOTE

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.


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. wink.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kam2701
post Jun 17 2008, 09:44 AM
Post #3





Group: Members
Posts: 8
Joined: 16-June 08
Member No.: 5,911





"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. wink.gif
[/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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 17 2008, 11:26 AM
Post #4


WDG Member
********

Group: Root Admin
Posts: 8,308
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
George in TX
post Jun 17 2008, 03:56 PM
Post #5


Novice
**

Group: Members
Posts: 21
Joined: 31-August 06
From: North central Texas
Member No.: 42



QUOTE(Darin McGrew @ Jun 17 2008, 11:26 AM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 17 2008, 04:28 PM
Post #6


WDG Member
********

Group: Root Admin
Posts: 8,308
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
George in TX
post Jun 17 2008, 05:17 PM
Post #7


Novice
**

Group: Members
Posts: 21
Joined: 31-August 06
From: North central Texas
Member No.: 42



QUOTE(Darin McGrew @ Jun 17 2008, 04:28 PM) *

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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 17 2008, 08:32 PM
Post #8


WDG Member
********

Group: Root Admin
Posts: 8,308
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



No, I don't disagree. I just wanted to clarify that the cascade refers to more than just multiple author-specified style sheets.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 18 2008, 03:36 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



QUOTE(George in TX @ Jun 17 2008, 10:56 PM) *

QUOTE(Darin McGrew @ Jun 17 2008, 11:26 AM) *

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.


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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 18 2008, 03:38 PM
Post #10


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



QUOTE(kam2701 @ Jun 17 2008, 04:44 PM) *

"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 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kam2701
post Jun 19 2008, 10:56 AM
Post #11





Group: Members
Posts: 8
Joined: 16-June 08
Member No.: 5,911



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 19 2008, 11:07 AM
Post #12


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



QUOTE(kam2701 @ Jun 19 2008, 05:56 PM) *

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


You already do... I think you miss the point.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kam2701
post Jun 20 2008, 08:36 AM
Post #13





Group: Members
Posts: 8
Joined: 16-June 08
Member No.: 5,911



"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

This post has been edited by kam2701: Jun 20 2008, 09:19 AM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 20 2008, 09:13 AM
Post #14


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kam2701
post Jun 20 2008, 09:30 AM
Post #15





Group: Members
Posts: 8
Joined: 16-June 08
Member No.: 5,911




"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 ?



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 20 2008, 09:43 AM
Post #16


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



QUOTE

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.


When you checked, did you let IE6 see the IE7 style sheet?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
kam2701
post Jun 20 2008, 03:30 PM
Post #17





Group: Members
Posts: 8
Joined: 16-June 08
Member No.: 5,911



QUOTE(pandy @ Jun 20 2008, 10:43 AM) *

QUOTE

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.


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 ?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Jun 20 2008, 09:30 PM
Post #18


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,351
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th August 2019 - 08:34 PM