Padding in firefox

Discussion in 'CSS' started by fouadz, Oct 31, 2007.

0
  1. #1
    Hi,


    I have an issue with the padding in firefox.
    The webpage show up fine in IE but in firefox there is a blank space between the top header and the menu..

    http://tinyurl.com/2oh9nu

    Anyone can help on this one.

    Thank you
     
    fouadz, Oct 31, 2007 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, let's see - from the top down...

    Invalid charset... type iso-8859-1 or UTF-8

    multiple H1's - H1 should only be used ONCE on a page... usually as your HEADER... in the body that should be a H2.

    WAY too many wrapping DIV's for your own good...

    You should probably try using a more 'meaningful' name for your stylesheet - and add on media types.

    Hmm, you aren't resetting the padding or margins so you have to set each one manually - again universal selector good as always.

    Heh, on my machine in IE the top half of your title gets cut off, your menu has the classic 'stagger' error of trying to float li's - you say it works right in IE? What version? Doesn't work in 6 or 7 here.

    Here it is:
    top: 60px;

    that should only be used if you change the value of 'position' to either relative or absolute, and that's probably what's adding that space in standards compliant browsers.

    You seem to be declaring top on everything - which is most likely what's breaking everything... you also seem to be declaring 100% width on elements that do that as their default behavior.

    Try this:
    * {
	margin:0;
	padding:0;
}

body {
	font:normal 100%/140% arial,helvetica,sans-serif;
}

h1 {
	height:100px;
	padding-left:0.5em;
	color:#FFF;
	background:#000;
	font:normal 32px/100px arial,helvetica,sans-serif;
	/* 
		px height container means px sized fonts 
		unless you WANT the layout to break at
		default zoom on large font machines
	*/
}

#mainMenu {
	width:100%;
	float:left; /* width + float = contain floats */
	list-style:none;
	color:#6C3;
	background:#393;
}

#mainMenu li {
	display:inline; /* make IE not screw up the floats */
}

#mainMenu a {
	float:left;
	padding:4px 1em;
	text-decoration:none;
	color:#6C3;
	border-right:1px solid #6C3;
}

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
	color:#000;
	background:#6C3;
}

#content {
	clear:both;
	padding:0.5em;
}
    Code (markup):
    and the HTML:

    <!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"><head>

<title>Quebectrial.com</title>

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

<link type="text/css" rel="stylesheet" href="screen.css" media="screen, projection"/>

</head><body>

<h1>Québectrial.com</h1>
	
<ul id="mainMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">News</a></li>
	<li><a href="#">apropos</a></li>
	<li><a href="#">Gallerie</a></li>
	<li><a href="#">Liens</a></li>
	<li><a href="#">forum</a></li>
	<li><a href="#">Contactez-nous</a></li>
</ul>

<div id="content">
	<h2>site en construction</h2>
</div>

</body></html>
    Code (markup):
    That's what you are trying to do, right? Works in IE 5.x, 6 & 7, FF, Opera and Safari.
     
    deathshadow, Oct 31, 2007 IP