Page 1 of 1

CSS: Mozilla Problem

Posted: Sun Oct 12, 2003 7:32 pm
by nigma
I am having trouble getting the following CSS to display the same in both IE and Mozilla.

Try out the following in IE, then check it out in Mozilla and you will see what I mean.

CSS:

Code: Select all

body {
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}
#logoAuthRow {
	margin: 0;
	padding: 0;
	width: 100%;
	border-bottom: 2px groove #000;
}

#logoAuthRow #logo {
	float: left;
}

#logoAuthRow #logo h1 {
	margin: 10px 30px;
	vertical-align: middle;
}

#logoAuthRow #auth {
	margin: 20px 10px 0 0;
	float: right;
	vertical-align: middle;
}

#navigation {
	margin: 0;
	padding: 0;
	width: 100%;
	background: #B31212;
	word-spacing: 10px;
	border-bottom: 2px groove #000;

#navigation ol {
	margin: 2px 30px;
	padding: 0 5px;
	vertical-align: center;
	list-style-type: none;
}

#navigation ol li {
	display: inline;
}
The problem can be corrected if I specify a height for logoAuthRow, but I am hoping there is another way to nip this in the butt.

Anyone willing to tell me what I did wrong?

Posted: Sun Oct 12, 2003 7:45 pm
by McGruff

Posted: Sun Oct 12, 2003 7:57 pm
by nigma
Alright, I check that out, thanks man.

Posted: Sun Oct 12, 2003 9:47 pm
by brewmiser
The problem can be corrected if I specify a height for logoAuthRow, but I am hoping there is another way to nip this in the butt.
Out of curiosity, what is wrong with specifing the height in the CSS? I have just finished my first CSS and was just wondering if there is something that I might need to know.

The current project that I am working on has to view properly in IE6, Mozilla, and Opera. It seems that each one has some things that view a little differently no matter what I do to the CSS. :(

Posted: Sun Oct 12, 2003 10:46 pm
by nigma
I ask because I am also still learning CSS and have used height in the past, but if there was another way to do things I wanted to know how.

Posted: Mon Oct 13, 2003 9:13 am
by m3rajk
what exactly is the problem (i have no example to go look at)?

i ask because ie is broken. text-align works on tables and some others that it shouldn't.

Posted: Mon Oct 13, 2003 10:41 am
by nigma
When I view the page in Mozilla the navigation div overlaps the logoAuthRow div.

Posted: Mon Oct 13, 2003 5:05 pm
by McGruff
Did the box model hack help? If you turn off all margins, borders and padding, and the page renders the same, it's likely that this is the cause.

Posted: Mon Oct 13, 2003 6:34 pm
by nigma
I was hoping you could give me a link to a site where I could dload older versions of IE so that I could test it out ?

I got it to work in Mozilla + IE 6 by just specifying a height of 50px, but according to Tantek the misinterperotation of the box model happens in an older version of IE, not 6?

Posted: Mon Oct 13, 2003 9:13 pm
by McGruff
You often do need the voice-family and html>body hacks for IE6. I would write some more but I'd need to do some extensive testing to get all the details right.

In practice, you can just set it up and fiddle until everything's rendered the same.

Not sure where you could get IE5. Never throw out your old magazine CDs or old installer discs :wink:

Posted: Mon Oct 13, 2003 9:21 pm
by JAM
Don't think you can install it if you get a hold of it. Windows (either installer or os) will likely complain. Perhaps if you have some old junk lying around that you can install win95 on?

If you are dualbooting Linux, you could use Wine or some other win32 compability layer and go from there...

I'm also searching for something like this, preferably a software that just validates code (like W3C's CSS/XHTML validators, in binary, and not Dreamweaver).

Posted: Mon Oct 13, 2003 10:26 pm
by nigma
How do developers that are supposed to design websites that are compatible with older browsers test their stuff?

Posted: Tue Oct 14, 2003 4:24 am
by twigletmac
When it comes to IE, you have to dual boot, have a separate machine with an older version or run an emulator. MS do not make it easy to have more than one version of IE on a computer. However, Netscape, Opera, Mozilla do allow you to run a bunch of different versions on the same computer.

Mac