7 replies [Last post]
doug.linley
doug.linley's picture
Offline
newbie
Last seen: 12 years 51 weeks ago
Joined: 2007-09-09
Posts: 3
Points: 0

First of all, new here, so I want to say hey! Secondly, I'm having an issue with using float : right in firefox. It's working fine in Safari. Here is what I want to do:

* Have a header div on the top row.
* Show the user name on the left.
* Show the menu on the right.

What's happening is that when I float my menu on the right, it's kicking it down outside of the div. To me, it looks like the container is fine, but I'm apparently missing something. I've posted a test piece below I wrote to demonstrate what I'm seeing in FF on Mac.


Header Template

body {
font-family : "trebuchet ms",Helvetica,Arial,sans-serif;
line-height : 125%;
font-size : 85%;
}

#header {
background-color : #cccccc;
margin : 0px;
width : 100%;
}

#menu {
float : right;
}

#menu ol {
list-style-type : none;
display : inline;
}

#menu ol li {
display : inline;
margin-right : 6px;
}

#menu ol li a {
text-decoration : none;
}

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

You need to explain your

You need to explain your terms. What does kicking down mean?

Remember, we look at your code and see that browsers will display it as they display it. That leaves us trying to guess what you might be trying to attempt.

Some things come to mind:

  • you haven't controlled the margins of your OL and LI elements. On Firefox both of these will come with margin-top & margin-bottom of approx 1em.
  • you haven't controlled the default indent on the OL. That is margin-left or padding-left depending on the browser.
  • you haven't given #menu a width. Floats are shrink to width. With text - which a browser can break where it chooses - that is not a good idea.
  • Floats should come before the unfloated content they are to float next to. Strictly the W3C spec doesn't require this for float:right. It says the float should stay on the same line if there is sufficient width for it. Most browsers don't follow that aspect of the spec. IE & Firefox don't. Opera does. Off the top of my head I don't know whether or not Safari 2 does or doesn't.
  • doug.linley
    doug.linley's picture
    Offline
    newbie
    Last seen: 12 years 51 weeks ago
    Joined: 2007-09-09
    Posts: 3
    Points: 0

    Chris, Thanks a ton for

    Chris,

    Thanks a ton for your response. By "kicking down" I meant to say that it was as if I put a line break before the floated element. Sorry for the confusion.

    I tried all of your suggestions and it turns out that putting the floating element before the unfloated content - as you suggested - fixed the issue.

    Is it common practice to put padding and margin defaults in each of your elements you define in CSS?

    Thanks for your help Chris.

    -Doug

    Tyssen
    Tyssen's picture
    Offline
    Moderator
    Brisbane
    Last seen: 6 years 6 weeks ago
    Brisbane
    Timezone: GMT+10
    Joined: 2004-05-01
    Posts: 8201
    Points: 1386

    doug.linley wrote:Is it

    doug.linley wrote:
    Is it common practice to put padding and margin defaults in each of your elements you define in CSS?

    Elements often come with their own default margins/padding and sometimes they differ across browsers so if you want cross-browser consistency, you need to explicitly declare these values. Lists are the most obvious one cos IE uses padding to indent while other browsers use margin (or it's the other way around, I forget which).

    How to get help
    Post a link. If you can't post a link, jsFiddle it.
    My blog | My older articles | CSS Reference

    Chris..S
    Chris..S's picture
    Offline
    Moderator
    Last seen: 8 years 9 weeks ago
    Timezone: GMT+1
    Joined: 2005-02-22
    Posts: 6078
    Points: 173

    I can't say whether or not

    I can't say whether or not its common practice. If you build pages for other people (clients) and those people require a high degree of consistency/similarity across browsers, then its an absolute must to "reset" the styles to common values. Google on "CSS reset" for some good links, in particular those by Eric Meyer. I think there are three by Eric, the later ones have his later thoughts. So make sure you are aware which one is the last one.

    doug.linley
    doug.linley's picture
    Offline
    newbie
    Last seen: 12 years 51 weeks ago
    Joined: 2007-09-09
    Posts: 3
    Points: 0

    Thanks to the both of you

    Thanks to the both of you for your advice.

    -Doug

    dharper
    Offline
    newbie
    Fairview, Texas USA
    Last seen: 11 years 38 weeks ago
    Fairview, Texas USA
    Joined: 2009-01-11
    Posts: 1
    Points: 0

    Thanks from me too

    Sorry to resurrect an old post but I just thought I'd mention that sometimes when you help the original poster, you also end up helping folks for several more years. Such is the case with me when a Google search took me to this posting. Trying the code from the OP I recognized the exact same problem I've been struggling with for several days now. Following the same instructions from Chris that worked for the OP, I was also able to solve my problem. Just thought I'd take a moment to add my thanks too. Nice site...

    Dave

    Deuce
    Deuce's picture
    Offline
    Guru
    Somewhere, USA
    Last seen: 3 years 19 weeks ago
    Somewhere, USA
    Timezone: GMT-5
    Joined: 2005-11-20
    Posts: 4424
    Points: 1843

    dharper wrote:Sorry to

    dharper wrote:

    Sorry to resurrect an old post but I just thought I'd mention that sometimes when you help the original poster, you also end up helping folks for several more years. Such is the case with me when a Google search took me to this posting. Trying the code from the OP I recognized the exact same problem I've been struggling with for several days now. Following the same instructions from Chris that worked for the OP, I was also able to solve my problem. Just thought I'd take a moment to add my thanks too. Nice site...

    Dave

    Stick around! I'm sure you will be able to learn more and maybe help out!

    all ยป http://dictionary.reference.com/browse/all

    Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph