How to load new CSS stylesheet for IE8 and below only?

nickp

Hello,

I want to load a custom CSS stylesheet for users using IE8 and below. Our menu when the visitor converts the English to Spanish the navigation menu starts to overlap the logo. I can fix this easily by changing some padding and margins. Only thing is I can't figure where I can load this IF only statement at? I see the style.css imports all the stylesheets, so where can I add this snippet of code so it loads in every template. Can you point me in the right direction?

Thank you,
Nick

ProgressionSupport

http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

nickp

I know the code, I'm trying to figure what file I need to put this in? header.php, each template php file? i see a style.css that @imports 3 css stylesheets for this theme. Can you point me in the right direction? thanks!

nickp

i just added another @import to the style.css

original style.css :

@import url(css/reset.css);
@import url(css/standard.css); /* Main Styles */
@import url(css/navigation.css); /* Navigation Styles */

i added

@import url(css/navigation-ie.css);

nickp

it loads the navigation.ie.css for every page no matter what browser you are on since i can't figur a way to trigger just IE users, i tried putting the conditional IE statement in there but it doesn't work, the conditional IE statements have to be in a PHP or HTML file.

nickp

FIXED:

you can add this to your ie7.css and ie8.css files in the CSS folder:

#navigation {float:right; position:absolute; right: -50px; bottom:24px; }

adding a negative value to right, allowed me to move the text in the navigation over just for ie7 and ie8 users!

ProgressionSupport

Oh I thought you didn't know the code... sorry about that... yea you can put it anywhere. I usually put it in the header to link to a specific stylesheet :D

Howdy, Stranger!

Categories