/    Sign up×
Community /Pin to ProfileBookmark

IE menu positioning issue

Copy linkTweet thisAlerts:
Dec 10.2007

Hey everyone! I’m new to the scene here, and I appreciate what is going on. Hopefully I can establish a positive presence on these boards.

Now, the issue:

I am trying to build a crafty nav setup, you can check it at [url]www.pirate-life.com/shipwreck[/url]. The problem is; the nav positioning in IE7 & IE6 is no good.

I have it uploaded in its most stripped form, and I don’t understand where the padding is coming from! There should be no padding between the links, and in IE6 there is one or two pixels on the #signpost pushing it down

Also, the reason I have the #signpost div behind the image links is for background images.

  • – Is it a pain to view the source, should I be pasting my code here?

    • EDIT: I have noticed that removing the display:none solves the issue. Why would the display attribute has default padding associated with it?

    to post a comment
    CSS

    8 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @jcdevelopmentDec 10.2007 — Well i dont see much, try putting {px} after the zeros! Also you have quite a few errors, you might want to go over those. Hope it helps!!
    Copy linkTweet thisAlerts:
    @dtm32236Dec 10.2007 — you don't need px after the zeros,

    #nav {

    padding: 0 0 0 50px;

    margin: 0;

    }

    is perfectly fine markup.

    and there aren't any errors in the HTML or CSS...

    let me look at this and see if i can figure out the problem here.
    Copy linkTweet thisAlerts:
    @dtm32236Dec 10.2007 — It's gotta have something to do with the height: 40px; on the links. I'm not sure though. That's weird. I also know that IE (6 in particular) does not like negative margins. Why not make it display:none; on hover rather than making it move -225px off the screen?

    Also, why do you have class="hide" in the EM tag, and not the <a>? You know you can have multiple classes for each element?:

    <a class="nav_life hide" href="index.php"><em>life</em></a>
    Copy linkTweet thisAlerts:
    @LampauthorDec 10.2007 — dtm32236: I dont believe it has to do with the link height. Also, I think I should explain my technique for the links and their hovers:


    I created the #signpost to play with backgrounds (not applied). I put an id on the nav simply for positioning reasons.

    My links are built with background images, with a width of 450px. 225 for their normal state, and 225 for the hover. The hover simply shifts the image left (displaying the lighter text). The reasoning behind this is so only a single image loads, eliminating the flicker on hover without javascript.

    Visually, there is no need to have text in my html. For accessability reasons, I gave the links an em with hidden attributes.

    This is the problem! Removing 'display:none' fixes the positioning issues entirely! I have a display none on the em to hide the words - my background's are applied to the a's, so removing them removes the images...

    Is this clear?

    I tried em, span, whatever... the display:none is padding the text!

    Any idea?
    Copy linkTweet thisAlerts:
    @dtm32236Dec 10.2007 — if removing display:none works, then this certainly is the problem.

    why not use visibility:hidden; instead of display:none; then?

    display:none; removes the element off the page completely, out of the normal flow, like it was never there. visibility:hidden; hides the element while keeping in the normal flow of the page (it still takes up the same space it would if it were visible).

    does that make sense? maybe knowing that can help.
    Copy linkTweet thisAlerts:
    @LampauthorDec 10.2007 — I had initially thought against visibility:none - thinking that the hidden text would retain some padding charicteristics. I thought removing the text entirely would rid me of its problems.

    How strange that it's the opposite!

    Creating a span class with visibility:hidden has solved the padding issues entirely. dtm32236, thank you very much for your input.
    Copy linkTweet thisAlerts:
    @dtm32236Dec 11.2007 — no problem. glad it worked out.
    Copy linkTweet thisAlerts:
    @dtm32236Dec 11.2007 — when you're done building your site, post it in the 'website review' section - people there usually give pretty good input/advice, and can show you how to improve your site's layout (among other things).

    good luck with everything.
    ×

    Success!

    Help @Lamp spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...