Float issue with safari and FF

[brianatlarge]

Website: http://studentseatfree.com/search.php

Well, in FF my logo is somewhere in the middle, but in safari it is on the left side. I tried to fix it using margin-left and margin-right to push it around in firebug but it doesn’t do anything. If you are floating something does it ignore margins?

Also, could someone help me figure out my rollover situation? On the listings I have it where it changes color on the rollover, but I can’t figure out how to get it to return to the default color when you move your mouse off. With onmouseout you have to specify a color. Is there some value for "default"?

Thanks.

HTML:

Code:

Sort by: Restaurant Name
Restaurant Type
Discount Type

Showing all coupons

< 1 >
 All Listings

Caliente Grille			View map
		2 for $10 on Tuesdays

Grand China Buffet			View map
		10% Discount

Little Tokyo			View map
		10% Discount

Spicy Pickle			View map
		10% Discount

© Copyright 2008 StuckPixel Studio LLC & Jaree Marketing LLC

All Rights Reserved
Hattiesburg, MS

CSS:

Code:

* { margin: 0; padding: 0; }

img, div { behavior: url(iepngfix.htc) }

body
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:12px;
}

.back1
{
background:url(images/back1.jpg);
background-position: left top;
background-repeat:no-repeat;
}

.back2
{
background:url(images/back2.jpg);
background-position: right bottom;
background-repeat:no-repeat;
}

.searchbox
{
background:url(images/topgreen.png);
background-repeat:no-repeat;
margin:0px auto;
height:30px;
width:999px;
}

.everything
{
background:url(images/bg.png);
background-position: center top;
background-repeat:repeat-y;
margin:0px auto;
width:999px;
display:block;
}

.villiesflyer
{
background:url(images/villiesflyer.jpg);
background-repeat:no-repeat;
margin:0px auto;
height:1241px;
min-height:1241px;
width:959px;
}

.searchformbox
{
margin-top:-27px;
margin-left:30px;
}

.sort-area {float:left;
width:300px;
}

.search-area {float:right;
width:240px;
}

.logobox
{
background:url(images/newlogo.jpg);
width:175px;
min-height:135px;
height:135px;
margin-left:0px;
margin-top:33px;
padding-left:10px;
float:left;
}

.adtopbox
{
background:url(images/adtopholder.jpg);
background-repeat:no-repeat;
width:730px;
min-height:90px;
height:90px;
margin-left:200px;
margin-top:-120px;
padding-right:65px;
float:right;
}

.adbox
{
background:url(images/adboxholder.jpg);
width:300px;
min-height:250px;
height:250px;
float:right;
margin-right:70px;
margin-top:15px;
}

.skyscraper
{
background:url(images/skyscraperad.jpg);
width:160px;
min-height:600px;
height:600px;
float:right;
margin-right:-223px;
margin-top:294px;
}

.contentbox
{
width:560px;
min-height:100px;
padding: 5px;
background-position: left top;
margin-left:30px;
}

.comingsoon
{
background:url(images/comingsoon.jpg);
background-repeat:no-repeat;
margin:0px auto;
height:600px;
width:960px;
}

.description
{font-size:16px;
}

.results
{
margin-left:30px;
}

.resultspadding
{
padding:5px;
}

.restname
{
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size:20px;
font-weight:bold;
}

.floatleft {
float: left;
margin: 0px 10px 10px 0px;
}

.refine
{
background-color:#eeeeee;
min-height:25px;
width:890px;
padding:5px;
margin-left:30px;
margin-top:60px;
background-position: center top;

}

/*Footer*/

#footer {
padding:10px 0px 70px 10px;
color:#0c0c0c;
width:951px;
background-color:#daf2c8;
font-size:9px;
text-align: left;
line-height:12px;
margin:35px auto 0px;
}

#footer img {
float:left;
margin-right:10px;
}

#footer span {
display:block;
float:left;
width:300px;
}

#footer a {
color:#9e8292;
text-decoration:none;
}

img {border:none}

div.clear { clear: both; }

.boxlink
{
color:#000000;
text-decoration:none;
}

[Historical Forums User]

I’m not sure I entirely understand what your trying to do, so ignore me if I am totally off!

But in the logobox class, get rid of your padding-left and replace with a margin left of 30px and it looks fine and dandy to me!

p.s. footer could do with losing a px in width!

[Historical Forums User]

Regarding the space between the logo and the green, its the .logobox class again – margin-top is on 29 – adjust that to desired value.

To be honest your code is just a bit messy. If I were you I would try and recreate your site starting with fresh css and xhtml.
To explain;

• your first div is called back1 – these attributes could easily be added to your body attributes.[/*:m]
• I am guessing search box is the holding div for the top green area… it doesn’t actually hold anything it just colours in the top area (and I’m not sure why you didn’t use a colour value for this)[/*:m]
• None of your div’s have id tags, they all use class tags.[/*:m]
• classes are filled to the brim with attributes; a fair few of these are not doing anything now but could mess things up in other browsers in the future.[/*:m]
• You switch to tables soon as you hit content – could be worth sticking with divs.[/*:m][/list:u]

  Its a really nice looking site but I would watch the Converting a Photoshop Mockup and just re structure the site. You have all the images so it really shouldn’t take long. It will save you so much time in the future!

[Author]

Posts