Firefox screws up webpage

Could just view source code, but I will put it here for convenience :)

HTML:
Code: 
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>
<div id="banner">
<img src="bannertest.gif"> 
</div>	
<div id="content">
<div id="nav">
<strong>Navigation</strong><br />
<br />
Menu Item 1<br />

Menu Item 2<br />
Menu Item 1<br />
Menu Item 2<br />
Menu Item 1<br />
Menu Item 2<br />
Menu Item 1<br />
</div>
<div id="main">
<span class="blue">HOME</span>
<p>Main Content here.

</p>
</div>
<div id="bottomnav"></div>
</div>
</div>
<div id="footer">
<div id="footnav"></div>
<div id="copyright">&copy;</div>
</div>
</body>
</html>

CSS:
Code: 
body {
margin: 0;
padding: 0;
text-align:center;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}

.blue {
color:#000099;
font-weight:bolder;
font-size:18px;
}

#banner {
height:130px;
background-image:url('banner.gif');
background-repeat:repeat-x;
background-color: #666;
color:#FFFFFF;
}

#content {
width:760px;
margin-top:10px;
text-align:left;
}

#nav {
float:right;
width:200px;
height:100px;
background-color:#000099;
background-image:url('roundnav.gif');
background-repeat:no-repeat;
color:#FFFFFF;
text-align:left;
padding:9px;
}

#bottomnav {
background-image:url('roundnavbot.gif');
background-repeat:no-repeat;
float:right;
width:200px;
height:7px;
}

#main {
float:left;
width:550px;
height:100px;
margin-right:10px;
padding: 9px 0px 5px 5px;
}

#footer {
width:760px;
height:24px;
color:#FFFFFF;
background-color:#000099;
text-align:right;
padding:5px 5px 5px 5px;
font-size:10px;
font-weight:bold;
}

#footnav {
width:550px;
float:left;
text-align:left;
}

#copyright {
float:right;
width:200px;
text-align:right;
}
 
stopsign104 said:
Ok not sure what I have done wrong or need to do here but try opening this page in IE7 and you will see its fine then try in firefox and the layout dissapears, everything is displaced.

http://www.toxicpc.co.uk/olddes/bh.html

How can I sort this?
Click to expand...

Develop in FireFox, an arguably more standards compliant browser and fix from there to fit IE. Although, i thought IE7 was ok, everything ive developed in FF has been fine in IE7, then i have to tweak it for IE6.
 
gord said:
Develop in FireFox, an arguably more standards compliant browser and fix from there to fit IE. Although, i thought IE7 was ok, everything ive developed in FF has been fine in IE7, then i have to tweak it for IE6.
Click to expand...

nope, IE7 is totally awful as well. Not quite as bad as IE6, but still considerably far behind firefox, opera and safari. I'm really hoping that IE8 brings IE up to date, I haven't had chance to try the beta but a reputable early test isn't too impressed
 
Try the following:

HTML:
Code: 
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style2.css" />
</head>
<body>

<div id="wrap1">
    <div id="banner"><img src="bannertest.gif"></div>
    <div id="wrap2">
    <div id="main">
		<span class="blue">HOME</span>
		<p>Main Content here.</p>
    </div>
    <div id="navbar">
    	<div id="navbarmenu">
		<strong>Navigation</strong><br />
		<br />
		Menu Item 1<br />
		Menu Item 2<br />
		Menu Item 1<br />
		Menu Item 2<br />
		Menu Item 1<br />
		Menu Item 2<br />
		Menu Item 1<br />
        </div>
    </div>
    <div id="lowernavbar">
    </div>
    <div id="footer">
    		&copy;
    </div>
	</div>
</div>

CSS:
Code: 
body,
html {
    margin:0;
    padding:0;
    }
body {
    min-width:750px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
    }
	
#wrap1 {
    margin:0 auto;
    width:100%;
    }
	
#wrap2 {
    margin:0 auto;
    width:750px;
	margin-top: 10px;
    }

#banner {
	text-align:center;
	height:130px;
	background-image:url('banner.gif');
	background-repeat:repeat-x;
	background-color: #666;
	padding: 9px 0px 5px 5px;
}

#main {
    float:left;
    width:550px;
	text-align: left;
    }
#navbar {
    float:right;
    width:200px;
	background-color:#000099;
	background-image:url('roundnav.gif');
	background-repeat:no-repeat;
    }
#navbarmenu {
	padding: 10px;
	color:#FFFFFF;
	}
#lowernavbar {
    float:right;
    width:200px;
	background-image:url('roundnavbot.gif');
	height: 7px;
	margin-left: 550px;
    }

#footer {
    clear:both;
	color:#FFFFFF;
	background-color:#000099;
	text-align:right;
	padding:5px 5px 5px 5px;
	font-size:10px;
	font-weight:bold;
    }

#copyright {
	float:right;
	width:200px;

}

.blue {
	color:#000099;
	font-weight:bolder;
	font-size:18px;
}
 
Could try setting some divs and spans to display: block; or display: inline; in your css. Ive found a couple of times spans get really messy if i dont use disply block.

Dont know if it will fix it but you could change the menu items to <ul> and a list-style-type: none; and take out the <br />s will look exactly the same but you will have more control over them across all browsers.
 
zinc said:
Ive found a couple of times spans get really messy if i dont use disply block.
Click to expand...

what are you trying to do with them? they're inline elements; I have always been under the impression that they should be treated as such - ie. used to style parts of text in a div, rather than being used as containers for text.
 
You must log in or register to reply here.
Back
Top Bottom