IE and Firefox problems

**jamest** · 04-07-2008, 10:20 PM

This is my problem. The left hand Navigation(red code) works properly in IE7 but not in Firefox and the content section(blue code) works properly in Firefox but not IE7(IE7 creates a large margin at the top and eliminates the red line on the right side).

HTML

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Lakeville RES</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div class="curvymain">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<ul id="menu">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Products & Services</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<div id="content">
<p>Lorem ipsum dolor sit amet, magna sed eu class turpis, elit fermentum dictum cursus justo. Diam condimentum ut morbi ornare, ante vel diam possimus, consequat cursus auctor diam, mollis lobortis velit pede lorem. Commodo pellentesque sed egestas amet, posuere lacus venenatis dictum, amet orci scelerisque unde vel. Sodales vel aliquam mauris egestas, aenean sit aliquam aut, tincidunt felis in quam tincidunt, ante fusce imperdiet orci ut. Amet mauris leo eget suspendisse, egestas suscipit nullam dignissim, adipiscing nisl dolor ultrices dolor, risus lectus dictumst aenean tincidunt.</p>

<p>Orci felis sed vitae sed, pede scelerisque congue magna non, aliquam wisi et nunc velit. Massa phasellus hymenaeos nonummy cras, dui ligula eu mauris consectetuer. Nullam ac placerat vitae vitae, tempus sed quam odio metus. Sodales hendrerit nonummy consequat at, turpis interdum turpis a, diam nunc amet in vitae. Suspendisse sit lobortis pretium parturient, urna bibendum sit elit. Donec velit tortor fusce scelerisque, pulvinar neque lacus convallis est, lacinia quis sit non in. Velit in leo scelerisque, sit a tortor pede.</p>

<p>Fusce velit velit mauris, vestibulum habitasse auctor porta magna, vitae erat venenatis elit, praesent feugiat cras quisque quis. Erat tristique sollicitudin blandit, habitasse nisl convallis faucibus, ante vehicula duis purus. Tellus inventore massa vivamus blandit, quis aliquam ut eros, eget maecenas tortor lacus sed, commodo egestas eros amet et. Felis risus ante turpis, tincidunt odio tellus vel. Facilisis id et viverra, suspendisse sed neque id, pellentesque suspendisse dolor tincidunt laoreet, in cras sed nunc. Est id mauris blandit mauris, mattis ut morbi amet, pulvinar etiam eu et nec. Ante nam mollis quis, adipiscing pede ut mauris consectetuer, libero ullamcorper odio tellus nulla, mauris eu dictumst pellentesque pellentesque. Rhoncus pharetra risus in, habitasse vestibulum urna sit donec, tellus cursus pellentesque nullam, id sapien pulvinar sagittis sed. Congue quisque erat etiam, sapien eros adipisicing pede massa, ut non morbi posuere, hendrerit integer amet tempus tortor. Dui sit mauris risus libero, dapibus fringilla ut vestibulum magna.</p>

<p>Tincidunt suscipit placerat id vitae, alias ut vitae sodales amet. Porttitor integer elit auctor, gravida condimentum conubia risus. Eleifend suscipit at urna, semper in purus hac, arcu ornare praesent eget, quis non est enim. Nulla id eros mauris, pharetra porta natoque sagittis maecenas, vehicula diam pellentesque fames, consectetuer nec turpis ultrices amet. Risus justo feugiat aliquet, et dui accumsan mauris, nec lectus condimentum qui dapibus. Non vestibulum dolor sem magna, commodo dictumst ac commodo, convallis imperdiet amet non, facilisis eros ullamcorper imperdiet pellentesque. Nunc est quam vel quis, faucibus quis nonummy mauris, erat ut felis pede risus. Ac nam lorem gravida ipsum, enim id iaculis nec magna, mollis vivamus laoreet lacus.</p>
</div>
<div id="footer">
<span id="nav3"></span>

</div>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
</div>
<div class="curvynav">
<em id="ctl"><b>&bull;</b></em>
<em id="cbl"><b>&bull;</b></em>
<ul id="secmenu">
<li><a href="#" class="current">Home</a></li>
<li><a href="#">Products & Services</a></li>
<li><a href="#">Locations</a></li>
<li><a href="#">Applications</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<em id="ctr"><b>&bull;</b></em>
<em id="cbr"><b>&bull;</b></em>
</div>
</body>
</html>

