browser styles interference

Browser styles seem to interfere between each other making the CSS design incorrect.

I have created 2 style sheets:
- 1 for IE (browser) called "style2.css"
-1 for non IE browsers called "style.css"

If i link a single external style sheet (either style2.css or style.css) to my html page, the design is well respected.
If I add conditional comments for IE browser then it renders a mix of the 2 styles.

The code entered in the head section of my html is as follow:

<link type="text/css" rel="stylesheet" href="../style.css" />
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="../style2.css" />
<![endif]-->

I looked for an answer to my pb but found none so far.
Any help welcome

 

Use conditional comments to exclude IE from the good stylesheet.

<!--[if ! ie 6]-->
<link type="text/css" rel="stylesheet" href="../style.css" />
<!--[endif]-->
<!--[if IE 6]>
<link type="text/css" rel="stylesheet" href="../style2.css" />
<![endif]-->

Code (markup):

You would do better to rethink your stylesheet(s). There is very seldom any need to feed IE6 a different file, as the "* html" hack isolates IE≤6.

cheers,

gary

 

Thank you Gary.
even with your solution.
I can see that the style applied on IE is not as it should be (when linking to a single stylesheet "stylele2.css").
I spent a lot of time (drove me nuts) trying to work around this and decided to only apply one stylesheet for all browsers.
I find it hard to get the IE browsers to do what i want them to.

 

Gary's comment above basically states:

If the browser is NOT Internet Explorer 6, then load style.css
If the browser IS Internet Explorer 6, then load style2.css

It should be correct; you might want to double-check your stylesheets.

 

... and the only 'real' reason to need the hack is to implement missing functionality like min-height in 99% of layouts.

heroeff - can you post code or link to the code in question? Likely your problem stems from bad choices in your CSS, because like Gary said having to 'isolate' a separate stylesheet is usually not neccessary.

 

This is the code for the style.css file:
* {padding:0;margin:0;border:0;}

html {
margin:0;padding:0;border:0;
background-color:transparent;
height: 100%;
}

body {

width: 900px;
margin: 0 auto;
text-align:center;
font-family:Trebuchet MS, Helvetica, Arial, sans-serif;
font-size:77%;
background-color: #191919;
border: 1px dashed #FFFFFF;
}

h1 {
display:inline-block;
margin:15px;
padding:15px;
border:0;
font-family: "MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size:32px;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #C0C3DE;
background-color: #191919;
background-image: none;
text-align: center;
}

h2 {

font-family: "MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size: 28px;
font-style: normal;
color: #C5D6FC;
padding: 5px auto;
text-align:center;

}


/*Index*/

#page1, #contacts {
margin: 0 auto;
background-repeat:no-repeat;
width: 900px;
height: 445px;
}

#page1 {
background-image: url(images/aureliesiter_r1_c1.gif);
}

#contacts {
background-image: url(images/page-contacts2.jpg);
}

#page1 embed, object {
text-align:center;
background: transparent;
padding:0;
margin: 15% auto auto 30%;
}

/* Collections*/

#collections div {
margin: 0;
display:inline;
padding: 0;
background-color: none;
color:#FFFFFF;
font-family: "Lucida Sans Typewriter", "VTypewriter Royal", "TypewriterRough", "VintageTypewriter";
font-weight:lighter;
text-align: justify;
}

#collections img {
-moz-border-radius: 1em;;
}

#collections ul {
display:inline;
text-align:center;
width: auto;
float: left;
list-style-type: none;
background-color: #191919;
}

#collections ul li , #outfit ul li {
list-style-type: none;
background-color: #C0C3DE;
-moz-border-radius: 1em 0;
padding: 3px 3px 10px;
margin: 10px 10px;
border: solid 3px white;
text-align:center;
}
#collections ul li {
float: bottom;
width:135px;
}

#outfit ul li {
float: left;
}


#collections ul li a {
text-decoration:none;
}


#collections span {
display: none;
}


#collections a:hover span {
display: inline;
color: #110000;
width: 117px;
padding: 5% 10px;


}

#collecleft {
display: inline;
margin: 9px 18px;
float: left;
width: 172px;
border:dashed; border-width:medium; border: #C0C3DE;
}

#collecmid{
display: inline;
margin: 9px 18px;
float: left;
width: 172px;
border:dashed; border-width:medium; border: #C0C3DE;
}

#collecright {
display: inline;
margin: 9px 45px;
float: left;
width: 516px;
border:dashed; border-width:medium; border: #C0C3DE;

}

#collecright a {
font-family:"MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size: 20px;
text-align:center;
color:#C0C3DE;
text-decoration:none;
}

#collecright embed, object {
text-align:center;
background: transparent;
padding:0;
margin: 0 10px 0 55px;

}


#outfit {
margin: 0 auto;
text-align:center;
padding: 0;

}

#outfit img{
float: left;
margin: 10px 10px;
width: 350px;
height: 481px;
border: groove 3px white;
}





/*Portfolio*/

#sketch {
margin: 0;
padding: 0;
color: #FFFFFF;
border: double; border-width: thick; border: white;}

#sketch a img{
margin: 0 auto;
border:none;
display: block;
filter:alpha(opacity=20);
-moz-opacity: 0.2;
opacity: 0.2;
-khtml-opacity: 0.2;}


#sketch a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

#sketch ul li{
width: 210px;
-moz-border-radius: 1em 0;
list-style-type: none;
background-color: #C0C3DE;
margin: 10px 50px;
display: block;
list-style-type: none;
border: groove 3px white;

}

#sketch ul li a {
text-decoration:none;
}

div#colleft {
margin: 5% 2%;
float: left;
width: 40%;
border:dashed; border-width:medium; border: #C0C3DE;
}

div#colright {
margin: 5% 2%;
float: left;
width: 40%;
border:dashed; border-width:medium; border: #C0C3DE;
}

a.sketchleft {
float: bottom;}

a.sketchright {
clear: left;
}

div#colright a span, div#colleft a span {
position: absolute;
left: -9999px;
text-decoration:none;
}

div#colright a:hover span, div#colleft a:hover span {
padding: 5% 5%;
border:#FFFFFF;
font-size: medium;
font-weight:bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
position:relative;
top: 0 px;
left: 5%;
display: inline;
background-color: transparent;
color:#FEFEFE;
width: 85%;
text-align: center;
}



/* Navigation */

#outside {
clear: left;
padding: 0;
border:none;
width:900px;
height: 145px;
margin: 0 auto;
text-align: center;
background-color:#000000;
}

#menu {
padding:1px 0;
margin:0px auto;
text-align:center;
list-style-type:none;
width:900px;
border:none;
font-family:MS Reference sans-serif, Helvetica, Arial, sans-serif;
font-size:1.8em;
font-weight:normal;
}

#menu li {
margin: 30px 17px;
list-style-type: none;
padding: 2px 5px;
display:inline;
float:left;
position:relative;
width:auto;
}

#menu li a:link, #menu li a:visited {
padding:0;
display:block;
text-align:center;
text-decoration:none;
color:#9F9F9F;
width:auto;
font-weight:normal;
background-color: #000000;
}
#menu li:hover a, #menu li a:hover, #menu li a:active {
padding: 0;
display:block;
text-align:center;
text-decoration:none;
background-color: #000000;
color:#ffffff;
width:auto;
}
#menu li ul.submenu {
margin:0;
padding: 0;
list-style-type:none;
display:none;
background-color: #000000;
width:auto;
position:absolute;
top:30px;
left:-1px;

}
#menu li:hover ul.submenu {
display:block;
}
#menu li ul.submenu li {
margin: 0 auto;
width:auto;
clear:left;
font-size: 18px;
}
#menu li ul.submenu li a:link, #menu li ul.submenu li a:visited {
clear:left;
background-color: #000000;
padding:4px 0;
width:auto;
border:none;
position:relative;
z-index:1000;
color: #9F9F9F;
}
#menu li ul.submenu li:hover a, #menu li ul.submenu li a:active, #menu li ul.submenu li a:hover {
clear:left;
background-color: #000000;
padding:4px 0;
width:auto;
border:none;
position:relative;
z-index:1000;
color: #ffffff;
}



#menu li ul.submenu li a span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#fe676f;
}
#menu li ul.submenu li:hover a span, #menu li ul.submenu li a:hover span {
position:absolute;
top:0;
left:132px;
font-size:12pt;
color:#000000;
}

#about a{
display: block;
color: #9F9F9F;
width: 160px;
background-color: #000000;
}


#menu li.home {
margin: 20px 15px auto 50px;
}

 

This one is the style2.css:
* {padding:0;margin:0;border:0;}

html {
width:860px;
}

body {
width:860px;
background-color:#191919;
text-align:center;

}



h1 {
margin:15px auto;
padding:15px;
border:0;
font-family: "MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size: xx-large;
font-style: normal;
line-height: normal;
font-weight: normal;
color: #C0C3DE;
background-color: #191919;
background-image: none;
text-align: center;
width:860px;
}

h2 {
font-family: "MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size: x-large;
font-style: normal;
color: #C5D6FC;
padding: 5px auto;
text-align:center;

}


/*Index*/

#page1, #contacts {
margin: 0 auto;
background-repeat:no-repeat;
width: 860px;
height: 445px;
text-align:center;
}

#page1 {
background-image: url(file:///C|/Documents%20and%20Settings/Davy/Desktop/aurelie%20css/images/aureliesiter_r1_c1.gif);

}

#contacts {
background-image: url(file:///C|/Documents%20and%20Settings/Davy/Desktop/aurelie%20css/images/page-contacts2.jpg);
}

#page1 embed, object {
position:absolute; top:100px; right:auto; bottom:auto; left:190px;
}

/* Collections*/

#collections div {
text-align:center;
color: white;
}
#collections ul {
float: left;
background-color:#191919;
display:inline;
}

#collecmid ul {
margin: 100px -180px 0 0;
padding:0;
display:inline;
}

#collections ul.pics {
margin: 100px 5px auto 100px;
float: left;
background-color:yellow;
display:inline;
}

#collections ul li , #outfit ul li {
list-style-type: none;
background-color: #C0C3DE;
-moz-border-radius: 1em 0;
padding: 3px 3px 10px;
margin: 10px 10px;
border: groove 3px white;
text-align:center;

}

#outfit ul li {
float: left;
}


#collections ul li a {
text-decoration:none;

}


#collections a:link span, a:visited span {
display:none;
position:absolute; top:10px auto;
}

#collections a:link:hover span, { display:block; }



#collecleft {
display: inline;
margin: 9px 18px;
float: left;
width: 172px;
border:dashed; border-width:medium; border: #C0C3DE;
}

#collecmid{
display: inline;
margin: 9px 18px;
float: left;
width: 172px;
border:dashed; border-width:medium; border: #C0C3DE;
}

#collecright {
display: inline;
margin: 9px 45px;
float: left;
width: 516px;
border:dashed; border-width:medium; border: #C0C3DE;

}

#collecright a {
position:relative; top:-10px; right:80px; bottom:auto; left:60px;
font-family:"MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size: 1.4em;
text-align:center;
color:#C0C3DE;
text-decoration:none;

}

#collecright a.catwalk {
position:relative; top:100px; right:80px; bottom:auto; left:80px;
font-family:"MS Reference Sans Serif", "Trebuchet MS", Verdana, Arial;
font-size: 1.4em;
text-align:center;
color:#C0C3DE;
text-decoration:none;

}

#collecright embed, object {
position:relative; top:60px; right:auto; bottom:auto; left:-30px;
text-align:center;
background: transparent;
padding:0;
margin: 0 10px 0 55px;

}


#outfit {

}

#outfit img{

}

/* NAVIGATION */

#outside {
display:inline-block;
clear: left;
padding: 0;
border:none;
width:860px;
height: 145px;
margin: 5px auto;
text-align: center;
background-color: #000000;
}

#menu, #menu ul {
padding : 0;
margin : 0;
list-style-type : none;
line-height : 1em;
text-align : center;
}

#menu {
font-weight : normal;
font-family : MS Reference sans-serif, Helvetica, Arial, sans-serif;
font-size : 1.4em;
}

#menu a {
display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
padding : 0;
background : #000000;
color : #9f9f9f;
text-decoration : none;
width : auto;
}

#menu li {
margin: 20px 10px;
text-align:center;
float : left;
}

