PDA

View Full Version : Ghost Space on FireFox

spaniol
23rd March 09, 02:09 PM
Hi. I present you a new issue of mine, product of navegator incompatibility.
The problem can be seen in this picture marked with red:

www.akewa.cl/IE-FF.jpg

As is needed, I post the HTML and CSS code:

------------------------------
HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Identec Ltda - identificamos tu mundo</title>
<link href="htm/CSSidentec.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="total">
<div id="left">
<div id="izUno"></div>

<div id="izqDos">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="187" height="253">
<param name="movie" value="swf/logo.swf" />
<param name="quality" value="high" />
<embed src="swf/logo.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="187" height="253"></embed>
</object>
</div>

<div id="izqTres"></div>
</div>
<div id="contenedor">
<div id="head"></div>

<div id="nav">
<ul>
<li>Inicio</li>
<li>Nosotros</li>
<li>Productos</li>
<li>Servicios</li>
<li>Noticias</li>
<li>Contacto</li>
</ul>
</div>
<div id="main">CONTENIDO</div>
<div id="right">SITIOS AMIGOS</div>
</div>
</div>
</body>
</html>
------------------------------


------------------------------
CSS

#left {
width: 187px;
float: left;
}
#izUno {
height: 145px;
width: 187px;
background-image: url(../img/izqArr.jpg);
}
#izqDos {
background-image: url(../img/izqMed.jpg);
height: 253px;
width: 187px;
}
#izqTres {
background-image: url(../img/izqAba.jpg);
height: 211px;
width: 187px;
}
#total {
width: 860px;
margin-right: auto;
margin-left: auto;
}
#head {
background-image: url(../img/head.jpg);
height: 127px;
background-position: left;
background-repeat: no-repeat;
margin-top: 18px;
}
#contenedor {
width: 673px;
float: right;
background-color: #e6e6e6;
}
#nav {
height: 30px;
background-color: #1b1464;
width: 655px;
clear: both;
}
#nav li {
display: block;
height: 30px;
width: 60px;
text-align: center;
float: left;
font-size: x-small;
list-style-type: none;
color: #FFFFFF;
line-height: 30px;
}
#nav ul {
margin-left: 130px;
}
#main {
clear: left;
width: 488px;
float: left;
}
#right {
width: 184px;
float: right;
}


body {
font-family: Arial, Helvetica, sans-serif;
}
------------------------------

I appreciate any possible help.
Rayzur
23rd March 09, 04:38 PM
Hi,
The problem is the default margins and paddings that each browser applies to elements that have not been zeroed out. The #nav ul in particular.

You can use the universal reset at the very top of your stylesheet and it will remove the default margins and paddings from all elements like this -

* {margin:0; padding:0;}

Or you can remove them individually according to each element, add this new rule for your nav ul.

#nav {
height: 30px;
background-color: #1b1464;
width: 655px;
clear: both;
}
#nav ul {
margin:0;
padding:0;
list-style-type:none;
}
#nav li {
display: block;
height: 30px;
width: 60px;
text-align: center;
float: left;
font-size: x-small;
list-style-type: none;
color: #FFFFFF;
line-height: 30px;
}
chrishirst
23rd March 09, 04:48 PM
images can't be debugged. we need a URI.
spaniol
23rd March 09, 05:01 PM
An URI?? I dont follow...

But, hey! You know what? I've done it again from scratch and that issue happens when I put the menu list:
<ul>
<li>Inicio</li>
<li>Nosotros</li>
<li>Productos</li>
<li>Servicios</li>
<li>Noticias</li>
<li>Contacto</li>
</ul>

I put that and it generates this 'ghost' space...
spaniol
23rd March 09, 05:09 PM
Done it.

#nav with 0 pad and 0 margin... didnt work
#nav li with 0 pad and 0 margin... didnt work
#nav ul with 0 pad and 0 margin... finally worked!
chrishirst
23rd March 09, 06:58 PM
list are block elements with a implied line break above and below, plus default margins.

URI = Uniform Resource Identifier (http://en.wikipedia.org/wiki/Uniform_Resource_Identifier)