SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Problem menu

  1. #1
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem menu

    Hello everyone,
    I am stuck with a little problem.
    I am trying to give every link in the menu an other roll over color (a:hover), first time trying but it isn't working?
    Code HTML4Strict:
    <title>Menu List</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /*<![CDATA[*/
    <!--
    .margin {
    	margin-left: auto;
    	margin-right: auto;
    }
    ul#navigation {
    	padding: 0;
    	margin-top: 0;
    	margin-left: 45px;
    	color: #fff;
    	float: left;
    	width: 100%;
    }
    ul#navigation li {
    	display: inline;
    }
    ul#navigation li a {
    	padding: .25em 1em;
    	text-decoration: none;
    	float: left;
    }
     
    #bottom {
    	height: 120px;
    	width:  853px;
    	background-image: url(images/bottom.gif);
    }
    #menu1 {width: 86px;}
    #menu2 {width: 94px;}
    #menu3 {width: 97px;}
    #menu4 {width: 98px;}
    #menu4 {width: 90px;}
    li#menu1 a:hover {
    	text-decoration: none;
    	color: #FFFFFF;
    }
     
    -->
        /*]]>*/
    </style>
    </head>
    <body>
    <div class="margin" id="bottom">
      <ul id="navigation">
        <li><a href="#" id="menu1">item1</a></li>
        <li><a href="#" id="menu2">item2</a></li>
        <li><a href="#" id="menu3">item3</a></li>
        <li><a href="#" id="menu4">item4</a></li>
        <li><a href="#" id="menu5">item5</a></li>
     
      </ul>
    </div>
    </body>
    </html>

    Is this how it should be done?
    li#menu1 a:hover {
    text-decoration: none;
    color: #FFFFFF;
    }
    Thanks in advance

  2. #2
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'd probably do it like this

    CSS
    Code:
    #menu1 a:hover {
        text-decoration: none;
        color: #FFFFFF;
    }
    HTML
    Code:
    <li id="menu1"><a href="#">item1</a></li>

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2007
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK that all went well. And now i have the ever lasting ie margin problem.

    What does everyone here use against this? It looks good in mozilla but not in ie

  4. #4
    SitePoint Wizard bronze trophy DaveWoods's Avatar
    Join Date
    Dec 2004
    Location
    Derbyshire - UK
    Posts
    2,651
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure which margin problem you're talking about?

    I always start my stylesheets off using

    Code:
    * {
     padding: 0px;
     margin: 0px;
    }
    which will remove the padding and margin from all elements so that you aren't relying on the browsers default which varies across browsers.

    If you're talking about the double margin bug in IE6 when applying floats, then using display: inline at the end of the style with the problem should fix that issue.

    Hope that helps.


Bookmarks

Posting Permissions

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