[solved] Still don't get it!!!!! IE & FF Layout issues
Posted: Mon Aug 04, 2008 4:17 pm
This keeps bugging me every time i do a website for someone.
I design it get it looking fine and then try it in FireFox and nothing works!!!!!! Well it works just doesn't look right.
dev.neil-harding.co.uk is the CMSMS site and you can see it works fine in IE but in FF the filler background doesn't show all the way down.
I always have this problem and in the passed have gone back to table layouts, but this time now i'm using CMSMS i'm going to get this dam CSS working.
Anyway here is the template:-
and now the CSS
I design it get it looking fine and then try it in FireFox and nothing works!!!!!! Well it works just doesn't look right.
dev.neil-harding.co.uk is the CMSMS site and you can see it works fine in IE but in FF the filler background doesn't show all the way down.
I always have this problem and in the passed have gone back to table layouts, but this time now i'm using CMSMS i'm going to get this dam CSS working.
Anyway here is the template:-
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{sitename}</title>
{stylesheet}
</head>
</__body>
<!-- Start Wrapper for overall site -->
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<img src="uploads/images/logo.jpg" /></div>
<!-- End Header -->
<!-- Start Strip Div - For Your are here code -->
<div id="strip">
{* Start Breadcrumbs *}
<div class="breadcrumbs">
{breadcrumbs starttext='You are here' root='Home' delimiter='»'}
<hr class="accessibility" />
</div>
{* End Breadcrumbs *}
</div><!-- End strip Div -->
<!-- Start Container this is for glow image -->
<div id="container">
<!-- Start Menu Div -->
<div id="menu">
This will be the menu
</div><!-- End Menu Div -->
<!-- Start Content -->
<div id="content">
{content}
</div><!-- End Content Div -->
</div> <!-- End Container Div -->
<!-- Start Footer Div -->
<div id="footer">
{global_content name='footer'}
</div><!-- End Footer Div -->
</div> <!-- End wrapper for whole site -->
<__body>
</__html>
Code: Select all
* {
padding: 0;
margin: 0;
}
body {
background: #FFFFCC;
}
#wrapper {
width: 944px;
margin: auto;
}
#header {
width: 944px;
height: 80px;
text-align: center;
background: #FFFFFF;
}
#strip {
width: 919px;
height: 35px;
padding-top: 25px;
padding-left: 25px;
background-image: url(uploads/background/top.jpg);
background-repeat: no-repeat;
background-position: top center;
}
#container {
width: 944px;
height: inherit;
background-image: url(uploads/background/filler.jpg);
background-position: center;
}
#menu {
background: #FFFFFF;
margin-left: 25px;
width: 150px;
float: left;
}
#content {
background: #FFFFFF;
margin-left: 15px;
width: 730px;
float: left;
}
#footer {
padding-top: 15px;
clear: both;
width: 944px;
height: 70px;
text-align: center;
background-image: url(uploads/background/bottom.jpg);
background-repeat: no-repeat;
background-position: bottom center;
}