Lan
12-24-2005, 11:14 AM
I am trying to get a handle on the CSS positioning stuff, but when I get it set up perfectly for firefox, IE looks terible, and when I fix it for IE, firefox looks terible. Is there any way to do what I want and have it look the same in both browsers? Or am I going to have to cater to one over the other?
The place I am doing it at is http://www.wilsweb.net on the main page. There will be a footer spanning the bottom, but I haven't put it in yet. It is currently set up for IE. The code is below.
The css:
body
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #000000
}
#container
{
position: absolute:
top: 0px;
left: 0px;
width: 100%
}
#header
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color: #04C6B6
}
#left_nav
{
position: relative;
top: 15px;
left: 0px;
height: 500px;
width: 20%;
background-color: #04C6B6;
text-align: center
}
#content
{
position: relative;
top: -485px;
left: 21%;
height: 500px;
width: 79%;
background-color: #04C6B6;
text-align: center;
font-weight: bold
}
p
{
margin-top: 5px;
margin-left: 5px;
margin-right: 5px
}
h1
{
font-family: Times
}
The html file:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Wil's Web.net</title>
<link rel="stylesheet" type="text/css"
href="./css/Main.css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="./Images/Wils_Web_Logo1.jpg" alt="Wils Web.Net!"/>
</div>
<div id="left_nav">
<br />
<p class="nav">Test. Test. Test.</p>
<p class="nav">Test. Test. Test. Test. Test.
Test. Test. Test. Test. Test.
Test. Test. Test. Test. Test.</p>
</div>
<div id="content">
<h1>Under Construction</h1>
<br />
<br />
This website is currently under construction. Please return at a later time
to see the finished product.
<br />
<br />
<a href="/Images/pics/">Click here</a> if your looking for the pictures I have up so far.
</div>
</div>
</body>
</html>
Please help with this. I've been at this for awhile now, and it's starting to drive me nuts!.............Lan
The place I am doing it at is http://www.wilsweb.net on the main page. There will be a footer spanning the bottom, but I haven't put it in yet. It is currently set up for IE. The code is below.
The css:
body
{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #000000
}
#container
{
position: absolute:
top: 0px;
left: 0px;
width: 100%
}
#header
{
position: relative;
top: 0px;
left: 0px;
width: 100%;
background-color: #04C6B6
}
#left_nav
{
position: relative;
top: 15px;
left: 0px;
height: 500px;
width: 20%;
background-color: #04C6B6;
text-align: center
}
#content
{
position: relative;
top: -485px;
left: 21%;
height: 500px;
width: 79%;
background-color: #04C6B6;
text-align: center;
font-weight: bold
}
p
{
margin-top: 5px;
margin-left: 5px;
margin-right: 5px
}
h1
{
font-family: Times
}
The html file:
<?xml version="1.0" encoding="UTF-8"?>
<!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>
<title>Wil's Web.net</title>
<link rel="stylesheet" type="text/css"
href="./css/Main.css" />
</head>
<body>
<div id="container">
<div id="header">
<img src="./Images/Wils_Web_Logo1.jpg" alt="Wils Web.Net!"/>
</div>
<div id="left_nav">
<br />
<p class="nav">Test. Test. Test.</p>
<p class="nav">Test. Test. Test. Test. Test.
Test. Test. Test. Test. Test.
Test. Test. Test. Test. Test.</p>
</div>
<div id="content">
<h1>Under Construction</h1>
<br />
<br />
This website is currently under construction. Please return at a later time
to see the finished product.
<br />
<br />
<a href="/Images/pics/">Click here</a> if your looking for the pictures I have up so far.
</div>
</div>
</body>
</html>
Please help with this. I've been at this for awhile now, and it's starting to drive me nuts!.............Lan