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:

Code:

<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:

HTML 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:

Code:

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!

Thread: Wxternal CSS for different browsers

Thread Tools

Display

Wxternal CSS for different browsers

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions