homepage Welcome to WebmasterWorld Guest from 54.161.155.142
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
Firefox vs IE issue . any ideas?!?
HTML is formatting differently
daveichler




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

Hi,

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!

 

phranque




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

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.

alt131




msg:3815285
 12:48 am on Dec 29, 2008 (gmt 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 {
margin:0;
padding:0;
border:0;
font-size:10px; /*just for testing - otherwise avoid using px */
line-height:10px;
}
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".

VirginTech




msg:3817985
 6:42 pm on Jan 2, 2009 (gmt 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!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved