Grow your CSS skills. Land your dream job.

What am I missing?!

  • # January 30, 2011 at 5:21 pm

    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:

    divider

    Copyright 2011 | Preeminent Productions

    facebook
    twitter

    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

    # January 30, 2011 at 5:33 pm

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

    # January 30, 2011 at 8:34 pm

    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.

    # January 30, 2011 at 10:28 pm

    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!

    # January 30, 2011 at 10:56 pm

    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.

    # January 31, 2011 at 10:53 pm

    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!

    # February 9, 2011 at 11:44 pm

    This is so ODD! I don’t get it! Can anyone out there, check my link on a windows computer, so that they see what I’m talking about?

    # February 10, 2011 at 1:48 am

    Try increasing the width of #copy to 279px.

    # February 10, 2011 at 8:02 am

    @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):

    #copy, address {
    display: inline;
    float: left;
    height: 40px;
    color: #46250c;
    width: 302px;
    margin: 5px 0 0 0;
    }

    #social {
    display: inline;
    float: left;
    margin: 0;
    width: 120px;
    height: 40px;
    text-align: center;
    }

    #social img {
    padding: 0 3px;
    }

    #copy {
    text-align:right;
    }

    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 .

    # February 10, 2011 at 5:51 pm

    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

    # February 10, 2011 at 9:45 pm

    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.

    # February 10, 2011 at 9:48 pm

    @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)

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".