H1 rendering b/t MSIE and Firefox

[lplatz]

I have noticed that each time I define and utilize <Hn> tags, that Firefox places padding across the top of the line of copy enclosed in the <Hn> tag. MSIE renders the tag w/out issue. The following is the <div> created for this section of copy on my page:

#pageTitle {
position: absolute;
visibility: visible;
z-index: auto;
width: 100%;
top: 10px;
text-align: center;
left: 0px;
}
#pageTitle h1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.6em;
color: #FFFFFF;
}

Any ideas on what can correct this rendering difference with Firefox?

Thanks in advance for all help provided.

[Kravvitz]

h1 {
  padding: 0;
  margin-top: 0;
}

[lplatz]

Just what the Dr. ordered - thank you!!

[drhowarddrfine]

Huh?

[Kravvitz]

lplatz, you're welcome

drhowarddrfine, you've never heard that saying before?

[Egor]

It's not an issue. If you're going to rely on browser-default styling, expect differences like this to pop up.

I recommend setting the margin/padding to 0 for all elements at the top of your style-sheet:

* {
  margin: 0;
  padding: 0;
}

I usually throw list-style: none; in as well.

[lplatz]

Speaking of lists - the outcome of adding
* {
margin: 0;
padding: 0;
}
to my css, is that my indent for <ul> items has adjusted left.

I attempted to counter and adjust the <ul> by adding
ul {
padding: 10;
margin-left: 0:
}

No luck - Firefox and MSIE continue to render the list differently.

Thanks in advance. Les

[CompressedAir]

Perhaps you should be controlling the <li> element instead with your CSS?
Just a thought.

[lostseed]

Speaking of lists - the outcome of adding
* {
margin: 0;
padding: 0;
}
to my css, is that my indent for <ul> items has adjusted left.

I attempted to counter and adjust the <ul> by adding
ul {
padding: 10;
margin-left: 0:
}

No luck - Firefox and MSIE continue to render the list differently.

Thanks in advance. Les

Like the other guy said try:

ul li {
padding: 10;
}

Padding: 10; will make a 10px box around every li element, you can define it specifically by doing:

padding: 5px 0px 5px 10px; 
/* In English (Clockwise)- Padding: Top Right Bottom Left */

Also you dont need margin-left if you have it at 0 since * {margin: 0; padding: 0} is in your main CSS file, its automatically set to every element unless defined.

[lplatz]

incorporating everyones input led me to discover that using the universal
* {
padding: 0px;
margin: 0px;
}
somehow had an uncorrectable impact on list items (<ul><li>). The margin for list items in MSIE and Firefox were not even close.

I commented out the universal css, and added
ul li {
margin-left: 0px;
}
This provided the cross-browser consistency I was aiming for.

Thanks for all your input, it definately shortened my research time on this cross-browser inconsistency - - Les