Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Firefox vs IE issue . any ideas?!?

HTML is formatting differently

3:28 am on Dec 28, 2008 (gmt 0)

New User

5+ Year Member

joined:Dec 28, 2008
posts: 2
votes: 0


I'm currently working on a site that is utilizing some HTML/CSS.

I am incorporating a contracting/expanding menu. When it is opened in Internet Explorer it works perfectly. However, when I open it in Firefox, it drops down a little bit farther on the page then it should (roughly 1 cm).

I've been messing with the code, and the issue occurs when I define the top line as a header <h1>.

Is there a reason that the h1 tag would drop the text down a line?

Is there another tag that can be used?

I know this is probably a basic question, but I'm a bit lost.

Thanks for help!

10:56 am on Dec 28, 2008 (gmt 0)


WebmasterWorld Administrator phranque is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Aug 10, 2004
votes: 8

welcome to WebmasterWorld [webmasterworld.com], daveichler!

if it is the primary header content on the page you should indeed use the h1 tag for semantic reasons and fix the style problem.
i would try setting specific values for some of the border and margin properties [w3schools.com] of the h1 tag or adjacent tags.

12:48 am on Dec 29, 2008 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 0

Is there a reason that the h1 tag would drop the text down a line?

Hi daveichler,
No troubles with being lost, but perhaps time to think about the role and default settings for h1. As phranque says, h1 is appropriate for the primary heading for the content of the page - but I wonder if that will be the case for the first/top line of a menu.

It is common to use a list of links to create a menu and use css to get the desired look. So if using the header to create big, bold text rather than as a heading introducing the page content, it would be more correct (and avoid some of the troubles) to style a link to look as you want.

If the h1 is appropriate, then the "drop" you are seeing could be caused by a number of factors. One is that headings will occupy a "new line", unless styled not to do so. Second, defaults for margin/padding/line-height and font-size differ between browsers. Plus the h1 could be inheriting some measurements as well.

I would suggest installing the "firebug" (Firefox) and/or ie webdeveloper extensions and inspect the element to see what styles are being applied. (The extensions are helpful for other things, so the time to download them will be amply repaid.)

Another quick check is to "reset" the defaults to zero:

h1 {
font-size:10px; /*just for testing - otherwise avoid using px */
The menu will look odd, but you should be able to identify if the trouble is the h1 (and differeing interpretations of the implicit default settings), an inherited value, or even some other element forcing the h1 to "drop".
6:42 pm on Jan 2, 2009 (gmt 0)

New User

5+ Year Member

joined:Jan 2, 2009
votes: 0

It may be due to your theme too!
Some themes are fixed width theme and some are not, and those which do not have fixed width might look different in IE & Firefox!

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members