Click to See Complete Forum and Search --> : Wxternal CSS for different browsers
andidas311
06-04-2009, 10:24 AM
Hi, I've developed a stylesheet for my website that works great in both FF and Safari, but IE7 is showing errors in spacing.
I've made an adjusted version of the stylesheet and included this code on all HTML pages:
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style_ie7.css" />
<![endif]-->
The problem is that IE7 seems to ignore this command and calls from style.css, not style_ie7.css - thus showing the same spacing errors.
Can anyone please help?
peachskittle
06-05-2009, 09:06 AM
Hiya, not sure if you've resolved this already.
The conditional you have there for IE7 works just as it should for me. I think this may not be your problem...
andidas311
06-05-2009, 09:31 AM
Hi peachskittle
No I have not yet resolved my problem. In addition to this, a Browser Compatability test in Dreamweaver concludes:
Line 21
Found 1 errors in external css files
Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2; Netscape 8.0; Opera 8.0, 9.0; Safari 2.0
****line 21 = <link rel="stylesheet" type="text/css" href="style.css"> ***
Actually scratch that, I've solved the error found by Browser Checker - however I am still having the IE7 stylesheet issue. The default stylesheet seems to load everytime...
peachskittle
06-05-2009, 09:47 AM
The conditional doesn't stop the page from loading the standard stylesheet, but it should also load the IE stylesheet when in IE7 since IE7 is the only one that should see the command to do that. Is it loading both?
andidas311
06-05-2009, 10:17 AM
I've conducted a few experiments and found that yes IE7 is calling the IE7 style sheet, BUT, for some reason, any adjustments I make to the margin/padding etc. in the non-IE7stylesheet are also appearing when previewed in IE7
How can that be? is it reading both stylesheets at once??
peachskittle
06-05-2009, 11:04 AM
I guess that's what I was trying to say, yes. The IE 7 conditional isn't tell the page to use the ie7 stylesheet instead. It's telling IE7, and IE7 only, to use the ie7 stylesheet alongside your main stylesheet. It is definitely possible for IE7 to still respect the main stylesheet over your IE7 one, so you may need to either be more specific about what style you are trying to feed to ie7. I think you're having more of an issue with your style than with including the file, as it looks like you're doing that fine.
andidas311
06-05-2009, 11:16 AM
Ok I'm going to give up hacking the site with two style sheets and instead find out what's causing the problem, solve it using just one stylesheet.
Basically I have a Flash nav menu which is being positioned FF and Safari too high, but just right in IE. My plan was to apply a margin to the default stylesheet and no margin atall to the IE7 sheet, but seeing as that isn't working, I've got solve why this nav menu is being positioned differently in all the browsers.
Do you know anything about flash content positioning?
peachskittle
06-05-2009, 12:41 PM
Do you have some way of showing the problem? IE has a tendency to add space wherever it pleases and it might actually be that IE is adding too much space, while FF is doing as you have instructed, but the extra space is what you need... But either way, we would really need to be able to see what is going on.
andidas311
06-09-2009, 04:57 AM
I have attached 2 jpegs - the first showing the IE7 display and the second the FireFox display to show you what I'm talking about.
Here is the page code:
<body>
<div id="wrapper">
<div id="column1"> <p class="fire_specialist_intro">CTA Fire is a specialist radio fire alarm systems company, with unrivalled experience of the design, installation and commissioning of Radio Systems
<br />
<br />
<a href="aboutus.html">Click to read about the CTA Fire business, our policies and our objectives</a>
<br />
<br />Click to read the CTA Fire company profile
</p>
</div>
<div id="column2"><img src="Images/nsi_certificate.jpg" class="farside"/></div>
<div id="fire_specialist_text_box"><h1>CTA Fire - Detection and Alarm System Specialists</h1>
</div>
<div id="fire_alarm_menu_box">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','150','title','CTA Fire Navigation Menu','src','flash/OutThere_Banner02','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','flash/OutThere_Banner02' ); //end AC code
</script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="150" title="CTA Fire Navigation Menu">
<param name="movie" value="flash/OutThere_Banner02.swf" />
<param name="quality" value="high" />
<embed src="flash/OutThere_Banner02.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="150"></embed>
</object></noscript>
<div id="footer">
<div id="footer_container"> <p class="footer_no_alarm_text">2009 © <a href="index.html">CTA Fire</a>, radio alarm system specialists. All rights reserved. All content of this website is subject to Copyright.</p>
<p class="footer_text"><a href="index.html">Home</a> | <a href="aboutus.html">About us</a> | <a href="fire_services.html">Fire Services</a> | <a href="processes.html">Processes</a> | <a href="recent_projects.html">Recent Projects</a> | <a href="news.html">News and Events</a> | <a href="contact.html">Contact</a> </p>
</div>
<div id="footer_container"><div id="andi_best_box"><a href="http://www.andib.co.uk" target="_blank"><img src="Images/andi_best_freelance_illustrator_graphic_designer.jpg" alt="Website design and construction by Andi Best www.andib.co.uk" width="140" height="28" /></a><p>Website design and construction by Andi Best www.andib.co.uk</p></div></div>
</div>
</div>
</div>
</body>
and the CSS:
body {
background-color: #3e3e3e; margin-top:25px;
}
#wrapper {
width:800px;
height:600px;
margin:0 auto;
background-color:#000000;
background-image:url(Images/fire_system_specialist_bkg.jpg);
background-repeat:no-repeat;
border:1px solid #8e2a09;
}
#footer{width:800px;
margin:0 auto;
background-color:#3e3e3e;
clear:both;
}
#column1 {width:170px;
height:428px;
float:left;
}
#column2 {width:630px;
height:428px;
float:left;
}
#column2partition {width:295px;
height:275px;
float:left;
padding:10px;
}
#fire_specialist_text_box {width:800px;
clear:both;
float:left;
}
#fire_alarm_menu_box {width:800px;
float:left;
}
.icon {padding-left:7px; padding-right:7px; padding-bottom:7px; padding-top:45px; float:left;}
#main_title_holder {width:630px; height:112px;}
.fire_specialist_intro {padding:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#FFFFFF;
text-align:left;
margin-left:40px;
margin-top:75px;
width:110px;
}
.fire_specialist_content {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#FFFFFF;
text-align:left;
margin-top:0px;
margin-left:60px;
}
.fire_specialist_content2 {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#FFFFFF;
text-align:left;
margin-top:0px;
margin-left:20px;
margin-right:30px;
}
#fire_alarm_container {height:20px; width:315px; float:left;}
.fire_alarm { font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#CC0033;
text-align:left;
margin-top:0px;
margin-left:70px;
}
.fire_alarm2 { font-family:Arial, Helvetica, sans-serif;
font-size:10pt;
color:#CC0033;
text-align:left;
margin-top:0px;
margin-left:30px;
}
.fire_alarm3 { font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#cf6b2d;
}
.footer_text {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#FFFFFF;
}
.footer_no_alarm_text {
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#000000;
}
#footer_container {width:780px; height:100px; padding:10px; text-align:center;
}
h1 {font-family:Arial, Helvetica, sans-serif;
font-size:14pt;
color:#cf6b2d;
text-align:left;
margin-top:0;
margin-left:190px;
height:2px;
font-style:italic
}
h2 {font-family:Arial, Helvetica, sans-serif;
font-size:16pt;
color:#FFFFFF;
text-align:left;
margin:0;
font-weight:bold;
padding-top:63px;
}
#andi_best_box {
height:100px;
width:150px;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:8pt;
color:#FFFFFF;
text-align:right;
}
img.farside {float:right;
margin-top:58px;
}
a:link {
text-decoration: none;
color: #d49e24;
}
a:visited {
text-decoration: none;
color: #d49e24;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
a:active {
text-decoration: none;
color: #d49e24;
}
a:focus
{
-moz-outline-style: none;
}
a img {
border: none;
outline: none;
}
<div id="fire_alarm_menu_box"> contains the Flash content.
Any help to straighten this out would be greatly appreciated.
peachskittle
06-09-2009, 10:34 AM
For your "fire_alarm_menu_box", have you tried the clear attribute for it in your CSS? like "clear: both;'
Would be easier for me if you have a live link that I can view this on
andidas311
06-09-2009, 10:58 AM
NAILED IT!
Ok yeah I tried swapping float:left out for clear:both, still nothing happened - but as I did that I noticed a clear:both property for the rule immediately above, the one containing the orange tagline - but no specified height. By sticking the height measurement in with those extra 7px, everything fits neatly in all browsers.
Thanks a whole huggy bunch!