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.
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.
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.
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 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.
#main_nav li,#main_nav li a {
[B] padding: 0 5px;[/B]
}
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.
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.
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.
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 … :sick: )
