PDA

View Full Version : CSS appearance in Firefox vs Microsoft Internet Explorer


josh1000
01-22-2006, 08:04 PM
Hi all,

Help -- I have drafted a simple website using CSS and a template.dwt. I get very different results displaying this page in different browsers (it's not yet published so I can't show you on the web). Internet Explorer includes more space vertically from the top as Firefox (i.e. it starts the page further down) so depending on which browser you use, the page looks all messed up as the menu is no longer vertically correctly alligned. (in Firefox it is too high up and/or in IE5 it is too low down)

What can I do to force the template to start at some fixed location (say 10 px) down and that is displayed in the same format in IE5 and Firefox?

What is the reason for this floating start? Where did I go wrong?

I don't know if it helps, but just in case it does here is the concept:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Template</title>
<link href="../styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript">
<!--
function mmLoadMenus() { LOTS OF DATA ON MENUS DELETED TO KEEP SHORT

//-->
</script>
<script language="JavaScript1.2" src="../mm_menu.js"></script>
<style type="text/css">
<!--
.Stil1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
margin-left: 13px;
}
-->
</style>

<script language="JavaScript1.2" src="mm_menu.js"></script>
</head>

<body onload=MENU LOAD DATA DELETED TO KEEP SHORT

[b]

</p>


</p>
<p id="banner" name="banner"></p>
<p id="headertext"></p>


<script language="JavaScript1.2" type="text/javascript">mmLoadMenus();</script></p>[/b]

This last part makes the banner and the menu sit on top of eachother in Firefox...

Thanks a lot in advance, maybe you can help me get back some sleep at night...

Thanks, Josh.

Creative Insanity
01-22-2006, 08:15 PM
In your css file body tag add this:


margin-left: 0;
margin-top: 10;


I see you have a style in your code.. good move would be to LINK to a css file.

josh1000
01-22-2006, 09:52 PM
thanks for the quick answer -- you are right, I didn't have the margins, but even if I include them, that fixes the problem only partially as I cannot go and attach every style to a vertical absolute position (and even this seems somehow messy comparing the results of the two browsers).

I tried your comment with the margin-top and many different alternative solutions, but this (see below) is the best I could do and it doesn't quite do the trick...

#banner {
left: 2px;
height: 77px;
padding-top: 0px;
position: relative;
top: 0px;
vertical-align: top;
}
#headertext {
height: 56px;
position: relative;
left: 22px;
top: -90px;
width: 204px;

The above gets the banner + the text inside the banner properly aligned. I previously had this with absolute references, there's no difference.

Then, this

.navmenu {
top: -80px;
position: relative;
}

would get the menu properly aligned but it doesn't feel right, specifically now all I achieve is that I have the same problem with the next item (which is the index-picture).

BTW, .body is

.body {
font-family: Arial, Helvetica, sans-serif;
padding-left: 16px;
vertical-align: top;
}
using this together with the above I get the same result whether or not I include margin-top: 10px; or not...

Thanks, Josh

P.S. I thought this was sufficient to link the stylesheet:
<link href="../styles.css" rel="stylesheet" type="text/css" />

Creative Insanity
01-22-2006, 11:19 PM
Well create a class with that margin settiing and only apply it where you want it.