What am I missing?!

[Preeminent]

Hey guys,
I have a question that I’m sure will be an easy fix. I just can’t figure it out! What am I missing here?
I have a “FOOTER” div at the bottom of my page. Within that “FOOTER”, I have 3 divs, titled “COPY”, “SOCIAL”, and “ADDRESS”. I have all three of those divs floated to the left. Then I’m adjusting them with margins. Basically I can get everything aligned up perfect and looking the way I want it to, when viewing the page on Safari and Firefox for Mac. The problem is that when I go and view the page on IE 7 and 8, Firefox, and Chrome for Windows, the three divs get messed up. If you inspect with firebug, you will see that the “COPY” div’s content text has extra room to the right, when viewing on a MAC. If you check with firebug on Windows, you see that the “COPY” div’s content text has no room to the right, and it’s all the way pushed up to the right edge. So basically what is happening is that when I get the three divs looking right on my MAC, I then check on Windows and some of the “COPY” and “ADDRESS” text gets bumped down because of there being not enough room in their divs. I need all the text on the same line. No breaks. Can anyone point me in the right direction? Does my question make sense? I’m alway afraid that I try and over explain my problem, and just make it harder to understand my question. Here is my code for the area in question:

HTML:

Copyright 2011 | Preeminent Productions

322 se whatever st. portland, oregon 97222




CSS:

footer{
position:relative;
margin:auto;
width:727px;
height:70px;
}

#divider{
margin:0 auto 20px auto;
width:662px;
height:2px;
}

#copy, address{
display:inline;
float:left;
height:40px;
color:#46250c;
}

#social{
display:inline;
float:left;
margin:0 20px 0 0;
width:80px;
height:40px;
}

#social img{
padding-left:6px;
}

#copy{
width:260px;
margin:5px 0 0 30px;

}

address{
width:280px;
margin:5px 0 0 0;
}


If you would like to see this live:
http://sweetrevenge.preeminentproductions.com

[SAiNT]

you really should watch this video:
https://css-tricks.com/video-screencasts/42-all-about-floats-screencast/
this will solve most of your questions.

[jamygolden]

Try increasing the width of #copy to 279px.

[noahgelman]

Yes, font renderings can be quite a problem. It’s one of the more well known issues between Macs and PC’s in regards to web development. The Operating system renders the texts slightly differently. I think PC’s render text slightly more spaced out.

I ran into this issue recently when I needed a logo, the nav, and a search bar to equal the exact width of the page wrap but since the different operating systems rendered the text slightly wider on PC, it looked fine on PC but there were be a gap on Mac. And if I lined it up on Mac, it would overflow on PC.

I forgot what I did to fix the issue. Some tricks with an image or something. But yeah, a difficult issue non-the-less

[Author]

Posts