Reputation:
I did up a webpage which worked fine in the IE 9 browser on my computer but since uploading it to the web the 3 elements, which are supposd to float side by side, along with the footer, just end up all over the place. Out of firefox, safari and IE, IE is the browser which seems to to display it the best. I've tried pretty much all I can think of. Several of the divs on the page use a transparent background i did in photoshop. Any ideas would be ever so much appreciated.
the HTML:
<!DOCTYPE html >
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css"
href="123.css"/>
<head>
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<body>
<div class="wrapper">
<table width="1000px" height="40px" style="background-color:#494545;">
<tr>
<td width="700"></td>
<td width="50" margin="10"><a href="html\home.html">
<img src="flag1.jpg" border="0"></a></td>
<td width="50" margin="10"><a href="html\home.html">
<img src="flag2.jpg" border="0"></a></td>
<td width="50" margin="10"><a href="html\home.html">
<img src="flag3.jpg" border="0"></a></td>
</tr>
</table>
<div id="topdiv">
<image src="graphics/toplogo.png">
</div>
<div class="main">
<ul>
<li >
<br/><br/><br/><br/>
<li>
<br/><br/><br/><br/>
<li>
<br/><br/><br/><br/>
<li>
</ul>
<div class="text">
text goes here
</div>
<div class="right">
<strong>Promotions</strong>
<br/>
<br/>
div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
and the css:
body {
background-image: url("graphics/backtab.png");
background-repeat: repeat;
margin: 0;
padding: 0;
}
.wrapper {
background-image: url("graphics/contrana.png");
width: 1000px;
text-align: left;
margin: 0 auto;
}
#topdiv {
width: 1000;
height: 180;
text-align: left;
position: relative;
margin-top: 0;
padding-top: 0;
display: block;
}
.main {
width: auto position :relative;
margin: 0 auto;
background-image: url("graphics/tr.jpg");
border: 5px solid #0A1379;
padding-top: 60;
padding-left: 50;
display: block;
overflow: visible;
}
ul {
background-color: white;
width: 150px;
margin-top: 60px;
float: left;
margin-right: 50;
padding: 40;
border: 2px solid black;
filter: alpha(opacity=70);
opacity: 0.7;
}
li {
list-style-type: none;
text-decoration: none;
font-weight: bold;
}
a:link {
color: black;
font-family: verdana;
text-decoration: none;
list-style-type: none;
outline: 0;
}
a:visited {
color: black;
font-family: verdana;
list-style-type: none;
text-decoration: none;
outline: 0;
}
a:hover {
color: #EE9613;
font-family: verdana;
text-decoration: none;
font-family: verdana;
list-style-type: none;
outline: 0;
}
a:active {
color: black;
font-family: verdana;
text-decoration: none;
font-family: verdana;
list-style-type: none;
outline: 0;
}
.text {
background-image: url("graphics/textback.png");
width: 500px;
float: left;
font-family: verdana;
font-size: 14;
padding: 10px 15px;
margin-top: 70px;
word-spacing: 10px;
color: black;
line-height: 18px;
text-align: left;
margin-right: 15px;
display: inline;
border: 2px solid black;
}
.right {
width: 190px;
float: right;
margin-top: 60;
background-image: url
("graphics/advertback.png");
margin-right: 20;
border: 2px solid black;
}
#footer {
width: 1000px;
height: 50px;
background-image: url
("graphics/footer.jpg");
background-repeat: repeat-x;
text-align: center;
padding-top: 15;
font-family: verdana;
font-size: 12px;
text-color: white;
margin: 0 auto;
font-weight: bold;
}
Upvotes: 2
Views: 682
Reputation: 3075
Your code has errors, the wrapper div is not closed, and you have other tags which are not closed as well. Instead of using a bunch of <br/>
tags you should just use padding's and margins.
This is a basic 3 column CSS layout. It'll be easier using this than trying to fix your code.
HTML
<div id="container">
<div id="header">
<p>Header</p>
</div>
<div id="primary">
<p>Primary Sidebar</p>
</div>
<div id="content">
<p>Main content</p>
</div>
<div id="secondary">
<p>Secondary Sidebar</p>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
CSS
#container {
width: 960px;
margin: 0 auto;
}
#primary {
float: left;
width: 240px;
}
#content {
float: left;
width: 480px;
}
#secondary {
float: left;
width: 240px;
}
#footer {
clear: both;
}
Upvotes: 1