SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy last menu item fallin to next line in Windows browsers :(

    Hey everyone,

    I have a huge tiny problem... For some reason on PC's my registration button up top falls to the next line and I can't figure it out... I've screwed around with margins, padding, seems like everything i swear.

    This is the site:
    Toronto Dance Studio - About Us

    And since I'm here.. does anything know how I can make the blue background of the left side be blue all the way to the footer??

    I tried to give them a container the way around, just around everything but the footer, a bunch of different things but nothing worked. the only thing that sort of worked in having it on the main background image, but then it goes wonky if pages are short.

    But really ... I care about the 'registration' button first and foremost.

    Please help!

    Thanks so much in advance.
    n

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ktown View Post
    on PC's my registration button up top falls to the next line
    Could you be more specific. It's fine in IE8, and I presume 9.


    does anything know how I can make the blue background of the left side be blue all the way to the footer??
    The easiest way is to wrap pks-left-side and pks-content in a container div (set to overflow: hidden) and use "faux columns".

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I have a huge tiny problem... For some reason on PC's my registration button up top falls to the next line and I can't figure it out... I've screwed around with margins, padding, seems like everything i swear.
    I'm on Linux, and it's bad.



    It's likely that your non-PC machines have a tiny font setting and your PC machines have a larger setting. Larger fonts, larger boxes holding the text, stuff starts dropping to the next line.

    While one of your options might be to make the text smaller, that's not great since some of us NEED that text to be bigger just to read it.

    So I'd see if you maybe want to have the logo image and the navigation in two separate boxes... and if the menu is small enough to fit (which is true on screens with smaller font setting) it lines up the way you want now... and if it doesn't, the whole menu drops down a new line (so, under the logo) and remains a single row.

    Though even doing this, eventually SOMEone will have fonts so large it'll wrap anyway, because your page has a fixed width. Other than making your whole page flexible (which prolly would mean a css recode), you'll have to live with that. But I like the idea of the whole menu dropping down.

    To do that in non-ie you could float the menu and not give it a width, but IE likes widths on floats... so another option would be no width on a non-floated ul and the li's set to display: inline-block and then the hack for IE6 and 7 (or, you could set the li's to display: inline and move all the margin and padding styles over to the anchors, and set THEM to display: inline-block... there, you won't need to hack for IE at all) and this might do it.

    Hm actually they might still wrap... maybe with white-space: nowrap. Gotta be careful with using that though.

    Hm... actually, to get this behaviour cross-browser might be tricky...
    maybe keep them all in a single container, float the logo left (with a width) and float the menu left without a width (and inside the display: inline-block instead of float on the anchors) and see if inline-block content will stretch the width of a float. Plain old inline content can, in some browsers, but in others the float will shrink-wrap as soon as it can. So then maybe a min-width (in px) for the ul equal to the remaining area you have (width of container minus width of the logo) and if the ul can grow it should drop down.
    And then tell IE6 and maybe 7 just width="the full page width" and have them always just show the menu underneath the logo.

  4. #4
    SitePoint Evangelist ktown's Avatar
    Join Date
    May 2001
    Location
    toronto
    Posts
    478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much for both of your responses. I actually use browser shots. I know, its not a great solution, and what I saw there is what Stomme poes is saying.

    I will try to solve the problem

    Thanks again!!

    Nina

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I can see the last word dropping in FF on the mac (but fine on the pc). The bold text is always much wider on the mac and you will need to reduce the 8px side padding you have on the lists and the anchors to about 5px before it will fit.


    Code:
    
    #main_nav li,#main_nav li a {
       padding: 0 5px;
    }

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    The bold text is always much wider on the mac and you will need to reduce the 8px side padding you have on the lists and the anchors to about 5px before it will fit.
    My default Desktop text size of equiv 18+px would still die horribly with that (I can't click "Registration" and it only appears in my screenshot because I'm hovering over another list item). But that might be enough to fix slight differences between machines with default font sizes.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    My default Desktop text size of equiv 18+px would still die horribly with that (I can't click "Registration" and it only appears in my screenshot because I'm hovering over another list item). But that might be enough to fix slight differences between machines with default font sizes.
    Yes that was just a rough guess (although it fixed the display at normal size on my mac). Of course the extra width does depend on font choice also as some fonts are wider than others.

    It doesn't however cater for any text resize so perhaps a re-think would be in order to allow the text to wrap nicely on the few machines where it doesn't fit or when text is resized.

    It's quite surprising how much difference there can be between text widths on the various platforms so you just have to cater for scenarios where the text may wrap.

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    It's quite surprising how much difference there can be between text widths on the various platforms so you just have to cater for scenarios where the text may wrap.
    In my Desktop I have a large font set for "Applications". Firefox goes along with this; Opera and Chrome do not. You never know when a browser is going to inherit Desktop or OS settings and when it won't.

    I didn't check the OP's site in my Opera on Linux but the menu probably lines up in that.

  9. #9
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,301
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    All this demonstrates that it's best to design elements like menus so that they will still look OK despite all these varying conditions. (It makes me feel kind of dirty these days when I have to implement designs that aren't this flexible. O well )


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •