Fri, 2009-07-03 18:55
Hello,
I'm having an issue with cross browser styling; there seems to be only a few tweaks I need to make in order to make my Firefox-perfect styling work for IE, as well, but all of the suggested methods of linking to an external stylesheet conditionally for Internet Explorer ONLY don't work. I've tried linking to two stylsheets conditionally, marking one for Internet Explorer and one for all non-internet explorer browsers, but this doesn't work. In this case, Internet Explorer will quite happily link to it's stylesheet, but Firefox seems to ignore all attemps at external linking and will not link to any stylesheet whatsoever. It seems to only recognize internal styles, and if I have internal styles there seems to be nothing I can do to get the page to link to an external style using this code:
It doesn't work.
Attached below is my index page as it stands now:
<span style="font-weight:bold"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Lenny's</title> <!--[if IE]> <link rel="stylesheet" type="text/css" href="iemain.css" /> <![endif]--> <style type="text/css"> <!-- img {border:0;} body { font: 100% Verdana, Arial, Helvetica, sans-serif; margin: 0 auto; padding: 0; text-align: center; color: #000000; background-image: url(images/main.jpg); background-repeat:no-repeat; min-width: 1410px; min-height: 960px; background-color: #e8e3dd; } *html #navigation { position: relative; top: 215px; left: 20px; text-align: left; width: 56em; color: #e1dbbd; } #navigation { position: relative; top: 215px; left: 200px; text-align: left; width: 56em; color: #e1dbbd; } ul { text-decoration: none; display: inline; list-style: none; } li{ text-decoration: none; list-style: none; display: inline;} .oneColElsCtr #container { width: 55em; margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */ text-align: left; /* this overrides the text-align: center on the body element. */ position:relative; top: 280px; left: -50px; } #photo {float: right; } #footer { position: relative; top: 335px; left: 415px; text-align: left; width: 126em; color: #e1dbbd; font-size: 16px; } --> </style> <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[i])&&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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } 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[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body class="oneColElsCtr" onload="MM_preloadImages('images/contactglow.gif','images/directionsglow.gif','images/historyglow.gif','images/menuglow.gif','images/homeglow.gif')"> <div id="navigation"> <ul> <li><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','images/homeglow.gif',1)"><img src="images/home.gif" name="home" width="49" height="12" border="0" id="home" /></a> </li> <li> | </li> <li> <a href="menu.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('menu','','images/menuglow.gif',1)"><img src="images/menu.gif" name="menu" width="48" height="12" border="0" id="menu" /></a> </li> <li> | </li> <li><a href="history.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('history','','images/historyglow.gif',1)"><img src="images/history.gif" name="history" width="70" height="13" border="0" id="history" /></a> </li> <li> | </li> <li><a href="directions.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('directions','','images/directionsglow.gif',1)"><img src="images/directions.gif" name="directions" width="97" height="13" border="0" id="directions" /></a> </li> <li> | </li> <li><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','images/contactglow.gif',1)"><img src="images/contact.gif" name="contact" width="102" height="13" border="0" id="contact" /></a> </li> </ul></div> <div id="container"> <img src="images/lennysmain.gif" /> </div> <div id="footer"> <ul> <li><img src="images/copyright.gif"/> </li> <li> | </li> <li><a href="http://www.katieirvin.com"><img src="images/katie.gif" /> </a></li> </ul><p> </p> </div> </body> </html> </span>
Note the internal stylesheet; using an external one for the basic style does NOT work for Firefox, so I can't seem to simply have two stylesheets and link them both to the same page for different browsers. Any suggestions?
Mod edit/ please use BB code tags for code display
Sat, 2009-07-04 06:55
#1
You're not approaching
You're not approaching things in the correct manner. The idea is not to provide separate sheets for different browsers this will lead to complications and unnecessary work.
The idea is that one always codes for a modern standards aware browser i.e FF, one then tweaks things to compensate for IE flaws where necessary. The IE only stylesheet is simply a few rulesets required to correct issues; note that by and large and with experience it is possible to get almost identical rendering in browsers using one main stylesheet, adjustments are generally minor and few.
The Conditional Comment structure is simply used to ensure that IE gets a few rules to overwrite the main ones in the other stylesheet and that other browsers cannot read that sheet.
For this to work the main styles are first in the order and the CC follow after; this way the CC rules overwrite any in the main sheet as necessary.
As to why FF is not reading the external styles would be guess work, you will need to show your markup with this in place.
Sat, 2009-07-04 21:30
#2
As you say, just a few tweaks
You're not approaching things in the correct manner.I am not sure this statement is correct. Reading the original post carefully you say you have working CSS in Firefox which just leaves (using your own words) "only a few tweaks" that need to be fed to IE.
Your reported problem is getting this "feed to IE" working correctly and this has led you to try various ways; some odder than others perhaps! Since it is not obvious from your posted code what is wrong, it is probably therefore a good idea to provide a link to the live page causing the problem.
Regards
Sat, 2009-07-04 21:40
#3
css-helper wrote: You're not
You're not approaching things in the correct manner.I am not sure this statement is correct.
Really?
I've tried linking to two stylsheets conditionally, marking one for Internet Explorer and one for all non-internet explorer browsers
This is why I made the statement; the sentence before and following also show cause for concern, I think my statement was very correct 
thanks
Wed, 2009-07-08 02:08
#4
Hugo wrote:You're not
You're not approaching things in the correct manner. The idea is not to provide separate sheets for different browsers this will lead to complications and unnecessary work.
I realize this, but I mentioned it regardless to stem any suggestions to try it otherwise.
Here's a link to the actual site, now that I've got it temporarily hosted on my own server:
No external styles used atm; the conditional comment doesn't seem to work either before all the styling or after. It should be obvious that IE bumps the navigation and the menu over to the right, but that everything else is in place, and it works just fine in Firefox.
Wed, 2009-07-08 19:26
#5
You can always use a browser
You can always use a browser sniffer script, and if you have PHP on the server, you can use a short PHP script to render a stylesheet based on the browser.
This is not usually recommended, however, it can be used as a workaround until you've narrowed your IE specific tweaks.
Thu, 2009-07-09 04:53
#6
Try this syntax
My suspicion was this could be a syntax problem all along. Have a look at your link statement: it should read:
<link rel="stylesheet" type="text/css" href="styles/iemain.css" />
See what difference that makes. Check too that the path to your "iemain.css" file is correct.
Regards