CSS

Code:

* {
margin:0;
}
body {
margin:15px;
}
/* Main Box */
.curvymain {
position:relative;
width:100%;
background:#cf1519;
color:#000;
margin:0;
padding:20px 0;
}
.curvymain #ctl, .curvymain #cbl, .curvymain #ctr, .curvymain #cbr {
position:absolute;
width:20px;
height:20px;
color:#cf1519;
background:#fff;
overflow:hidden;
font-style:normal;
z-index:1;
}
.curvymain #ctl {
top:0;
left:0;
}
.curvymain #cbl {
bottom:0;
left:0;
}
.curvymain #ctr {
top:0;
right:0;
}
.curvymain #cbr {
bottom:0;
right:0;
}
.curvymain em b {
position:absolute;
font-size:150px;
font-family:arial;
color:#cf1519;
line-height:40px;
font-weight:normal;
}
.curvymain #ctl b {
left:-8px;
}
.curvymain #ctr b {
left:-25px;
}
.curvymain #cbl b {
left:-8px;
top:-17px;
}
.curvymain #cbr b {
left:-25px;
top:-17px;
}
.curvymain p {
position:relative;
z-index:100;
padding:5px 10px;
}

/* Navigation2 Box */
.curvynav {
position:fixed;
width:165px;
background:#cf1519;
color:#000;
margin:0;
padding:20px 0;
top:100px;
left:45px;
}
.curvynav #ctl, .curvynav #cbl, .curvynav #ctr, .curvynav #cbr {
position:absolute;
width:20px;
height:20px;
color:#cf1519;
background:#fff;
overflow:hidden;
font-style:normal;
z-index:1;
}
.curvynav #ctl {
top:0;
left:0;
}
.curvynav #cbl {
bottom:0;
left:0;
}
.curvynav #ctr {
top:0;
right:0;
}
.curvynav #cbr {
bottom:0;
right:0;
}
.curvynav em b {
position:absolute;
font-size:150px;
font-family:arial;
color:#cf1519;
line-height:40px;
font-weight:normal;
}
.curvynav #ctl b {
left:-8px;
}
.curvynav #ctr b {
left:-25px;
}
.curvynav #cbl b {
left:-8px;
top:-17px;
}
.curvynav #cbr b {
left:-25px;
top:-17px;
}
.curvynav .curvy p {
position:relative;
z-index:100;
padding:5px 10px;
}

/* Navigation1 */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#menu{
padding:0;
float:left;
font:bold 13px Arial;
width:100%;
border:1px solid #625e00;
border-width:1px 0;
background:black url(/images/navdefault.gif) center center repeat-x;
}

#menu li{
display:inline;
}

#menu li a{
float:left;
color:white;
padding:9px 11px;
text-decoration:none;
border-right:1px solid white;
}

#menu li a:visited{
color:white;
}

#menu li a:hover, #menu li .current{
color:white;
background:transparent url(/images/navactive.gif) center center repeat-x;
}
/* Navigation2 */
#secmenu{
margin:0;
padding:0;
font:bold 13px Arial;
width:165px;
border:1px solid #625e00;
border-width:1px 0;
background:black url(/images/navdefault.gif) center center repeat-x;
}

#secmenu li{
display:block;
width:165px;
}

#secmenu li a{
float:left;
color:white;
padding:9px 0;
text-decoration:none;
width:165px;
text-align:center;
}

#secmenu li a:visited{
color:white;
}

#secmenu li a:hover, .solidblockmenu li .current{
color:white;
background:transparent url(/images/navactive.gif) center center repeat-x;
}
/* Content Area */
div#content {
background:#fff;
margin:0 15px;
padding-left:250px;
}

**SillyWilly** · 03:24 AM

Below is the corrected CSS code.

The problem you were having in IE is caused by the haslayout. All I did was give a layout to the main box and the content div using the IE only zoom property which I set to 1.0. This will not affect anything else, it only fixes the bug.

I fixed the problem in Firefox by replacing the float with display:block on the links.

Then I fixed the problem in IE6 by using the underscore hack so that only IE6 will see the position:absolute and all other browsers will see position:fixed. IE6 doesn't support position:fixed and so it looked like crap in IE6.

Of course this CSS wont validate if that's important to you, but it should work great with no worries. There are better ways to fix this so that it will validate, but I didn't want to spend much time on this. You could use conditional comments to easily and quickly separate the invalid code from the valid and from all other browsers, and then you know these solutions will work forever and never cause a problem for future browsers(which I really doubt they will anyways).

Btw, I would remove the xml declaration at the beginning since it will cause IE to go into quirks mode. Use a meta element for the encoding if you want.

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

or if you want utf-8

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Code:

* {
margin:0;
}
body {
margin:15px;
}
/* Main Box */
.curvymain {
zoom:1.0;
position:relative;
width:100%;
background:#cf1519;
color:#000;
margin:0;
padding:20px 0;
}
.curvymain #ctl, .curvymain #cbl, .curvymain #ctr, .curvymain #cbr {
position:absolute;
width:20px;
height:20px;
color:#cf1519;
background:#fff;
overflow:hidden;
font-style:normal;
z-index:1;
}
.curvymain #ctl {
top:0;
left:0;
}
.curvymain #cbl {
bottom:0;
left:0;
}
.curvymain #ctr {
top:0;
right:0;
}
.curvymain #cbr {
bottom:0;
right:0;
}
.curvymain em b {
position:absolute;
font-size:150px;
font-family:arial;
color:#cf1519;
line-height:40px;
font-weight:normal;
}
.curvymain #ctl b {
left:-8px;
}
.curvymain #ctr b {
left:-25px;
}
.curvymain #cbl b {
left:-8px;
top:-17px;
}
.curvymain #cbr b {
left:-25px;
top:-17px;
}
.curvymain p {
position:relative;
z-index:100;
padding:5px 10px;
}

/* Navigation2 Box */
.curvynav {
position:fixed;
_position:absolute;
width:165px;
background:#cf1519;
color:#000;
margin:0;
padding:20px 0;
top:100px;
left:45px;
}
.curvynav #ctl, .curvynav #cbl, .curvynav #ctr, .curvynav #cbr {
position:absolute;
width:20px;
height:20px;
color:#cf1519;
background:#fff;
overflow:hidden;
font-style:normal;
z-index:1;
}
.curvynav #ctl {
top:0;
left:0;
}
.curvynav #cbl {
bottom:0;
left:0;
}
.curvynav #ctr {
top:0;
right:0;
}
.curvynav #cbr {
bottom:0;
right:0;
}
.curvynav em b {
position:absolute;
font-size:150px;
font-family:arial;
color:#cf1519;
line-height:40px;
font-weight:normal;
}
.curvynav #ctl b {
left:-8px;
}
.curvynav #ctr b {
left:-25px;
}
.curvynav #cbl b {
left:-8px;
top:-17px;
}
.curvynav #cbr b {
left:-25px;
top:-17px;
}
.curvynav .curvy p {
position:relative;
z-index:100;
padding:5px 10px;
}

/* Navigation1 */
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

#menu{
padding:0;
float:left;
font:bold 13px Arial;
width:100%;
border:1px solid #625e00;
border-width:1px 0;
background:black url(/images/navdefault.gif) center center repeat-x;
}

#menu li{
display:inline;
}

#menu li a{
float:left;
color:white;
padding:9px 11px;
text-decoration:none;
border-right:1px solid white;
}

#menu li a:visited{
color:white;
}

#menu li a:hover, #menu li .current{
color:white;
background:transparent url(/images/navactive.gif) center center repeat-x;
}
/* Navigation2 */
#secmenu{
margin:0;
padding:0;
font:bold 13px Arial;
width:165px;
border:1px solid #625e00;
border-width:1px 0;
background:black url(/images/navdefault.gif) center center repeat-x;
}

#secmenu li{
display:block;
width:165px;
}

#secmenu li a{
display:block;
color:white;
padding:9px 0;
text-decoration:none;
width:165px;
text-align:center;
}

#secmenu li a:visited{
color:white;
}

#secmenu li a:hover, .solidblockmenu li .current{
color:white;
background:transparent url(/images/navactive.gif) center center repeat-x;
}
/* Content Area */
div#content {
background:#fff;
margin:0 15px;
padding-left:250px;
zoom:1.0;
}

**jamest** · 04-13-2008, 12:21 PM

Thanks.