3 replies [Last post]
Anson
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2008-10-06
Posts: 2
Points: 0

The site renders fine in safari but not in firefox. I have not tried IE yet as I am working on a mac and there is not an updated version of IE for mac. The site is located at:

http://www.faircount.us/opfranchise/indexrev.html

The problem is that firefox put two of my margins about 10 pixels above where safari puts them so my site ends up looking very unprofessional.

I am also copying my CSS code in this post.

Any help would be greatly appreciated!

body {
font-family: Helvetica;
font-size: 14px;
color:#333333; 
}
.subtext {
text-align: justify;
font-size: 12px;
color: #000000;
}
h3 {
font-family: Helvetica;
font-size: 24px;
}
h4 {
font-family: Helvetica;
font-size: 17px; 
font-style: oblique;
}
h5 {
font-family: Helvetica;
font-size: 15px;
}
.fleft {
float: left;
}
.fright {
float: right;
}
.center {
text-align: center;
}
.left {
text-align:left;
}
.style1 {
font-size: 18px;
font-weight: bold;
color:#000000;
}
.subs {
text-align: center;
color: #000000;
font-weight: bold;
background-color:#CCCCCC;
}
.dashed {
border: dashed;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1050px;
border: solid;
background-color: #EEEEEE;
text-align: center;
height: 2400px;
}
#container img {
text-align: center;
}
#ad1 {
float: left;
background-color: #EEEEEE;
width: 1050px;
height: 110px;
border: none;
margin-top: 0px;
margin-left: 0px;
}
#links {
float: left;
margin-top: -18px;
border: none;
}
#banner {
float: left;
margin-left: -2px; 
background-color: #AAAAAA;  
border: solid;
border-width: thick;
border-color: #000000;
margin-top: -29px;
z-index: -1;
}
#why {
margin-top: 10px;
margin-left: 425px;
width: 400px;
background-color:#EEEEEE;
}
#current {
float:left;
width: 400px;
height: 1150px;
margin-top: -658px;
background-color: #EEEEEE;
border: dashed;
border-color:#999999;
border-width: 0px 1px 0px 0px;
z-index: 1;
text-align: justify;

}
#currenttext {
float:left;
width: 850px;
background-color: #EEEEEE;
border: solid;
border-left: hidden;
border-top: dashed;
border-bottom: hidden;
border-right: hidden;
border-top-color:#999999;
margin-top: -15px;
text-align: center;
z-index: 1;

}
#previous {
float:left;
width: 400px;
height: 1205px;
background-color: #EEEEEE;
border: dashed;
border-color:#999999;
border-width: 0px 1px 0px 0px;
margin-top: 302px;
margin-left: -401px;
text-align: justify;
}
#subscribe {
margin-top: -663px;
float: right;
border: solid;
height: 2172px;
width: 200px;
background-color: #CCCCCC;
border-top: hidden;
border-right: hidden;
border-left: solid;
}
#bottombar {
width: 1050px;
float: right;
margin-top: -38px;
margin-left: -150px;
}

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Could you tell us WHICH

Could you tell us WHICH boxes have the funny margins? The sides?

I just took a look in FF on Ubuntu and the site "looked" ok. Mousing over with Aardvark showed some issues... the box called "why" is starting almost at the top of the page, even though its content is clearly meant to only be below the menu.

If you mean #previous, I don't see anything looking bad, however using a top margin like that can be dangerous if the "current" text above it ever needs to grow, or someone does text-enlarge. Maybe you want current and previous to be in the same bar and wrapped around like that? With a skip link or something to reach the "current" part of that sidebar?

Maybe you mean in Safari #subscribe is supposed to be touching the top part? I have noticed a terrible difference between Saffy and everyone else as far as top margins go-- once I had to hide a form and only let the submit button show (go back to previous form button), and had to pull it up over the bottom of the first form with a top margin. Saffy always pulled it up higher-- this might have to do with its use of font metric, except you are using px for your margins, so, not sure if that's the case here.

What are these strange marks in your code?
background-color: #AAAAAA;   <---??

You might be able to wrangle your right side differently-- float it also left and then just negative margin it to its own width, making it wrap and end up on the right side. If you had a wrapper which naturally came after the header and menu, then all of your sidebars could just be wrapped to the sides without needing to be pulled up as well-- they would naturally start at the top of the #wrapper, which is about where it looks you'd want the sidebars to start anyway.

I use a wrapper which comes after the header and navigation all the time-- while sometimes I've needed to push a sidebar down a bit (which works pretty good cross-browser), I've never pulled them up (I have one site where I was first trying out these techniques and have a top margin pushing it down pretty far... there are far more differences cross browser I think simply because of the difference in how they measure the system metric. Each browser also rounds differently.

I'm no expert, but I fake one on teh Internets

Anson
Offline
newbie
Last seen: 14 years 16 weeks ago
Joined: 2008-10-06
Posts: 2
Points: 0

Thanks for the quick

Thanks for the quick response! I was specifically talking about the #subscribe and #current divs but when I looked at the page in IE on an XP machine the entire thing was screwed up... I am very interested in putting a wrapper into the page but am unsure exactly what that is.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 11 years 13 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Oh, it's just another div

Oh, it's just another div which wraps usually around your static stuff (the non-floated no-negative-margin stuff).

Usually, something like this:
(pseudo-code)

(wraps whole document usually)

(set to width: 100% and floated left for the negative margin thing)

(float: left; margin-left: -100%; so, your left sidebar)
(float: left; margin-left: -itswidth; so, ylour right sidebar)

So here, because wrapper doesn't start until after the header and the menu, everything inside and after the wrapper can't go that high. So, your sidebars would start at the height of wrapper's top, not the top of the page. Which can possibly eliminate the need for strange top margins. Again, I dunno what you can do currently to make Safari do top-margins the same as everyone else-- and every browser is off by a little. I also find Opera to always be a hair higher (though not so high as Safari) while FF and IE (6/7) seem pretty close to each other.

I'm no expert, but I fake one on teh Internets