I am trying to make a website using xhtml and css. For some reason IE is showing what I have of my page so far correctly and Firefox isn't. I know Firefox is more strict and have validated all my code.
Hear is what it looks like in firefox.
http://i93.photobucket.com/albums/l7...y_Bouzy/gg.jpg
Now Ie...
http://i93.photobucket.com/albums/l7..._Bouzy/gg2.jpg
Keep in mind everything is correct except for the side navigation style content box. The only reason the banner isn't there is because it was cut out on my screen print.
(Am I coming about this wrong? I am using the div to make background image for my content boxes...I don't know.. Hear is my code)
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: 12px;
color: #eea103
}
/*Divs*/
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 20px;
margin-bottom: 20px;
float: right;
}
#sidebar {
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
padding-left: 38px;
padding-right: 38px;
padding-top: 46px;
padding-bottom: 46px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: 20px;
}
#navigation {
margin: 0px;
padding-top: 0px;
border-width: 0px;
}
#banner {
border-width: 0px;
margin: 0px;
padding: 0px;
}
#container {
width: 712px;
margin: 0px auto;
margin-left: auto;
margin-right: auto;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
**************************************
And now my XHTML
**************************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Goldfish Graphics</title>
<link type="text/css" rel="stylesheet" href="Goldfish.css" />
</head>
<body>
<div id="container">
<div id="banner">
<img src="images/banner.jpg" alt= "Goldfish Graphics Banner Image" />
</div>
<div id="navigation">
<img src="images/navigation.jpg" alt= "navigation background image" />
</div>
<div id="content">
<h2>Home</h2>
<p id="home">
Based in the Midwest, Goldfish Graphics is a freelance design business. Goldfish Graphics is
dedicated to working with clients to turn their ideas into unique designs. By communicating
with our clients, we produce quality websites, layouts, print and website graphics, and logos
that are affordable.
</p>
<h4>News (7/02/07)</h4>
<p id="news">
Although the Goldfish Graphics site is up and running, I am still currently learning how to better make web sites.
Because I am still learning, all web based projects I take on now will be 50% of the price they should be. With a little patience you can have a quality web designs for half the price.
</p>
</div>
<div id="sidebar">
<h5>Testimonies</h5>
<p>
""
</p>
<p>
Links
</p>
</div>
</div>
</body>
</html>