Forums

chad86

Hello,

For some reason I am having a problem conditional CSS I write for specific browsers (IE 6 and 7) and some of the styling is changing in Firefox and Safari.

Here is my head:


<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" />
<title>Untitled Document</title>

<!--[if IE 7]>
<link rel=\"stylesheet\" type=\"text/css\" href=\"ie7.css\" media=\"screen\"/>
<![endif]-->

<!--[if IE 6]>
<link rel=\"stylesheet\" type=\"text/css\" href=\"ie6.css\" media=\"screen\"/>
<script> type=\"text/javascript\" src=\"pngfix.js\"></script>
<![endif]-->

<link rel=\"stylesheet\" type=\"text/css\" href=\"style.css\" media=\"screen\"/>
<script src=\"jquery-1.3.2.min.js\" type=\"text/javascript\" ></script>
<script src=\"slider.js\" type=\"text/javascript\"></script>



</head>

And here are the rules in the CSS that are in the IE6 style sheet that are carrying over



#videoInfo							{width:224px; -moz-border-radius:10px; -webkit-border-radius: 10px; border-radius: 10px; background:#ffffff; filter:alpha(opacity=20); repeat; position:relative; z-index:9999;}

#videoInfo p						{filter:alpha(opacity=100); color:#000;}

And here is what I want Safari, Firefox and any other non-piece of crap browser to use.


#videoInfo							{width:224px; -moz-border-radius:10px; -webkit-border-radius: 10px; border-radius: 10px; background:url(images/moreInfo-BG.png) repeat; position:relative; z-index:9999;}

#videoInfo p						{padding: 10px 10px 5px 10px; color:#ffffff;}

What am I doing wrong-o? Probably just a small mistake.

forrestz

It appears that you actually have mozilla and safari specific code in your IE conditional css. I would start with getting the code right for Firefox and Safari and then only modify what is necessary in the IE conditional code.

chad86

I was aware that it was there and it shouldn't recognize the -moz and -webkit attributes. My problem is that Safari, Firefox and IE7 are inheriting the the png fix that I'm trying to use on the IE 6 style sheet.

chad86

Never mind.... dumb mistake I was appending them to my index file with a @import call which were overriding the styles.

treehouse : what would you like to learn today?

Forums

Conditional CSS Problem