Hello. I know this is a classic problem of Firefox VS IE, but I've been trying to fix this for days now and I need help. In IE7, everthing is in line and all the right size, while in Firefox, it looks awfull. Please help. This is a part of my .Net application. I took out everything that was not relevant to the problem at hand. Here is the CSS: BODY { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; FONT-FAMILY: Verdana; } #globalnav { -moz-box-sizing:border-box;box-sizing:border-box;PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: x-small; PADDING-BOTTOM: 1.75em; MARGIN: 0px; WIDTH: 99%; LINE-HEIGHT: 1em; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; POSITION: relative} #globalnav LI { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px} #globalnav A { BACKGROUND: #72634d; PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BORDER-TOP: #fff 1px solid; DISPLAY: block; FONT-WEIGHT: bold; PADDING-BOTTOM: 0.25em; MARGIN: 0px; BORDER-LEFT: #fff 1px solid; COLOR: white; PADDING-TOP: 0.25em; TEXT-DECORATION: none} #globalnav A:hover { BACKGROUND: #8f001a; COLOR: white} #globalnav A:active { BACKGROUND: #8f001a; COLOR: white} #globalnav A.here:link { BACKGROUND: #8f001a; COLOR: white} #globalnav A.here:visited { BACKGROUND: #8f001a; COLOR: white} #globalnav A.here:link { Z-INDEX: 1; COLOR: white; POSITION: relative} #globalnav A.here:visited { Z-INDEX: 1; COLOR: white; POSITION: relative} #globalnav UL { PADDING-RIGHT: 0.25em; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 1em; BACKGROUND: #8f001a; LEFT: 0px; FLOAT: left; PADDING-BOTTOM: 0.25em; MARGIN: 0px; WIDTH: 100%; PADDING-TOP: 0.25em; LIST-STYLE-TYPE: none; POSITION: absolute; TOP: 1.5em; HEIGHT: 1px} #globalnav UL LI { MARGIN-TOP: 1px; DISPLAY: block; FLOAT: left} #globalnav UL A { BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 1em; PADDING-LEFT: 1em; BORDER-LEFT-WIDTH: 0px; BACKGROUND: #8f001a; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; COLOR: #fff; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px} #globalnav UL A:hover { COLOR: #444} #globalnav UL A:active { COLOR: #444} #globalnav UL A.here:link { COLOR: #444} #globalnav UL A.here:visited { COLOR: #444} .globalnavCell { MAX-WIDTH: 120px; TEXT-ALIGN: center; } Here is the html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Offer of Admission</TITLE> <META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK href="Copy%20of%20Offer%20of%20Admission_files/AdmissionStyle.css" type=text/css rel=stylesheet> <META content="MSHTML 6.00.6000.16762" name=GENERATOR></HEAD> <BODY> <FORM><br/> <FIELDSET class=fieldset id=ctl00_uxGlobalnavBar style="MIN-WIDTH: 500px"><LEGEND> <UL id=globalnav> <LI> <DIV class=globalnavCell><A class=here id=ctl00_uxTabImportantInformation href=""><SPAN id=ctl00_uxTabImportantInformationLabel style="DISPLAY: inline-block; HEIGHT: 30px">Important Information</SPAN></A></DIV></LI> <LI> <DIV class=globalnavCell><A id=ctl00_uxTabHousing href=""><SPAN id=ctl00_uxTabHousingLabel style="DISPLAY: inline-block; HEIGHT: 30px">Housing</SPAN></A></DIV></LI> <LI> <DIV class=globalnavCell><A id=ctl00_uxTabInternationalStudents href=""><SPAN id=ctl00_uxTabInternationalStudentsLabel style="DISPLAY: inline-block; HEIGHT: 30px">International Students</SPAN></A></DIV></LI> <LI> <DIV class=globalnavCell><A id=ctl00_uxTabRegistrationInformation href=""><SPAN id=ctl00_uxTabRegistrationInformationLabel style="DISPLAY: inline-block; HEIGHT: 30px">Registration Information</SPAN></A></DIV></LI> <LI> <DIV class=globalnavCell><A id=ctl00_uxTabScholarship href=""><SPAN id=ctl00_uxTabScholarshipLabel style="DISPLAY: inline-block; HEIGHT: 30px">Scholarship Conditions</SPAN></A></DIV></LI> </UL></LEGEND> </FIELDSET> </FORM></BODY></HTML>
You are using Microsoft Word, maybe, to create this? It's a mess but maybe fixable. Always remember that saying something works in IE but not FF is telling us the markup is wrong. Never, ever look to IE for how things should work. Your doctype is incorrect and throws IE into quirks mode. It may be showing what you want but Firefox is showing what you wrote. In addition, you are trying to declare HTML but are also trying to use XHTML and that's not going to work. So, first things first, change your doctype to this: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and change this:<HTML xmlns="http://www.w3.org/1999/xhtml"> to just <html> while I go through the rest of this. Also, <br /> is a XHTML tag. Remove the slash for <br>
Thanks for the help, I will try this when I get back to work on tuesday. No, I am not using word. Is this a comment about the html or the css? I know there is a lot of lines, but it didn't seem so complicated. I admit this is a design a ripped from another of our applications and I tried to make it work in mine. The 2 problems I have with FF (I know the real culprit is IE, but it just annoys me that IE is giving me what I want and not FF) is that the tabs and not displayed in the legend, they are inside the content of the Fieldset and that the tabs are all of different heigths, while I need them to be all equal. Can you give me more info about doctypes? I never had to play with that. I always used whatever Visual studio put in that line. Still so much to learn, so little time left to finish that project.
It's not the number of lines but the meta tag with the "generator" and the machine generated id names make it look like some Microsoft code generator, and if you are using Visual Studio then that explains that. Lesson learned. Never use IE as a test bed. Only look at it to find out if/when it screws things up. Doctype stands for "Document Type Definition". Essentially, the rules describing what each tag on your page means and does and how the browser handles it. The only doctype any new page ever needs to use is the one I show above for HTML. It's the first thing to go on any page and you never change it for any reason.
I changed the doctype and the html tags, like you proposed, but I still get the same result. IE and FF ar not displaying the same thing. Here is what I need: I want a row of "tabs" that are displayed in a single line in the legend of a fieldset. The tabs have a max width and if the text inside is too long, it must display on multiple lines. All the tabs must have the same height (the largest one). What I get in FF is that the tabs are not in the Legend and the tabs are not all the same height. Anyone has an idea on how to mke this happen?
It sounds like you are still looking at FF and saying it doesn't look like IE. Never, ever do that. You should be looking at IE and ask why it doesn't look like FF. IE is a bug. Don't refer to it. Need to see what you have, preferably a link.