Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2004
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post

    Need some CSS help on this alignment problem!

    I'm having a little trouble getting the drop down menu to display beneath the word "Genres" in my navigation menu.

    Link: n/A

    Mouse over "Genres" and tell me how to move the menu over there. Thanks!
    Last edited by skunker; 06-10-2009 at 03:20 PM.

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    235
    Thanks
    6
    Thanked 21 Times in 20 Posts
    Change the two bottom CSS elements to what I have placed

    That'll fix it in FF, no guarantees for IE's though, your code is a bit of a mess if I am honest, and your website doesn't validate. At all.

    Code:
    .anylinkcss{
    position: absolute;
    left: 0;
    margin-left:400px;
    top: 0;
    visibility: hidden;
    border: 1px solid black;
    border-bottom-width: 0;
    font: normal 12px Verdana;
    line-height: 18px;
    z-index: 100; /* zIndex should be greater than that of shadow's below */
    background: lightyellow;
    width: 200px; /* default width for menu */
    }
    
    
    .anylinkshadow{ /*CSS for shadow. Keep this as is */
    position: absolute;
    left: 0;
    margin-left:400px;
    top: 0;
    z-index: 99; /*zIndex for shadow*/
    background: black;
    visibility: hidden;
    }
    Best of luck with learning.
    Andrew Sharman
    Web designer, developer and programmer.

    If you found my post helpful, why not give thanks! :)

  • #3
    New Coder
    Join Date
    Mar 2004
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks for that information. It works in FireFox, but now IE does not show it correctly:

    N/A

    Do you know what I need to do to fix that in IE?
    Last edited by skunker; 06-10-2009 at 03:20 PM.

  • #4
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Here is an easy/fast fix:

    Code:
    <!--[if IE ]>
    margin-left: 200px;
    <![endif]-->
    Just tweak that pixel amount until it is right where you want it. IE and firefox display things differently.

    A better approach though, that will help cut down on maintenance & update time later on is if you go through your code and clean it up. A good starting point for this is found using the validator tool at http://validator.w3.org/ for both CSS and HTML.

    Hope this helps

  • #5
    New Coder
    Join Date
    Mar 2004
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    Thanks, I tried that, but it still doesn't move! Did I put it in the right place?

  • #6
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Before we try anything else, try patching up the 24 errors and 3 warnings that the validator is showing:
    http://validator.w3.org/check?uri=ht...ss=1&verbose=1

    First and foremost, use a valid doctype declaration! The validator should be your cross-browser bible since invalid code has a far greater chance of breaking layouts.

    In general, conditional CSS should be a method of last resort.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #7
    New Coder
    Join Date
    Mar 2004
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    Sorry, I didn't create the site. I was just hoping we could do some quick hacks with IE to get it working for now.

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You will never get IE to attempt to perform like other more modern browsers without a doctype. Put this on your first line:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

  • #9
    New Coder
    Join Date
    Mar 2004
    Posts
    25
    Thanks
    0
    Thanked 1 Time in 1 Post
    I added that, thanks for the reminder. I still can't seem to get IE to move that drop down menu over to under the "Genres" tab.

  • #10
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by skunker View Post
    I added that, thanks for the reminder. I still can't seem to get IE to move that drop down menu over to under the "Genres" tab.
    The conditional statement was flawed to begin with, but even so you now have 93 errors and 1 warning.

    There are no real shortcuts to take here. For cross-browser consistency you need valid code for a base. Every single response to your thread has mentioned the importance and with good reason.

    Honestly, this shouldn't take any more than an hour to sort out even for someone rusty with HTML. Just read what the validator says for each error and compare that against what you know the code should look like. If you get stuck, use google and/or http://www.w3schools.com to look things up.

    I know it's not the answer you want, but sloppy coding and quick fixes is what got things to this point to begin with and adding more of them isn't a good approach. I won't preach about it anymore though so best of luck!
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Posting Permissions

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