Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Westi on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to fix browser differences? 1

Status
Not open for further replies.
fowlerlfc

fowlerlfc

MIS
Mar 20, 2002
136
US
i'm fairly new to css, and i've created a css formatted webpage. it is here:


it renders as intended in internet explorer, but looks crazy in firefox and mozilla. can someone give me some tips on how to fix/workaround these issues?

thanks in advance for your help.
 
Sort by date Sort by votes
1. Put the correct Doctype at the top of the document. Check valid doctypes here: (that will make your page look crazy in IE as well, but it will push it into the standards mode, which is going to make it easier for you with cross browser issues.

2. Mozilla has no titles above menu options because you are using span, which is an inline element and as such does not have width or height. Those properties are ignored. Use a block level element.

3. Understand the box model. The width of the box is width + padding + border. Same with height. IE without correct doctype treats width and height as fixed and subtracts padding and border from that value, while the correct way is to add it.
 
Upvote 0 Downvote
Vragabond,

Is the following doctype invalid?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

I fixed my menu titles. Thanks!

Any places to learn more about the box model?

Once again, thanks in advance for all of your help!
 
Upvote 0 Downvote
Is that doctype listed on the list? Since it is not, it is not valid, or better say it is incomplete. Incomplete (or invalid) doctype does not shift browser into 'standards' mode and therefore the browser is still using quirks mode to render the page. That results in different outlook.

For box model, tantek's page is a good beginning:

You can just try with 'box model' search in google. W3 describes it here:

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
763
bdwilcox
bdwilcox
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
1K
Mike Lewis
Mike Lewis
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
2K
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
816
pmonett
pmonett
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top