Padding difference between IE6 FF using lists

cyberseed · June 18th, 2007, 01:14 PM

Hi ya
I am having this small problem when I turn an unordered list into a horizontal navigation. When I add padding to the container the list sits in Firefox displays it with more padding than specified IE6 seems to be fine. It gives 10px padding whilst FF gives 30px. Any help yes please.

html:

Code:

<!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>horizontial list</title>
<link href="css/global02.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="topnav">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">item 2</a></li>
    <li><a href="#">item 3</a></li>
  </ul>
</div>
</body>
</html>

CSS

Code:

body {
 color: #000000;
 background-color: #FFFFFF;
 font-family: Verdana, Arial, Helvetica, sans-serif;
}
#topnav {
 background-color: #CCCCCC;
 height: 50px;
 width: 430px;
 padding: 10px;
}
#topnav li {
 list-style-type: none;
 padding-left: 30px;
 font-size: 12px;
 display: inline;
}
#topnav li a {
 color: #0099CC;
 font-weight: bold;
 text-decoration: none;
}
#topnav li a:hover {
 color: #0099CC;
 font-weight: bold;
 text-decoration: underline;
}

karinne · June 18th, 2007, 01:17 PM

~~So ... which one is right!?! The IE6 one or FF?~~

Nevermind ... I really do need to learn how to read the whole post

the <ul> element has margins and padding set by default, just like every other element

Code:

#topnav ul {
  list-style: none;
  margin: 0;
  padding: 0;
 }

cyberseed · June 18th, 2007, 02:19 PM

Thanks so much Karrinne. I had tried that approach on #topnav li and it did not work so i just got frustrated!

BGarner · June 18th, 2007, 03:08 PM

I always include this code in every CSS...

Code:

* {
margin: 0;
padding: 0;
}

That will get rid of all default padding and margins.

cyberseed · June 18th, 2007, 05:21 PM

Quote:

Originally Posted by BGarner

I always include this code in every CSS...

Code:

* {
margin: 0;
padding: 0;
}

That will get rid of all default padding and margins.

Ta - is that cross browser compatible? seems to work in IE6 and FF 1.5 how about IE7, Safari and earlier browsers etc..

karinne · June 19th, 2007, 08:34 AM

I starting to advise against the use of the universal selector:

No Margin For Error and scroll down 'til you get to Global White Space Reset

cyberseed · June 19th, 2007, 12:48 PM

Karinne what is Global White Space Reset. The link does not work. ta

karinne · June 19th, 2007, 12:59 PM

LMAO!!!! That's really sucks for the search-this.com peeps!

Anywho ... the Global White Space Reset is basically just the use of the universal identifier - * - in the CSS to apply certain properties to ALL elements.

So ... something like

Code:

* {
   margin: 0;
   padding: 0;
}

like BGarner showed you will remove all margins and padding from every element you use in your document. And then you can specifically put what you want.

The problem comes with the submit button of a form. You'll notice that every platform/OS/browser has there own default submit button style. Most have the really plain and ugly looking

ugly-button.jpg

well ... the code above will remove the shaded look of the button and there is absolutely no way to return to that for using CSS.

Hopefully the link will come back online soon 'cause my explanation just doesn't do it justice

but it's the jist of it.

cyberseed · June 19th, 2007, 01:35 PM

So if you are not using a form its ok to use it. Is there any other major downsides. For some reason I have not used * much in css (I can remember using it in dos) I shall try and find some tutorials on some useful variations. Followed you signature link last night and I thought some of the resources and tutorials were great. Cheers

karinne · June 19th, 2007, 01:41 PM

Ah ... the link works now ... there's a bit more to it than that so just go and read the article