Padding difference between IE6 FF using lists

cyberseed · #1 (**permalink**) Jun 18th, 2007, 17:14

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: Select all

<!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: Select all

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 · #2 (**permalink**) Jun 18th, 2007, 17:17

~~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: Select all

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

cyberseed · #3 (**permalink**) Jun 18th, 2007, 18:19

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

BGarner · #4 (**permalink**) Jun 18th, 2007, 19:08

I always include this code in every CSS...

Code: Select all

* {
margin: 0;
padding: 0;
}

That will get rid of all default padding and margins.

cyberseed · #5 (**permalink**) Jun 18th, 2007, 21:21

Quote:

Originally Posted by BGarner

I always include this code in every CSS...

Code: Select all

* {
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 · #6 (**permalink**) Jun 19th, 2007, 12:34

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 · #7 (**permalink**) Jun 19th, 2007, 16:48

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

karinne · #8 (**permalink**) Jun 19th, 2007, 16:59

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: Select all

* {
   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 · #9 (**permalink**) Jun 19th, 2007, 17:35

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 · #10 (**permalink**) Jun 19th, 2007, 17:41

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
font difference IE7 and the others	stupid dog	Web Page Design	1	Aug 24th, 2007 20:53
whats the difference	acrikey	Other Programming Languages	1	Apr 5th, 2007 10:37
The difference	moshe	Webforumz Cafe	4	Jan 28th, 2007 19:52
Php . asp, asp net difference	maksinx	PHP Forum	3	Aug 15th, 2006 10:39
Date Difference	ekendricks	Classic ASP	4	Aug 22nd, 2003 10:19

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Padding difference between IE6 FF using lists