Help - Search - Members - Calendar
Full Version: Problem with site in Safari vs. Firefox
HTMLHelp Forums > Web Authoring > Markup (HTML, XHTML, XML)
kinetickatie
I could use some help. My site looks fine in Firefox (minus the uncentered image which I created a topic about), but in Safari the div is underneath the menu. What have I coded wrong? Here's the pic of the site preview in Firefox:

IPB Image

And here it is in Safari:

IPB Image

My HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
<!--
.style2 {
font-family: Tahoma;
font-weight: bold;
color: #FFFFFF;
}
.style4 {font-family: Tahoma}
.style9 {font-size: 14px}
-->
</style>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
<!--
.style1 {
font-family: Tahoma;
font-size: 12px;
}
.style3 {
color: #333333;
font-size: 20px;
}
.style5 {
font-size: 12px
}
.style10 {font-size: 16px}
-->
</style>
</head>

<body>
<div id="header">
<div align="left"><img src="banner.jpg" alt="" width="743px" />
</div>

<div class="belowheader">
<div align="center">
<p class="style2"></p>
<p class="style2 style3">YOUR SOURCE FOR PRINTED AND DESIGNED MATERIALS </div>
<div class="cart">
<p align="center" class="style4 style5"><strong>Shopping Cart</strong></p>
<p align="center"></p>
<p align="center"><span><span class="style4">in cart 0 items</span></span> </p>
</div>
</div>
<ul id="menu">
<li><a href="#"><img src="home.gif" alt="" width="149" height="60" /></a></li>
<li><a href="#"><img src="but2.gif" alt="" width="149" height="60" /></a></li>
<li><a href="#"><img src="but3.gif" alt="" width="149" height="60" /></a></li>
<li><a href="#"><img src="but4.gif" alt="" width="149" height="60" /></a></li>
<li><a href="#"><img src="but5.gif" alt="" width="149" height="60" /></a></li>
</ul>

<p></p>
<div id="content">
<div align="left">
<p></p>
</div>
<p></p>
<div id="left">
<h2 align="left">BROWSE BY CATEGORIES :</h2>
<ul class="leftnav">
<li class="cart style1">Weddings </li>
<li class="cart style1">Birthdays </li>
<li class="cart style1">Bridal Showers </li>
<li class="cart style1">Baby Showers </li>
<li class="cart style1">Birth Announcements </li>
<li class="cart style1">Business Solutions </li>
<li class="cart style1">Custom Designs</li>
<div align="left"></div>
</ul>

</div>

</div>
<div id="content2">
<center>
<span class="style10">Featured Product</span></center>
<center><img src="images/featured1.jpg" alt="Wedding Suite" width="300" height="300" border="10"></center>
<center>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p class="style9">Graphic Flora Wedding Collection</p>
</center>
</div>
<div id="footer">
<div class="pay">
<a href="#"><img src="images/small1.jpg" alt="" width="80" height="26" /></a>
<a href="#"><img src="images/small2.jpg" alt="" width="39" height="26" /></a>
<a href="#"><img src="images/small3.jpg" alt="" width="39" height="26" /></a>
</div>

<div class="copy">
<ul class="botmenu">
<li><a href="#">Specials</a></li>
<li><a href="#">Search</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Create an account </a></li>
<li class="back"><a href="#">Customer Login</a></li>

</ul>
<p>Copyright 2007 Your Store / <a href="#">Privacy Notice</a> / <a href="#">Terms of Use</a> / <br /><a href="http://www.webdesign.org" class="under">Web Design</a> by <a href="http://www.freetemplatesonline.com" class="under">Free Templates</a> Online</p>

</div>
</div>


And my CSS:

*{
margin:0px;
padding:0px
}
img{border:0px}
html{
width:100%;
padding:10px 0 10px 0;
}
body{
width:746px;
margin:auto;
background-color: #ffe3e7;
}
#header{
float:left;
font-family:Tahoma;
font-size:11px;
color:#585858;
height:71px;
margin:0 0 200px 0
}
#header img{
float:left
}
.lang{
float:left;
width:112px;
margin:10px 0 0 0;
padding:9px 20px 7px 60px;
border-right:1px solid #BABABA
}
.lang img{
padding:3px 0 3px 0;
margin:5px 0 0 0
}
#header .center{
padding:3px 9px 3px 10px;
margin:5px 10px 0 9px;
border-left:1px solid #BDBDBD;
border-right:1px solid #BDBDBD;
}
#belowheader{
margin:50px 50px 50px 50px;
}
.cur{
float:left;
width:120px;
margin:10px 0 0 0;
padding:9px 20px 7px 21px;
border-right:1px solid #BABABA
}
.cur select{
width:101px;
height:17px;
float:left;
border:1px solid #6E6E6E;
margin:7px 0 0 0;
font-family:Tahoma;
font-size:10px;
color:#6E6E6E;
font-weight:bold;
padding:1px 0 0 4px;
}
.cart{
float:center;
width:123px;
margin:10px 0 0 0;
padding:9px 28px 7px 20px;
background-image:url(images/cart.gif);
background-position:20px 4px;
background-repeat:no-repeat
}
.cart strong{
margin:0 0 15px 34px;
float:center
}
.cart font{
color:#C30205;
font-weight:bold;
font-size:11px
}
#menu{
float:left;
}
#menu li, #menu li img{
list-style-type:none;
float:left
}
#content{
float:left;
margin:4px 0 0 0;
width:200;
}
#content2{
background-color:#FFFFFF;
float:left;
width:350px;
margin: 28px 0px 100px 25px;
font-family:Tahoma;
height:350px;
}
#left{
float:left;
width:200px;
}
#left h2{
font-family:Tahoma;
font-size:11px;
color:#4F4D4D;
width:212px;
background-color:#EBE0DB;
display:block;
text-align:left;
padding:12px 0 12px 0
}
.leftnav{
display:block;
float:left;
width:192px;
padding:10px 10px 10px 10px;
margin:0 0 4px 0;
background-color:#F5EBE7
}
.leftnav li{
list-style-type:none;
float:left;
width:192px;
height:16px;
display:block;
background-image:url(images/arrows.gif);
background-position:10px 8px;
background-repeat:no-repeat;
padding:4px 0 0 35px;
border-bottom:1px solid #EBE0DB
}
.leftnav li a{
display:block;
float:left;
font-family:Tahoma;
font-size:11px;
color:#000000;
text-decoration:none
}
#footer{
float:left;
margin:4px 0 0 0;
padding:10px 0 0 0;
background-color:#E7E3D8;
height:59px;
width:100%;
}
.pay{
margin:12px 50px 0 13px;
float:left
}
.copy{
float:left;
color:#626262;
font-family:Tahoma;
font-size:11px;
font-weight:bold;
}
.copy p{
width:500px;
text-align:center
}
.botmenu{
display:block;
float:left;
width:450px;
padding:10px 0 5px 35px
}
.botmenu li{
float:left;
list-style-type:none;
padding:0 10px 0 10px;
background-image:url(images/dots.gif);
background-position:top right;
background-repeat:no-repeat;
}
.botmenu a{
color:#807F7F;
text-decoration:none;
float:left;
}
#footer .back{
background-image:none;
width:90px;
}
#footer p{
float:left
}
#footer p a{
color:#626262;
text-decoration:none
}
#footer p .under{
text-decoration:underline
}
#content .inner_copy {border:0;color:#f00;float:left;width:50%!important;margin:-202px 0 0 0;overflow:hidden;line-height:0;padding:0;font-size:12px}
Frederiek
When I copy/paste the code you posted and view that in Safari/Mac, the DIV is in the right place. Only the text below the image in the div is in the wrong place. But you'll probably solve that with my reply in your other thread.

If then the div still gets pushed below, then rather post the URL to the page.

BTW, you use a HTML 4.01 Transitional DOCTYPE, but XHTML to close empty elements with " />". See point 4.6 at http://www.w3.org/TR/2002/REC-xhtml1-20020801/#diffs .
kinetickatie
Hm, I uploaded the site and in Safari it looks normal (except for the text). Dreamweaver's preview isn't doing it justice apparently.

I don't quite understand how to fix the text without all those paragraph tags. Could you dumb it down for me? Thank you so much for your help!
Frederiek
This is solved in your other thread on "Image won't center in div" at http://forums.htmlhelp.com/index.php?showtopic=13255 .
kinetickatie
Thank you greatly!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.