PDA

View Full Version : CSS layout problems +REP!


Firehorse
25-04-2010, 10:33 AM
http://danrogerson.com/layouttest23/ as you can see this views fine in IE but unfortunately not in FireFox.

Here is the CSS code:


/* CSS Document */
body {
background-image:url(../images/bgcolour.png);
font-family:"Century Gothic";
color:#FFFFFF;
font-size:16px;
}
.style1 {color: #6699ff}
.style3 {font-size: 24px}
.style4 {font-size: 16px}
.style5 {font-size: 14px}
.style6 {font-size: 9px}
.style7 {font-size: 9px}
.style8 {font-size: 13px;
color: #6699ff;
}
.style9 {
color: #FFFFFF;
font-size: 11px;
}
.style10 {
color: #FFFFFF;
font-size: 24px;
}
.border {border: 5px solid #FFFFFF;}
a:link {
text-decoration: none;
color: #FFFFFF;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #6699ff;
}
a:active {
text-decoration: none;
color: #6699ff;
}
#SiteBody {
font-family: "Century Gothic";
font-size: 16px;
margin: 0px;
padding: 0px;
height: 790px;
width: 852px;
background-image:url(../images/bgcolour.png);
border-top-width: 1px;
border-right-width: 1px;
border-bottom-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-right-color: #FFFFFF;
border-left-color: #FFFFFF;
border-bottom-color:#FFFFFF;
border-top-color: #FFFFFF;
}
#UpperNav {
background-image:url(../images/index_01.gif);
height: 50px;
width: 850px;
}
#Nav {
height: 20px;
width: auto;
margin-right: 44px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
float: right;
margin-top: 20px;
font-size:18px
}
#Copyright {
float: right;
margin-top: 12px;
margin-right: 58px;
}
#Banner {
background-image: url(../images/index_02.jpg);
margin: 0px;
padding: 0px;
height: 209px;
width: 850px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
}#TimeBar {
background-image: url(../images/index_03.gif);
margin: 0px;
padding: 0px;
height: 19px;
width: 850px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
font-size:12px;
padding-left:0;
font-family:"Century Gothic"
color:#FFFFFF;
}
#MainContent {
background-image: url(../images/index_04.gif);
margin: 0px;
height: 459px;
width: 563px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
position:relative;
float: left;
padding-top: 28px;
padding-right: 28px;
padding-bottom: 0px;
padding-left: 28px;
}
#LatestContent {
background-image: url(../images/index_05.gif);
margin: 0px;
height: 459px;
width: 259px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
float:left;
padding-left: 11px;
padding-top: 28px;
padding-right: 11px;
}
#thumb1 {
background-color: #999999;
margin: 0px;
padding: 0px;
height: 100px;
width: 100px;
border: 2px solid #FFFFFF;
}
#RightSpacer {
background-image: url(../images/index_06.gif);
margin: 0px;
padding: 0px;
height: 459px;
width: 28px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
float: right;
}
#Footer {
background-image: url(../images/index_07.gif);
margin: 0px;
padding: 0px;
height: 53px;
width: 850px;
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: 0;
border-right-style: 0;
border-bottom-style: 0;
border-left-style: 0;
}


HTML:


<html>
<head>
<title>DanRogerson.com - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<center>
<div id="SiteBody">


<div id="UpperNav">
<div id="Nav"><span class="style1">Home</span> | <a href="#">About Me</a> | <a href="#">Portfolio </a>| <a href="#">Contact</a></div>
</div>
<div id="Banner"></div>
<div id="TimeBar">
<div align="center">The current date is Saturday, April 24, 2010 at 9:58:40 PM</div>
</div>
<div class="style3" id="MainContent">
<p align="left">Welcome</p>
<p align="left" class="style4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin cursus pellentesque nunc quis ornare. Integer a egestas risus. Vestibulum nunc nunc, blandit sed commodo sit amet, feugiat eget est. Pellentesque malesuada, mi in porta luctus, quam nulla imperdiet mi, sed bibendum tellus felis a lectus. Praesent non ligula et ipsum luctus luctus et facilisis massa. Mauris venenatis ornare faucibus. Cras dignissim ligula vel sapien malesuada gravida. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p align="left" class="style4">Aliquam volutpat elementum placerat. Integer volutpat, nibh sit amet fringilla sollicitudin, libero risus rhoncus mauris, sit amet dapibus neque mauris at neque. Suspendisse posuere elit eu diam pretium non vehicula lorem auctor. Mauris pharetra magna vel massa pulvinar tristique. In hac habitasse platea dictumst.</p></div>
<div id="LatestContent" align="left"><span class="style3">Latest Content</span><p class="style8">Lorem ipsum dolor sit amet, consect<br>
<span class="style9">This is an example of latest content title<br>
and a small caption.</span></p>
<hr align="center" width="80%" size="1" noshade>
<p class="style8">Lorem ipsum dolor sit amet, consect<br>
<span class="style9">This is an example of latest content title<br>
and a small caption.</span></p>
<hr align="center" width="80%" size="1" noshade>
<p class="style10">Latest Thumbnails</p>
<p class="style10"><img src="images/100x100.gif" width="100" height="100" class="border" bordercolor="FFFFFF" align="left"><img src="images/100x100.gif" class="border" align="right"></p>

</div>


<div id="RightSpacer"></div>
<div id="Footer">
<div class="style5" id="Copyright">
<p>Copyright, All Rights Reserved<br>
<span class="style6">Page generated in: 0.00000 seconds</span></p>
</div>
</div>
</div>
</center>
</body>
</html>

Also if anyone could help me make the divs expandable but still aligned that would be great.
Mr-Trainor
25-04-2010, 11:22 AM
I've never coded multi-collum layouts so I'm not expert but the main content and latest content are both on float:left, shouldnt one of them be on the right?
redtom
25-04-2010, 11:58 AM
IE Handles the sizes of things wrong, where as Firefox displays them right. make your collums slightly smaller and it should appear fine, I havent read over your code so I could be wrong.
MattFr
25-04-2010, 12:23 PM
The best bet for 2 column layouts is to set a fixed container width then use fluid percentages within. That's my preference anyway.
Firehorse
25-04-2010, 02:10 PM
Fixed the issue with some help from Recursion. Needed to have separate css rules for IE and firefox, bit annoying really.

+Rep to all who posted. MattFr I need to spread.

Want to hide these adverts? Register an account for free!