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:
Well that video goes over the basics of Floats. I consider myself up to speed on floats and how they work. I did watch the video just in case I missed something. But no. Nothing really mentioned that would relate to my problem. I was hoping that this bit from a css-tricks float article: "The 3px Jog is when text that is up next to a floated element is mysteriously kicked away by 3px like a weird forcefield around the float. Quick fix: set a width or height on the affected text." would maybe be a fix. But no, I specified a width to the paragraph text within the "COPY" div and that didn't help either.
Basically, if you look at the live page on a Mac. Directly to the right of "Preeminent Productions", there is space between the end of the text and the actual end of it's width.(viewed in Firebug) Which is what I want. Then if you look at it in a Windows browser, there is NO space between "Preeminent Productions" and the Facebook icon. I don't get it!
Its the difference in font renderings - you'll never get it to be the same in all browsers, especially cross platform.
The easiest way to fix this is to set the copy div to text-align right and use right padding equal to the space you want to maintain. The text will be longer or shorter on the left side and not affect the design.
Ahh yes, something as simple as text-align. I don't know how I forget these things, haha! Well I'm thinking that is definitely the route I will need to take, but the text is still getting broken and it's being sent down a row. "Productions" is getting kicked down in Windows browsers. But still looks perfect on the MAC! UGH!
@Preeminent, I've cleaned things up for you. Replace everything in the stylesheet from #copy, address down to the media queries comment with this (eliminating a few rulesets):
The problem was that the #copy float was still not large enough to contain the text. I've increased it to the max size available in #footer (maintaining the centering and 20px margin of the #social div and allowing 3px for IE6). So now the text can increase in size (whether by user selection or browser rendering differences) and not break the layout .
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
Wow! Thank you all for your suggestions, but wolfcry, you fixed it! Thank you very much! I REALLY appreciate you taking your valuable time to help me out! I am going to study what you did now.
@noahgelman yeah, this is sort of a new issue for me. I only recently bought my Mac and love it. In the past I relied on sites and apps to "check" my sites on browsers for Mac. Never had a problem before. Just another thing to remind me I am not a CSS master. (Siiiiiigggggh)
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:
<footer>
<div id="divider">
<img src="/images/bottomdivider.png" alt="divider"/>
</div><!--end divider-->
<div id="copy">
<p>Copyright 2011 | Preeminent Productions</p>
</div><!--end copy-->
<div id="social">
<img src="/images/facebook.png" alt="facebook"/>
<img src="/images/twitter.png" alt="twitter"/>
</div><!--end social-->
<address>
<p>322 se whatever st. portland, oregon 97222</p>
</address><!--end address-->
</footer><!--end footer-->
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
http://css-tricks.com/video-screencasts/42-all-about-floats-screencast/
this will solve most of your questions.
The easiest way to fix this is to set the copy div to text-align right and use right padding equal to the space you want to maintain. The text will be longer or shorter on the left side and not affect the design.
I've cleaned things up for you. Replace everything in the stylesheet from #copy, address down to the media queries comment with this (eliminating a few rulesets):
The problem was that the #copy float was still not large enough to contain the text. I've increased it to the max size available in #footer (maintaining the centering and 20px margin of the #social div and allowing 3px for IE6). So now the text can increase in size (whether by user selection or browser rendering differences) and not break the layout .
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