I’m having a probelm with different css for different browsers. I need an ie7 specific stylesheet to load due to positioning but it does not work with the conditional formating that I am using. It finds that the browser is IE 7 but doesn’y use the stylesheet sliderman7.css HELP!! here is the url
http://www.nevey.org/index-1.php
here is the code
<head>
<style type=“text/css”>@import “http://www.nevey.org/css/sliderman.css”;</style>
<!–[if lte IE 7]>
<SCRIPT LANGUAGE=“Javascript”>
alert(“Congratulations! You are running Internet Explorer 7 or less.”);
</SCRIPT>
<link rel=“stylesheet” type=“text/css” href=“http://www.nevey.org/css/sliderman7.css” />
<P>Thank you for closing the message box.</P>
<![endif]–>
<![if lt IE 8]>
<p>Please upgrade to Internet Explorer version 8.</p>
<head>
<style type=“text/css”>@import “http://www.nevey.org/css/sliderman7.css”;</style>
</head>
<![endif]>
How can you justify the presence of the <P> element in <head>?
Where is the first <head> element closing (</head>)?
How can you justify the presence two <head> elements?
Why do you need two conditionals doing the same thing?
… and why have you missed out the comment dashes from the ccs.
<![if lt IE 8]>
It should be:
<!--[if lt IE 8]>
Your thinkink is a bit muddled and I;ll try to explain :
You have one stylesheet called sliderman.css and another for IE7 called sliderman.css.
In both those stylesheets the only rules that are different are as follows.
sliderman.css
#slider_container_1 { /*float: left;*/
[B] position:relative;
left:340px;
[/B] padding: 10px;
width: 570px;
background: #ccc;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
border-radius: 10px 10px;
}
sliderman7.css
#slider_container_1 {
padding: 10px;
width: 570px;
background: #ccc;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
border-radius: 10px 10px;
}
There is nothing different in sliderman7.css that hasn’t already be defined so you are modifying nothing and the different code ( position:relative; left:340px ) will still be on effect from the first stylesheet due to the normal cascade rules.
You only need to add modifications in the IE stylesheets and not the whole code. You should have just cancelled out the left position with left:0 in the IE7 stylesheet and nothing else.
This would then be the full IE7 stylesheet as follows
e.g.
[B]#slider_container_1 {left:0}[/B]
Nothing else would be needed.
The rules all still follow the cascade and just because you give IE7 a new stylesheet it doesn’t mean it can forget about anything else.
However you don’t need any special rules for IE anyway if you do it right from the start.
Delete the sliderman7.css completely and all the special IE Ccs.
Find this code in the main css file (sliderman.css) and make the changes in bold.
#wrapper-sliderman {
margin: 0;
padding:0;
width: 570px;
[B]position:relative;
float:left;[/B]
}
Now all browsers are working the same with the same code and no hacks.
Now go and tidy up the rest
Paul-
Thank you for claryfiying how that I only need to include what needed to be changed. The conditional statements were just in there for testing purposes at this point. I excluded the typical – of the conditional statements as a downlevel-revealed conditional comment when I saw that the 1st way wasn;t working I figures I’s try something else, but that wasn’t the issue at all. Thanks for clarifying.
I changed the css as you suggested and now it works in ie7, firefox, and chrome but does not show up in IE 8 at all. I will try and make specific style for 8 and see, but do you have any idea why it’s not displaying at all in IE*.
Thanks.
paul -
I’ve tried all of your suggestions and still can’t get the browser compatibilty. What I’ve done now is linked sliderman.css and only made the changes necessary for ie7 which is float:left; left:0; and ie7 is still not rendering correctly anymore. What am I overlooking?
Hi,
Delete the IE conditional comments as you are just confusing yourself. They are not needed anyway.
Then adjust the sliderman.css as I instructed above because you have not done this correctly.
#slider_container_1 {
float: left;
position:relative;
[B] /* left:340px; remove this */[/B]
padding: 10px;
width: 570px;
background: #cccc;
-moz-border-radius: 10px 10px;
-webkit-border-radius: 10px 10px;
border-radius: 10px 10px;
}
Then embedded in the top of the page (just above the sliderman js file) you have this rule which you need to add the properties marked in bold.
#wrapper-sliderman {
margin: 0;
padding:0;
width: 570px;
[B]position:relative;
[/B] [B] float:left;[/B]
}
If you make those changes it will work in ie6 and 7 and firefox etc without any hacks needed.
Thank you thank you!!! we finally got it to work…
I guess you need an outsider to see things after you’ve been looking at the same page for days.