Hello everyone!
I have decided to convert over my table-based layout to pure CSS, to reduce
filesize and to increase my designs flexibility.
Apparently, I have run into quite a few problems. I wrote the code and tested
it in IE (6), but it looks awful in Mozilla (firefox). Im quite sure my
problems are basic, as there really isnt much code to the page. What I have is
the bare-bones layout of my website.
If you guys could help me in getting this to display how it should in both IE
and Mozilla, it would be greatly appreciated. Also, any tips you can give me
along the way would also be much appreciated.
My code is as follows:
--------------------------------
<html>
<head><title>CS S LAYOUT</title>
</head>
<body>
<style type="text/css">
<!--
body {
background-color : #CCCCCC;
font-family : verdana;
}
#wrapper {
margin : auto;
text-align : center;
font-size : 10px;
}
#header {
text-align : left;
background-color : white;
padding : 5px;
width : 693px;
}
..flashBanner {
width : 683px;
height : 198px;
border : solid #CCCCCC 1px;
}
#navigation {
}
#navlist {
margin : 0;
padding : 0;
padding-top : 5px;
}
#navlist li {
display : inline;
list-style-type : none;
padding-right : 10px;
}
#centerSection {
width : 693px;
}
#headlines {
margin-top : 5px;
text-align : left;
background-color : white;
padding : 5px;
width : 230px;
height : 180px;
float : left;
}
#loginBox {
text-align : left;
width : 458px;
float : right;
}
#loginInfo {
margin-top : 5px;
background-color : white;
padding : 5px;
}
#loginGraphic {
margin-top : 5px;
background-color : white;
padding : 5px;
height : 153px;
}
#bottomSection {
text-align : left;
width : 693px;
margin-top : 5px;
}
#latestPostings {
background-color : white;
width : 340px;
height : 130px;
padding : 5px;
float : left;
}
#chatroom {
background-color : white;
width : 348px;
height : 130px;
padding : 5px;
float : right;
}
#footer {
background-color : white;
width : 693px;
padding : 5px;
text-align : left;
margin-top : 5px;
}
-->
</style>
<div id="wrapper">
<div id="header">
<div class="flashBan ner">
</div>
<div class="navigati on">
<ul id="navlist">
<li>HOME</li>
<li>SUPPORT</li>
<li>DISCUSSIO N</li>
</ul>
</div>
</div>
<div id="centerSecti on">
<div id="headlines" >
ddkjdl<br />affdaf
</div>
<div id="loginBox">
<div id="loginInfo" >
mjhkjh
</div>
<div id="loginGraphi c">
hkjh
</div>
</div>
</div>
<div id="bottomSecti on">
<div id="latestPosti ngs">
latest postings
</div>
<div id="chatroom">
blah blah
</div>
</div>
<div id="footer">
©2004
</div>
</div>
</body>
</html>
I have decided to convert over my table-based layout to pure CSS, to reduce
filesize and to increase my designs flexibility.
Apparently, I have run into quite a few problems. I wrote the code and tested
it in IE (6), but it looks awful in Mozilla (firefox). Im quite sure my
problems are basic, as there really isnt much code to the page. What I have is
the bare-bones layout of my website.
If you guys could help me in getting this to display how it should in both IE
and Mozilla, it would be greatly appreciated. Also, any tips you can give me
along the way would also be much appreciated.
My code is as follows:
--------------------------------
<html>
<head><title>CS S LAYOUT</title>
</head>
<body>
<style type="text/css">
<!--
body {
background-color : #CCCCCC;
font-family : verdana;
}
#wrapper {
margin : auto;
text-align : center;
font-size : 10px;
}
#header {
text-align : left;
background-color : white;
padding : 5px;
width : 693px;
}
..flashBanner {
width : 683px;
height : 198px;
border : solid #CCCCCC 1px;
}
#navigation {
}
#navlist {
margin : 0;
padding : 0;
padding-top : 5px;
}
#navlist li {
display : inline;
list-style-type : none;
padding-right : 10px;
}
#centerSection {
width : 693px;
}
#headlines {
margin-top : 5px;
text-align : left;
background-color : white;
padding : 5px;
width : 230px;
height : 180px;
float : left;
}
#loginBox {
text-align : left;
width : 458px;
float : right;
}
#loginInfo {
margin-top : 5px;
background-color : white;
padding : 5px;
}
#loginGraphic {
margin-top : 5px;
background-color : white;
padding : 5px;
height : 153px;
}
#bottomSection {
text-align : left;
width : 693px;
margin-top : 5px;
}
#latestPostings {
background-color : white;
width : 340px;
height : 130px;
padding : 5px;
float : left;
}
#chatroom {
background-color : white;
width : 348px;
height : 130px;
padding : 5px;
float : right;
}
#footer {
background-color : white;
width : 693px;
padding : 5px;
text-align : left;
margin-top : 5px;
}
-->
</style>
<div id="wrapper">
<div id="header">
<div class="flashBan ner">
</div>
<div class="navigati on">
<ul id="navlist">
<li>HOME</li>
<li>SUPPORT</li>
<li>DISCUSSIO N</li>
</ul>
</div>
</div>
<div id="centerSecti on">
<div id="headlines" >
ddkjdl<br />affdaf
</div>
<div id="loginBox">
<div id="loginInfo" >
mjhkjh
</div>
<div id="loginGraphi c">
hkjh
</div>
</div>
</div>
<div id="bottomSecti on">
<div id="latestPosti ngs">
latest postings
</div>
<div id="chatroom">
blah blah
</div>
</div>
<div id="footer">
©2004
</div>
</div>
</body>
</html>
Comment