Internet Explorer vs Firefox margin / float problem

By tagsko on 23 Jul 2008 at 09:06 UTC

I'm new to Drupal theme development and have been scratching my head over a browser compatibility problem.
My menu which is made up from primary links and secondary links shows exactly as I want them to in Firefox, but when viewing the page in Internet Explorer the menu shifts (annoyingly) several pixels to the left. Can I fix this by just editing my style.css or do I have to set up a different stylesheet for Internet Explorer (and if so, how?).

Many, many thanks for your help! :)

Here's an extract from my style.css document where the two menus in question are .div and .div2 which are positioned to the left overlaying my header img:

#header {
	background: #ffffff url(images/header-bg.jpg) no-repeat;
	height: 100px;
	position: relative;
}
#headerimg {
	position: relative;
	padding: 0px 0px 0px 40px;
	height: 100px;
}
#headerimg .description{
	position: absolute;
	left: 110px;
	bottom: 3px;
	color: #c9eefe;
	font-size: 14px;
}
.nav {
	list-style: none;
	margin: 0px;
	position: absolute;
	top: 45px;
	left: -45px;
	bottom: 0px;
}
.nav li {
	float: left;
	margin-left: 5px;
}
.nav li a.active{
	color: #000000;
}
.nav li a{
	color: #000000;
	text-decoration: none;
	padding: 0px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	display: block;
}
.nav li a:hover {
	color: #ffffff;
	background: #000000 url(images/nav-button-bg.gif) repeat-x;
}
.nav2 {
	list-style: none;
	margin: 0px;
	position: absolute;
	top: 60px;
	left: -45px;
	bottom: 0px;
}
.nav2 li {
	float: none;
	margin: 5px;
}
.nav2 li a.active{
	color: #000000;
}
.nav2 li a{
	color: #000000;
	text-decoration: none;
	padding: 0px 15px;
	font: bold 14px/100% Arial, Helvetica, sans-serif;
	display: block;
}
.nav2 li a:hover {
	color: #ffffff;
	background: #000000 url(images/nav-button-bg.gif) repeat-x;
}

Comments

Try this

laurencemercer

English

commented 23 July 2008 at 11:36

I would suggest a couple of things:

For IE7 try using conditional comments placed in the page.tpl.php file, and then a CSS rule targeting the conditional comments. There is no need for a separate style sheet.
For IE6 you can use a simple * html hack in your style.css file. This would work like so:
```
* html #yourdiv {
  some: rules;
}
```
This will only target IE6, and there is also no need for a separate style sheet here.

--------------------------------
Work - Lhmdesign
Play - My Drupal blog

LM — Drupal development

You could use conditional

prestonso commented 23 July 2008 at 15:15

You could use conditional comments for both instances, using "lt" to target IE 6. That would lessen the impact of the CSS not validating because of the * html hack. Here's what you would put in your page.tpl.php for conditional comments:

  <!--[if IE 7]>
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie.css";</style>
    <![endif]-->
    <!--[if lt IE 7]>
    <style type="text/css" media="all">@import "<?php print base_path() . path_to_theme() ?>/fix-ie6.css";</style>
    <![endif]-->

For conditional comments, you do not need to import all the original CSS from the style.css. Just place the rules into fix-ie.css and fix-ie6.css that you want to replace the styles defined in the style.css (in this case, just .nav).

___________________

Preston So

Just bookmarking this post:)

talyia commented 17 September 2008 at 11:07

After a lot of issues w not getting the conditional comments to work as they should, your post got me back on track and all is now working as it should, so ...thank you Prestonso!

Christine