Page displays fine in IE but not FF 3

JuggaloBrotha

VB.NET Forum Moderator
Staff member
Joined
Jun 3, 2004
Messages
4,530
Location
Lansing, MI; USA
Programming Experience
10+
I have some pages that someone else initially made and I've fixed some things up but there's two pages that display fine when viewed in IE (and IETab in FF) but when viewed in FF things aren't aligned correctly. I don't know much about CSS but it appears the div's simply aren't displayed in the correct order. Would anyone mind taking a look?

The two pages are index.html and contactme.html (games.html and programs.html display fine in both browsers as far as I know)

These pages were initially created in DreamWeaver but I'll be turning them into aspx pages once they're working correctly.

Can also be viewed here:
Welcome to JuggaloBrotha.com
 
out of curiosity why are you using so many nested tags?

HTML:
					<div class="box">
						<div class="t">
							<div class="br">
								<div class="bl">
									<div class="tr">
										<div class="tl">

with out going through it all that would be the first thing I would look at, personally I would nest the tables instead of nesting div tags like that. It makes for easier

My suggestion decide to go tableless or not and try not to mix the two it can have unfortunate results.

After looking through more of you code you css looks good, but its not compliant (which could be causing your issues with FF) check it here.

jigsaw by w3

There were a few parse errors

example:
.css file

Line: 100 #row1 Value Error : bottom Parse Error left repeat-x

left repeat-x is not proper values for bottom

the usage in the HTML is probably not what you wanted (and tbh from looking at it I'm not sure either)

the html (I only checked index.html) generated a few errors too

Validator by W3

There are a few areas where you have close tags without anything having opened them.

this too could also be messing with FF, (IE is way more lenient on this) it could be that they're just in the wrong place.

Most of the error that popped up were from the links to the MS site, but if you ignore them (which you can unless you want to be anal about it), its just the mis-matched tagging

the below code will probably work in IE but not FF
HTML:
<div class="something"><center>blah</div></center>

the proper
HTML:
<div class="something"><center>blah</center></div>

as for the mismatched tagging, if you couple the first code with deeply nested items like tables or what ever its easy for a more compliant browser to get things messed up.

(I use the term 'more compliant' because the standard changes so often, but FF seems to do a good job at keeping up... for the most part)

Just some other questions before I start hammering into this (just to understand the methodology behind the code)...
Did you crank out the html/css yourself or did you allow DW to do it for you?

when it comes to being compliant a general rule of thumb is that FF will be more correct than IE.

why am i a stickler for compliancy? well thats because compliant code is easy to work with and if it doesnt display correctly in all browsers its very easy to track down the offending bit of code and modify and mend.

I've attached a quick and dirty thing I did to demo tableless design for someone in the office... but if you look at my css (its in the index.html) note what i did so that it would be centered in both IE and FF (in this case the FF engine needed an extra tag) this is probably what you need to do in your case too, but the hard part (which I'm working on between fits of vb.net) is figuring which tag to add it to.

Note: in the attached example I coded it for IE specifically, so I needed add the work around for FF, in most other cases it would be the other way around.
 

Attachments

  • tableless.test.zip
    392.9 KB · Views: 36
Back
Top