hi, i cant figure it out, im almost done with the site, i think, but im having trouble getting the header text to show up in the same place in IE and FF. the text is at the top "about us". and it goes too far to the right in Firefox. also, my content div is doing the same thing, its horizontal position is different in FF and IE.
here is the page im talking about, you can see in firefox "about us" is too far right, and in IE its ok. weird!
http://derekvanderven.com/new_doctor_site/aboutus.html
here is my css /html, again, its pretty bad because it was the first site i ever did and im trying to redo it. 
Code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="footer.css" rel="stylesheet" type="text/css"/>
<title>About us</title>
<style type="text/css">
body {
margin: 0; /* clear for browsers */
padding: 0;
background-color: #3E728E;
}
#wrapper {
background-image: url( about_us_background.jpg);
background-repeat:no-repeat;
width: 800px;
margin:0 auto 0; /*-- top, (right left auto) , bottom zero centers the wrapper */
}
#contactblock {
width:100%;
height:560px; /* encloses the contact info, before the navigation. down to just above navigation */
}
#navigation {
clear:right; /* code has no effect it appears */
width:100%;
height:50px; /* somehow this box gets magically pushed down to the bottom i dont know how */
padding:0;
}
#contactinfo {
width:45%; /* puts the box near center by its size compared to whole width*/
float:right; /* floats it to the right first, then 75percent shrinks it.*/
margin:2em 0 0;
line-height:.1em; /* top 0, (right left 0) , bottom 5 --> /* a margin of 5em bottom pushes down the form content */
}
#contactinfo p {
text-align:center;
}
/*#contactinfo p {
position:relative; /* pushes text to the right 8em relative to the contactinfo box. */
/*left:5em;
margin:0 0 .1em; */ /* <!-- top 0, (right left 0) , bottom 1 space between lines-->
}*/
#content {
/* puts the box near center by its size compared to whole width*/
width: 40%;
float:right;
margin-right: 50px;
height: 250px;
margin-top: 0px;
clear:both;
padding: 10px;
overflow: scroll;
overflow-x: hidden;
}
#content p {
padding: 10px;
}
/*#content p {
position:relative; /* pushes text to the right 8em relative to the contactinfo box. */
/*margin:0 0 .1em; /* <!-- top 0, (right left 0) , bottom 1 space between lines-->*/
#links {
background-image: url(nav_background.jpg);
background-repeat:no-repeat;
100%;
height: 70px;
clear: both;
text-align: center;
padding-top: 3px;
font-weight: bold;
font-size: large;
}
#links ul {
list-style-type:none;
margin-top: 10px;
padding:0;
}
#links ul li {
display:inline;
margin:0 50px;
line-height:1.5em;
}
#links ul li a:link, #links ul li a:visited {
color:#000;
text-decoration:none;
height:1.8em;
}
#links ul li a:hover, #links ul li a:active{
color:#375B97;
text-decoration:none;
}
.style1 {
color: #0066CC;
font-weight: bold;
text-align:center;
font-size: xx-large;
}
#doctext {
float:right;
height: 30px;
margin-top: 100px;
margin-bottom:50px;
margin-right:100px;
}
p
{
text-indent: 20px
}
</style>
</head>
<body>
<div id="wrapper">
<div id="contactblock">
<div class="style1 " id="doctext"> About Us</div>
<div id="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sit amet nulla luctus est condimentum feugiat. Phasellus consequat euismod erat vitae accumsan. <p>Vestibulum nec arcu lectus, gravida tincidunt lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean turpis orci, facilisis sed varius vitae, auctor sit amet risus. Vivamus tristique consectetur varius. Nullam molestie ipsum at velit ultrices eu luctus leo gravida. Curabitur volutpat porttitor sapien, eget vehicula metus vulputate a. Vivamus a rutrum nibh.</p> Duis molestie lacinia justo sit amet convallis. Etiam sit amet ipsum sed orci convallis sollicitudin. Mauris adipiscing dui et mauris aliquet nec fermentum diam posuere. Maecenas in tortor ligula, sed pulvinar lorem. Curabitur scelerisque consectetur magna. Proin mollis semper leo, non fringilla justo facilisis vitae. Etiam sit amet ipsum sed orci convallis sollicitudin. Mauris adipiscing dui et mauris aliquet nec fermentum diam posuere. Maecenas in tortor ligula, sed pulvinar lorem. Curabitur scelerisque consectetur magna. Proin mollis semper leo, non fringilla justo facilisis vitae.
</div>
</div>
<!-- end of contentblock -->
<div id="links"><ul class="style2 style3">
<li><a href="home.html">Home </a></li>
<li><a href="aboutus.html">About Us </a></li>
<li><a href="services.html">Services </a></li>
<li><a href="contact.html">Contact Us </a></li>
</ul>
</div>
<div id="footer" > © Derek Van Derven website design 2009</div>
</div> <!-- end wrapper div -->
</body></html>
Last edited by silverglade; 05-07-2009 at 02:34 PM..
|