/* sub lists*/
#menu li ul {
position: absolute;
width: 144px;
left: -999em;
}

/* Eléments de sous-listes */
#menu li ul li {
font-size : 0.8em;
margin: 0 auto;

}

/* IE ne reconnaissant pas le sélecteur ">" */
html>body #menu li ul li {
font-size : 0.8em;
}


#menu a:hover {
color: #ffffff;
background: #000000;
}

/* Sous-listes lorsque la souris passe sur un élément de liste*/

#menu li:hover ul, #menu li.sfhover ul, {
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}

/*position home icon*/
#menu li.home {
margin: 20px 15px auto 50px;

 

and the current html i am actually dealing with:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<!--[if !IE 6]--><link type="text/css" rel="stylesheet" href="../style.css" /><!--[endif]-->

<!--[if IE 6]><link rel="stylesheet" type="text/css" href="../style2.css" /><![endif]-->


<title>aureliesite.gif</title>
<meta http-equiv="Content-Type" content="text/html;">

<!--Created Fri Sep 12 21:05:22 GMT+0100 (GMT Daylight Time) 2008-->
<script src="../Scripts/AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->

sfHover = function() {
var sfEls = document.getElementById("menu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</script>
</head>
<body onLoad="MM_preloadImages('../images/homehover.gif')">

<div id="collections">
<h1>Collection 2008 - 2009</h1>
<div id="collecleft">
<ul class="pics">
<ul>
<li><a href="outfit4.html" alt="outfit4"><img src="../collections/photos/outfit4.jpg" alt="outfit4" width="117" height="175"><span>Backless sailor tailored jackets with ruffles</span></a></li>
<li><a href="outfit5.html" alt="outfit5"><img src="../collections/photos/outfit5.jpg" alt="outfit5" width="117" height="175"><span>Bustier dress with upside down tailored jacket</span></a></li>
<li><a href="outfit6.html" alt="outfit6"><img src="../collections/photos/outfit6.jpg" alt="outfit6" width="117" height="175"><span>Printed sleeve shirt with puffy tailored skirt</span></a></li>
</ul>
</ul>
</div>

<div id="collecmid">

<ul>
<li><a href="outfit1.html" alt="outfit1"><img src="../collections/photos/outfit1.jpg" alt ="outfit1" width="117" height="175"><span>Printed sailor dress</span></a></li>
<li><a href="outfit2.html" alt="outfit2"><img src="../collections/photos/outfit2.jpg" alt="outfit2" width="117" height="175"><span>Little sailor top with hand printed short</span></a></li>
<li><a href="outfit3.html" alt="outfit3"><img src="../collections/photos/outfit3.jpg" alt="outfit3" width="117" height="175"><span>Fitted sailor dress</span></a></li>
</ul>


</div>
<div id="collecright">
<h2>Catwalk</h2>
<br />
<br />
<h3>"a story of cut and paste silhouettes and prints"</h3>

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','400','height','300','title','catwalk','src','catwalk','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','catwalk' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="400" height="300" title="catwalk">
<param name="movie" value="catwalk.swf" />
<param name="quality" value="high" />
<embed src="catwalk.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="400" height="300"></embed>
</object>
</noscript>
<p><a class="catwalk" href="collections2.html" target="_self"> Click here to read the story</a></p>
</div>
</div>


<div id="outside">
<ul id="menu">
<li><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('home','','../images/homehover.gif',1)"><img src="../images/home.gif" alt="home" name="home" width="32" height="32" border="0"></a>
<li><a href="collections2.html">Collections</a></li>
<li><a href="#">Portfolio</a>



<ul class="submenu">
<li><a href="sketch.html">Sketches</a></li>
<li><a href="illustrations.html">Illustrations</a></li>
</ul>
</li>

<li><a href="profile.html">Profile</a></li>
<li id="about"><a href="about.html">My Whereabout</a></li>
<li><a href="contacts.html">Contacts</a></li>


</ul></div>
</body>
</html>

 

basically the menu no longer operates the same whether i use the single stylesheet style2.css file or both stylesheets (included in the conditional comments).
With style2.css on IE the rollover menu works fine:
When mouse over the list called "portfolio", 2 anchored sublists appear normally (they are called "illustrations" and "sketches"). I had to get some javascript involved in the html page to make it work as I couldn't get the rollover menu to work in pure css code when browsing on IE.

My rollover on other browsers only involves CSS code from the style.css style sheet though.

I am not sure i am making myself clear here. To resume:

1. IE with style2.css works fine.
2. Non IE with style.css work fine.

3. IE with conditional comments (style.css + style2.css): menu is not working (no rollover)
Non IE still work fine though.

 

First, get rid of this: <?xml version="1.0" encoding="iso-8859-1"?>

It causes E6 to be in quirks mode; to not follow standards even worse than it normally doesn't follow standards.

The IE6 styles sheet should contain only differences from the base stylesheet. In standards mode, there will be fewer differences than in quirks mode.

After removing all non-IE6 specific rulesets from style2.css‡, put this as the first line of style2.css:

@import "style.css";

Code (markup):

That effectively pastes style.css into style2.css. Take a look at the stylesheets for my html & css workshop. The workshop.css imports the common.css and has the rules that override the common.css rules.

cheers,

gary

‡ In fact, start over with a blank style2.css, and add rulesets only as you need them. For example, the body {text-align: center;} was needed for a quirks mode bug, but is not needed for standards mode. Since you revert to {text-align: left;}, you'd never notice that it isn't needed. Start over, and it'd never be there in the first place.

 

What Gary said, and also you need to fix your invalid markup. You omitted a namespace on the HTML tag, have double nesting UL without interceding LI, not closing all your tags, anchors shouldn't have alt tags (did you mean to use title?) - it's got 67 validation errors meaning you don't even have XHTML, you have gibberish.

Where Gary says to start over with a blank stylesheet, I'd start over the markup too... Other improvements would involve pitching that STUPID MALFING ADOBE MM_ JAVASCRIPTED RUBBISH (sorry, pet peeve) in the trash and handling your hover states in the CSS (where they belong)

I see some technique 'issues' that I'd probably address too - usually if you have to 'uptree' to content being displayed on the page (aka doing ../) your website tree isn't very well thought out - so I'd probably re-arrange the whole directory structure so all links only go down-tree... there's a bunch of DIV that aren't doing anything for you, there's no reason for those two columns of images to be separate lists (at least not that I can see)... and you're using the gecko only rounded borders which are not going to show in anything other than firefox and it's close kin - so I'd add an image rounded corner method there. (since I doubt it would take more than a single 1k image to implement) - Basically I'm seeing a 5.6k HTML file for a layout that shouldn't even be 4k.

The CSS also doesn't make a whole lot of sense - I've never even HEARD of 'MS Reference Sans-serif' (unless you are trying to force the RASTER fonts?!?), and if trebuchet MS is present, verdana is 99.99% likely to be present and Arial is almost guaranteed - and you still didn't include the actual fallback family of sans-serif. (literally I'd strip those to "Trebuchet MS",sans-serif) Likewise for all those typewriter fonts with no monospace declared after. Non-metric border widths are inconsistant across browsers, you're redeclaring values already set by the reset up top (which I'd NOT declare border there), there's some relative positioning that is likely to cause rendering differences between the four major engines - when I don't see why it even needs it, there's no such thing as float:bottom; etc, etc, etc...

 

What have you got against Ralph? I saw the Adobe/MM script crap, but figured that was for another thread.

@heroeff: I didn't pay any attention to the markup, or more than glance at the css, but you really must have that stuff right or any hope of sane x-browser coding is stillborn.

Those scripts, even where there may be a need, are not exactly best practice and weren't when they were written eight or ten years ago.

Preloading images is worthless. It may help some of the better caching browsers, like Firefox, to switch images, but only the first time. It doesn't help IE at all because it tries to reload every time.

cheers,

gary

 

thanks guys for having taken the time to go through my mess and even given feedbacks. That 's my first website and obviously there are things that need to be improved. I take on board that has been said and will start over again.

Regarding the javascript bit. I didn't find any better way to get a popup menu to work on IE. When using span tags and hover, it didn't work with IE.

Is there any otherway to code it in CSS for that particular browser?

 

Use <a> tags and hover

 

thank you Blueparukia