CSS: Mozilla Problem

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

CSS: Mozilla Problem

Post 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?
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post by McGruff »

User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

Alright, I check that out, thanks man.
User avatar
brewmiser
Forum Commoner
Posts: 74
Joined: Mon Aug 18, 2003 12:50 pm
Location: Dallas, TEXAS

Post 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. :(
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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.
m3rajk
DevNet Resident
Posts: 1191
Joined: Mon Jun 02, 2003 3:37 pm

Post 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.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

When I view the page in Mozilla the navigation div overlaps the logoAuthRow div.
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post 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.
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post 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?
McGruff
DevNet Master
Posts: 2893
Joined: Thu Jan 30, 2003 8:26 pm
Location: Glasgow, Scotland

Post 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:
User avatar
JAM
DevNet Resident
Posts: 2101
Joined: Fri Aug 08, 2003 6:53 pm
Location: Sweden
Contact:

Post 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).
User avatar
nigma
DevNet Resident
Posts: 1094
Joined: Sat Jan 25, 2003 1:49 am

Post by nigma »

How do developers that are supposed to design websites that are compatible with older browsers test their stuff?
User avatar
twigletmac
Her Royal Site Adminness
Posts: 5371
Joined: Tue Apr 23, 2002 2:21 am
Location: Essex, UK

Post 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
Post Reply