30
I have a problem that I know gets asked about a lot. Its how my page differs in IE vrs. Firefox. I know IE sucks, but hears whats going on.
IE... http://i93.photobucket.com/albums/l7...uzy/IEGOLD.jpg
Firefox... http://i93.photobucket.com/albums/l7...zy/FIREFOX.jpg
(Note the positioning of the text in the sidebars)
I hate the fact that my pages look sweet in Firefox, but not IE.. I don't even know what div is giving me problems I get the feeling that when I coded this I made too many divs. Should I replace some of them with classes and ids? Anyway if you know whats wrong please let me know. Just so its easyer for you to look through my code I think the problem is in
#texto
#sidebar
#sideposition
one of those divs. I am not sure though.
Hear is my CSS...
body {
background-color: #5f656b;
font-family: Tahoma, "Arial Unicode MS", Arial, sans-serif, serif;
font-size: .8em;
color: #eea103
}
/*July 8th 2007*/
#content {
height: 505px;
width: 518px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
margin-top: 4%;
margin-left: 27.2%;
}
#sidebar {
height: 505px;
width: 153px;
background-image: url(images/sidebar.jpg);
background-repeat: no-repeat;
margin-top: 4%;
padding-top: 3%;
padding-left: 3.5%;
margin-left: auto;
float: left;
}
#navigation {
margin: 0%;
padding-top: 0%;
border-width: 0px;
height: 28px;
}
#banner {
border-width: 0px;
margin: 0%;
padding: 0%;
margin-top: 0%;
height: 119px;
}
#footer {
height: 28px;
width: 712px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
margin-top: 4.2%;
}
#container {
width: 712px;
margin: auto;
position: relative;
padding: 0%;
background-color: #3c4246;
}
#home {
width: 442px;
}
#news {
width: 442px;
}
#texto {
padding-left: .8%;
padding-right: .8%;
padding-top: 6%;
width: 105px;
}
#text {
padding-left: 5.5%;
padding-top: 5%;
padding-right: 5.5%;
}
#footer {
padding-top: .01%;
padding-left: 3%;
font-size: .7em;
}
#links {
padding: 0%;
margin: 0%;
}
#navigation {
height: 28px;
width: 712px;
background-image: url(images/navigation.jpg);
background-repeat: no-repeat;
margin-top: 0%;
}
#hvan {
margin-left: 28.5%;
padding-top: .7%;
padding-bottom: 1%;
/* Section for links styles and other */
}
a:link {
color: #ef9f02;
}
a:visited {
color: #ef9f02;
}
a:hover {
color: #ae6d1b;
}
a:active {
color: #ef9f02;
}
.nav a {
color: #ef9f02;
text-decoration: none;
}
.nav a:visited {
color: #ef9f02;
text-decoration: none;
}
.nav a:hover {
color: #ae6d1b;
text-decoration: underline;
}
.nav a:active {
color: #ef9f02;
}
Hear is my Xhtml and php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtml1-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" />
<style type="text/css">
<!--
A {text-decoration:none}
-->
</style>
</head>
<body>
<div id="container">
<div id="banner">
<img src="Images/banner.jpg" alt= "Goldfish Graphics Banner Image" />
</div>
<div id="navigation">
<div id="hvan">
<a href="index.php">Home</a> <a href="services.php">Services</a> <a href="portfolio.php">Portfolio</a> <a href="contact.php">Contact</a>
</div>
</div>
<div id="sidebar">
<div id="texto">
<h4>Testimonies</h4>
<p> <?php include('testmonies.php'); ?>
</p>
</div>
<h4>Links</h4>
<div id="links">
<div class="nav">
<p>
<a href="#">Pixel2Life</a>
<br />
<a href="#">Link</a>
<br />
<a href="#">Link</a>
<br />
<a href="#">Link</a>
</p>
</div>
</div>
</div>
<div id="content">
<div id="text">
<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 graphics, and logos
that are affordable.
</p>
<h4>News (<?PHP
echo date("M d, Y");
?>)</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 quality web designs for half the price.
</p>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
