ugggh... Mozilla ruins my layout

[nichalp]

I have made this site: http://cricketinf.hollosite.com/eng/basics1.html . However Mozilla 1.6 has completely ruined my layout which is prefectly fine in IE6 and Opera 7.54. Please suggest some remedies. Mozilla does not like the DOCTYPE line, I don't know why, although my site is perfect XHTML 1.1.

The header H1 and the navigation menu is spoilt, the rest is perfect.

[Jona]

This is more of a CSS question, don't you think? Anyway, I would go with XHTML 1.0 until IE supports XHTML as an application of XML like Mozilla. There are no advantages of XHTML over HTML, so really I don't see why you shouldn't use HTML 4.01. However, that's just my opinion. The page you linked to does not have any style information whatsoever, but the main index, located at <http://cricketinf.hollosite.com/>, does, and that is where I have seen your problem. It appears to have to do with the box model. By that I mean a combination of possible problems concerning the borders, padding, margins, widths and heights (where they are present).

[Jona]

Your problem with the H1 is that you have the following code:


margin: 0px none


It should be:


margin: 0;


The "px" isn't necessary, since zero is nothing, no matter what unit you are measuring in.

One other thing: avoid using "width" and "height" wherever possible. Setting 100% height results in the height of a top-level element never being able to expand past the height of the browser window, and widths cause text to flow outside of their containers.

[nichalp]

I'm sorry about the bad link I gave you'll, I added the link in haste, its now corrected. The problem is with Mozilla and not Internet Explorer. I made the 'px' correction to the CSS, but Mozilla 1.6 output still hasn't changed by showing the top margin. If I remove the DOCTYPE tag, the margin on top dissapears.

I didn't get what you mean by not using width and height. What do I use instead?

[Jona]

Originally posted by nichalp
I'm sorry about the bad link I gave you'll, I added the link in haste, its now corrected. The problem is with Mozilla and not Internet Explorer. I made the 'px' correction to the CSS, but Mozilla 1.6 output still hasn't changed by showing the top margin. If I remove the DOCTYPE tag, the margin on top dissapears.

You still haven't changed the code. The doctype is not the problem. The problem is your CSS. You have...



h1{border-bottom: .09em double black;background:#ebeddf url('../images/bk1.png') top left;
font-family: "Poor Richard","courier new",Georgia,"MS Trebuchet",serif; letter-spacing:0.1em;
font-style:italic;font-size:4.5em;border-top:0px none;border-left:0px none;border-right:0px none;color:#603;
padding-left:.3em;margin:0px none}


First, you should make your code easier to read. If you'll notice at the end, you have the following:


margin:0px none


What is the "none" for? :confused: Take it out, it's causing problems. Internet Explorer is turning bad code into good work, Mozilla doesn't ignore such obvious errors, because it shouldn't. Use the following in the place of your previous code:


margin: 0px


Originally posted by nichalp
I didn't get what you mean by not using width and height. What do I use instead?

Nothing at all. It defines its own dimensions as the content therein implies.

[nichalp]

Thanks Jona, the H1 problem is solved. I've also removed the height values. However, the navigation layout is still in a mess. Any solutions?

[Jona]

#nav ul{
list-style-type:none;
margin:0;
padding:0px 0px 0px 1em;
}

[nichalp]

Thanks Jona that was *GREAT*. Wonderful!! However all four padding values should be set to zero to attain compatability.

[Jona]

In that case, you only need one.


padding: 0;


The above is short-hand for the four zero values.

[nichalp]

Yeah, I know that. Thanks.
PS. The link to your blog on your www site is dead.

[Jona]

Originally posted by nichalp
PS. The link to your blog on your www site is dead.

I am, and have been, working on my blog for quite some time off and on. I apologize for that. The title, if you ever read them ;), says it is "coming soon." That may or may not be accurate, depending on how much free time I can accumulate over this weekend. I am working on the sixth redesign test -- I have created a bunch of different layouts for it, but none of them worked how I wanted. I think I've finally found what I want.

[dera]

i can hardly read the txt in ur images

[Jona]

Originally posted by dera
i can hardly read the txt in ur images

If you're talking about the diagrams, you can click them to view an enlarged version. ;)

[e-velocity]

can i add that when you set the browser to 800x600 the nav overlaps the banner, try setting top: 130px or something and not from the bottom. i had a problem smiliar

[dera]

Originally posted by Jona
If you're talking about the diagrams, you can click them to view an enlarged version. ;)
didnt relize that