19 replies [Last post]
le007
le007's picture
Offline
Enthusiast
Last seen: 10 years 24 weeks ago
Joined: 2006-10-08
Posts: 160
Points: 0

The LI's are meant to move down 4px when hovered...

ul#navlist {
white-space: nowrap;
font-family: arial;
font-size:12px;
font-style:strong;
}
#navlist li {
display: inline;
list-style-type: none;
float: left;
margin-right: 2px;
}
#navlist a {
padding: 0 11px;
height: 4em;
line-height: 2em;
margin: 0 0 4px;
background-color: #99FFFF;
color: #2689BC;
text-decoration: none;
}
#navlist a:hover {
margin-top: 60;
color: #fff;
background-color: #369;
text-decoration: underline;
margin: 4px 0 0;
}

HOME

  • test

  • test

  • test

  • test

  • test

  • test



  • Ed Seedhouse
    Ed Seedhouse's picture
    Offline
    Guru
    Victoria British Columbia
    Last seen: 46 weeks 3 days ago
    Victoria British Columbia
    Timezone: GMT-8
    Joined: 2005-12-14
    Posts: 3570
    Points: 675

    Start by getting your html

    Start by getting your html valid. The doctype declaration must always be on the very first line of the file, for instance. There is no CSS standard for invalid code, so until you fix that you have no justification for a complaint.

    Ed Seedhouse

    Posting Guidelines

    Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    re:

    Yeah I noticed that after I pasted the code. Yeah ok I'll do that np but about the problem itself, why isnt the code working?

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 9 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    le007 wrote:Yeah I noticed

    le007 wrote:
    Yeah I noticed that after I pasted the code. Yeah ok I'll do that np but about the problem itself, why isnt the code working?

    Fix the HTML errors, then see if it's still broken.

    Verschwindende wrote:
    • CSS doesn't make pies

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    re:

    ul#navlist {
    white-space: nowrap;
    font-family: arial;
    font-size:12px;
    font-style:strong;
    }
    #navlist li {
    display: inline;
    list-style-type: none;
    float: left;
    margin-right: 2px;
    }
    #navlist a {
    padding: 0 11px;
    height: 4em;
    line-height: 2em;
    margin: 0 0 4px;
    background-color: #99FFFF;
    color: #2689BC;
    text-decoration: none;
    }
    #navlist a:hover {
    margin-top: 60;
    color: #fff;
    background-color: #369;
    text-decoration: underline;
    margin: 4px 0 0;
    }

    HOME

  • test
  • test
  • test
  • test
  • test
  • test
  • Its still not working in FF, it works fine in IE. The hovered

  • is meant to move down 4px
  • Hugo
    Hugo's picture
    Offline
    Moderator
    London
    Last seen: 4 years 40 weeks ago
    London
    Joined: 2004-06-06
    Posts: 15668
    Points: 2806

    60

    60 what?

    Onions?

    Bricks?

    Yards?

    Blades of grass?

    Valadating, in this case CSS, as well as markup would pick up these errors.

    Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
    ----------------------------------------------------------------
    Please post ALL your code - both CSS & HTML - in [code] tags
    Please validate and ensure you have included a full Doctype before posting.
    Why validate? Read Me

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    huh?

    60? Wat u on about? Can anyone help solve this problem pls and not just throw random quotes at me! Thanks

    demonz_web
    demonz_web's picture
    Offline
    newbie
    Sydney
    Last seen: 12 years 2 weeks ago
    Sydney
    Joined: 2007-08-13
    Posts: 5
    Points: 0

    #navlist a:hover

    #navlist a:hover {
    margin-top: 60;
    color: #fff;
    background-color: #369;
    text-decoration: underline;
    margin: 4px 0 0;
    }

    Here you are trying to handle the 4px with a margin (correct me if I have misunderstood). You could try using -

    margin-top:4px;

    OR

    padding-top:4px;

    I would tend to go for the latter since IE handles margins slightly differently to Firefox. Also, it might help if you simply gave your li elements a class and targeted that.

    gary.turner
    gary.turner's picture
    Offline
    Moderator
    Dallas
    Last seen: 12 hours 11 min ago
    Dallas
    Timezone: GMT-5
    Joined: 2004-06-25
    Posts: 9743
    Points: 3822

    le007 wrote:60? Wat u on

    le007 wrote:
    60? Wat u on about? Can anyone help solve this problem pls and not just throw random quotes at me! Thanks

    It's not exactly random. Look at the code you posted.
    #navlist a:hover {
    margin-top: 60;
    color: #fff;
    background-color: #369;
    text-decoration: underline;
    margin: 4px 0 0;
    }

    First, except for the line-height property, numeric values require a unit reference. Thus, cabbages? Plus, we do kinda expect that you would have checked your code for validity before posting.

    Second, you have conflicting rulesets. {margin-top: 60whatever;} is overruled by {margin: 4px 0 0;}.

    Third, IE does it wrong. An inline element does not have top or bottom margins.

    cheers,

    gary

    If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

    incauncalator
    incauncalator's picture
    Offline
    Regular
    Timisoara, Romania
    Last seen: 11 years 41 weeks ago
    Timisoara, Romania
    Joined: 2007-10-03
    Posts: 27
    Points: 0

    Some changes!

    maybe this code will help you:

    Test

    #nav ul {
    white-space: nowrap;
    font-family: arial;
    font-size:12px;
    list-style:none;
    }
    #nav li {
    float: left;
    margin-right: 2px;
    }
    #nav a, #nav .active {
    padding: 0 11px;
    height: 4em;
    float:left;
    line-height: 2em;
    margin: 0 0 4px;
    background-color: #000000;
    color: white;
    text-decoration: none;
    }
    #nav a:hover {
    margin-top: 60;
    color: #fff;
    background-color: #369;
    margin: 4px 0 0;
    }
    #nav .active {
    background: #369;
    margin: 0 2px 0 0;
    }

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    RE:

    incauncalator THANK YOU SO MUCH!!!

    Its working fine now in IE and FF, welcome to css creator!
    (Thanks to other contributors)
    SOLVED
    Leo

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 9 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Your CSS is still invalid,

    Your CSS is still invalid, though.

    Verschwindende wrote:
    • CSS doesn't make pies

    incauncalator
    incauncalator's picture
    Offline
    Regular
    Timisoara, Romania
    Last seen: 11 years 41 weeks ago
    Timisoara, Romania
    Joined: 2007-10-03
    Posts: 27
    Points: 0

    Minor changes to validate!

    change this:

    #nav a:hover { margin-top: 60; color: #fff; background-color: #369; margin: 4px 0 0; }

    into this:

    #nav a:hover { color: #fff; background-color: #369; margin: 60px 4px 0 0; }

    and will validate!

    sorry, I didn't noticed!

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    Cool, I have done and it

    Cool, I have done and it still works fine and is now valid! Sweet as a monkey!

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    re:

    1 last question? How do I take out the active part so it doesn't have home or whatever is active constantly highlighted?

    Thanks

    incauncalator
    incauncalator's picture
    Offline
    Regular
    Timisoara, Romania
    Last seen: 11 years 41 weeks ago
    Timisoara, Romania
    Joined: 2007-10-03
    Posts: 27
    Points: 0

    Just remove class="active"

    Just remove class="active" and add hyperlink tag to your text (Home); If you need a part from your menu to be active just add a "active" class to it!

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    re:

    Perfecto! Thanks again incauncalator

    thepineapplehead
    thepineapplehead's picture
    Offline
    Guru
    Last seen: 1 year 9 weeks ago
    Timezone: GMT+1
    Joined: 2004-06-30
    Posts: 9668
    Points: 801

    Cheers And le007, thanks

    Cheers Laughing out loud And le007, thanks for letting us know it's fixed!

    Verschwindende wrote:
    • CSS doesn't make pies

    le007
    le007's picture
    Offline
    Enthusiast
    Last seen: 10 years 24 weeks ago
    Joined: 2006-10-08
    Posts: 160
    Points: 0

    re:

    Too easy, thx

    incauncalator
    incauncalator's picture
    Offline
    Regular
    Timisoara, Romania
    Last seen: 11 years 41 weeks ago
    Timisoara, Romania
    Joined: 2007-10-03
    Posts: 27
    Points: 0

    welcome and good css!

    welcome and good css!