469,909 Members | 1,765 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,909 developers. It's quick & easy.

Div differs in (yes once again) Firefox vs IE

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> &nbsp; &nbsp; &nbsp; &nbsp; <a href="services.php">Services</a> &nbsp; &nbsp; &nbsp; &nbsp; <a href="portfolio.php">Portfolio</a> &nbsp; &nbsp; &nbsp; &nbsp; <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>
Jul 19 '07 #1
0 1499

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

59 posts views Thread by Lennart Björk | last post: by
16 posts views Thread by Josef Dalcolmo | last post: by
4 posts views Thread by HeroOfSpielburg | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.