#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    3
    Rep Power
    0

    Problems with menu alignment


    Hey,

    I have a drop down menu that when i view it in Internet Explorer is aligned fine but isnt working properly in firefox. I think the problem lies in the white spaces either side of the page. If the page fits the screen snug there isn't an alignment problem, this is better explained when viewing the site on different resolutions.

    I'm pretty sure the problem lies in the css but i don't know enough pinpoint it.

    I can't post the address on the forum because of the rules but its www northsidestageschool com (where spaces are dots). Sorry if this breaks rules but my problem really doesn't make any sense with out the link!

    Any ideas?

    Mike
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    3
    Rep Power
    0
    Hey,

    I've figured out what was wrong, i needed to add 'position: relative' into the html, body section of the css. Could someone take a moment and explain what the 'position' and its values mean?

    Thanks again,

    Mike
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, michaeln31.

    "position:static" is the default and you only need to specify it if you need to override a different value set elsewhere.

    "position:absolute" pulls an element out of the document flow and allows the element to be positioned based on the edges of its closest positioned parent (or the root element: <html>).For example, giving an element "position:absolute", "top:0", and "right:0" will place an element in the top right corner of its nearest positioned ancestor. Drop-down menus like that are almost always absolutely positioned.

    "position:relative" can be used to create a positioning context for any descenant elements that are absolutely positioned. For an element to be "relatively positioned", you set one or more of the "top", "right", "bottom", and "left" properties, which then causes the element to appear to be offset from its normal position, however, it will still take up space as if it wasn't positioned at all.

    There is also "position:fixed" (which IE6 doesn't support). It's like absolute positioning except that it's always relative to the browser's viewport instead of the nearest positioned ancestor.

    Positioning should be used with caution. Other layout techniques, especially floats and margins, are more useful in general.

    P.S. I should also mention that the menu script you're using is not very well written by current standards. It looks like it's 8 or 10 years old, which on the web is very, very old. I recommend you use something like Superfish instead.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2011
    Posts
    3
    Rep Power
    0
    Thanks for the reply Kravvitz! I know i'm being very lazy but could you tell me the advantages of using something like Superfish over the way i currently create my menu. The menu i use now is created though another program and to be honest I have wanted to get away from it because of it is just so hard to read and understand the source code. I would like to try a different menu but have yet to find something with similar ease of creation.


    Thanks again,

    Mike
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    You're welcome.

    There are many advantages to using a Superfish menu. I'll list the ones that come to mind at the moment.

    1. The menu will be available (at least to some degree) to any search engines and users who don't have JavaScript support enabled in their browsers.
    2. It uses less code overall dedicated for just the menu.
    3. It uses proper semantic markup (and follows other best development practices).
    4. It's easier to integrate with common Content Management Systems.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo