ie7 / firefox conflict

[Chadi]

Please see attached.

The spacing in Firefox becomes too much when I add the <p> break for sake of correcting the output in IE7. The jagged two and third columns is IE7 without the <p> line.

The original code used:


</div>

<div id="services_feature">


When I add the <p> line, it corrects IE7's output, but it also makes Firefox spacing double, too much than I want it to be.

The 'service_feature' css code is this


/* services homepage feature design elements */


#services_feature {
padding: 12px 0px 0px 0px
}

.service1 {
float:left;
width:266px;
}

.service2 {
float:left;
width:266px;
}

.service3 {
float:left;
width:266px;
}

.service1 p, .service2 p, .service3 p { padding:0px 10px 0px 10px; }

.service1-2 {background-color:#2c6594;}
.service2-2 {background-color:#70c23e;}
.service1-3 {background-color:#2c628f;}
.service2-3 {background-color:#62af33;}
.service3-1 {background-color:#ff9c01;}
.service3-2 {background-color:#ff9900;}

.service1-2, .service2-2 {
color:white;
padding:5px 10px 5px 10px;
font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
font-size:12px;
line-height:16px;
font-weight:normal;
}

.service1-3 , .service2-3 {
color:white;
padding:5px 10px 5px 10px;
font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
font-size:12px;
line-height:16px;
font-weight:normal;
}

.service3-1 , .service3-2 {
color:white;
padding:5px 10px 5px 10px;
font-family: Tahoma, "Trebuchet MS", Arial, Verdana, Lucida, Sans-Serif;
font-size:12px;
line-height:16px;
font-weight:normal;
}

.service1-3 a:link, .service1-3 a:visited, .service2-3 a:link, .service2-3 a:visited, .service3-2 a:link, .service3-2 a:visited {
color:white;
text-decoration:underline;
}

.service1-3 a:hover, .service2-3 a:hover, .service3-2 a:hover {
text-decoration:none;
}


ul.services_feature_items
{
margin:0px 10px 0px 10px;
padding: 0px;
}

ul.services_feature_items li
{
list-style:none;
margin:0px;
padding:2px;
border-bottom: 1px solid #e5f4f6;
}


The actual page width is this


#column_right {
float:right;
width:264px;
}


#column_left {
width:522px;
}



Please explain how to fix this so Firefox and IE7 renders the same vertical spacing correctly.

[jscheuer1]

I'm not going to bother looking over the details of this at the moment. The general principal involved is too simple. You can use complimentary conditional styles. For example (going by the opening statements in your post) -

In the head:


<style type="text/css">
.ie_spacer {
display:none;
}
</style>
<!--[if IE]>
<style type="text/css">
.ie_spacer {
display:block;
}
</style>
<![endif]-->

In the body (wherever required):


<p class="ie_spacer">&nbsp;</p>

[Chadi]

Thanks, that works.

[Chadi]

Another strange IE issue.

The right bar "sub-navigation" is showing up white background in Firefox as it should show up (entire column). However, it is showing up in this color c3dcf1, in IE.

The 2ndlevel style sheet:



#content-container {
margin-top:10px;
#background-image:url(../images/bgd_2ndlevel_body.gif);
width:798px;
border-bottom:18px solid white;
}

#content {
width:568px;
}

#sub-navigation {
float:right;
width:214px;
background-color:#fff;
}

#sub-navigation h2 {
display:none;
background-color:#fff;
}

ul#second-lvl-nav {
text-align: left;
list-style-type:none;
margin:0px;
padding:0px;
width:214px;
background-color:#fff;
}

ul#second-lvl-nav li {
margin:0px;
padding:0px;
border-bottom:1px solid #b4d2ec;
font-size:11px;
background-color:#fff;
}

ul#second-lvl-nav li a
{
display: block;
padding: 6px;
width:214px;
voice-family: "\"}\"";
voice-family:inherit;
width:202px;
color:#5a7285;
text-decoration: none;
background-color:#fff;
}

ul#second-lvl-nav li a:hover, ul#second-lvl-nav li#active a:hover
{
color: #5a7285;
background: #dbeefe;
}


I'm fairly new to all the css stuff so bear with me.

html code...


<div id="sub-navigation">
<ul id="second-lvl-nav">
<li><a href="clientexec.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
ClientExec Billing Software</a></li>
<li><a href="controlpanels.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Control Panel Tour</a></li>
<li><a href="roundcube.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Webmail Demo</a></li>
<li><a href="designer.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/>
Website Creator Demo</a></li>
<li><a href="compare.php">
<img alt="Icon" src="../images/page.gif" width="11" height="13" class="style2"/> Compare Hosting Types</a></li>
</ul>
</div>

Attached, you'll see how it is in firefox and ie (bluish background). It should be white in IE7 without left solid border (except below <li> links) as it is in firefox.