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 -

Code:

* {margin:0; padding:0;}

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

Code:

#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

23rd March 09, 04:38 PM	#2
Rayzur WLC Lover Join Date: Feb 2008 Location: Texas Posts: 1,331	Re: Ghost Space on FireFox 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 - Code: * {margin:0; padding:0;} Or you can remove them individually according to each element, add this new rule for your nav ul. Code: #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; } __________________ Ray H. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts. To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.

23rd March 09, 04:48 PM	#3
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Ghost Space on FireFox images can't be debugged. we need a URI.

23rd March 09, 05:01 PM	#4
spaniol WLC Member Join Date: Jan 2009 Posts: 12	Re: Ghost Space on FireFox 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...

23rd March 09, 05:09 PM	#5
spaniol WLC Member Join Date: Jan 2009 Posts: 12	Re: Ghost Space on FireFox 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!

23rd March 09, 06:58 PM	#6
chrishirst Banned Join Date: Jun 2006 Location: Blackp ool U.K. Posts: 3,197	Re: Ghost Space on FireFox list are block elements with a implied line break above and below, plus default margins. URI = Uniform Resource Identifier

23rd March 09, 02:09 PM	#1
spaniol WLC Member Join Date: Jan 2009 Posts: 12	Ghost Space on FireFox 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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode