Trouble positioning link – CSS

  • bennyb

    (@bennyb)


    20 years, 12 months ago

    I’m trying to setup a top navigation area for my website with some simple links in the header, with my graphic as the background. I’m having some trouble and could use some guidance. If I’m going about this the wrong way, feel free to let me know, as I’m pretty new at this stuff.

    The relevant portion of my xhtml header:

    <h1 id=”header”>
    Page 1
    Page 2
    </h1>

    The CSS for the Header:

    #header {
    height:59px;
    background:#ffffff; /*eeeeee*/
    background-image: url(“redlogo.gif”);
    color: #333333;
    border-bottom: solid 1px black;
    margin-top:0px;
    margin-right:0px;
    margin-bottom:10px;
    margin-top:0px;
    text-align:right;
    }

    And the header links:

    #header a {
    display:inline;
    line-height:90px;
    color:#FFFFFF;
    font-size:12px;
    font-family:verdana, arial, sans-serif;
    text-decoration:none;
    overflow:hidden;
    }

    The full source can be seen here:

    http://www.benbailey.net/blog/wp-co…assic/style.css

    In the latest version of Firefox, this looks good, as far as where I want the line of links to

    be vertically. In IE 6 though, it puts it near the bottom of the graphic and then repeats the

    graphic again. If I change the line height to something smaller to make the header the right

    vertical size, the text is in the middle of the graphic in both browsers.

    Here are screenshots of what I’m seeing.
    http://www.benbailey.net/blog/photo/barinIE.jpg
    http://www.benbailey.net/blog/photo/barinFF.jpg

    Thanks in advance.

Viewing 1 replies (of 1 total)
  • jinsan

    (@jinsan)

    20 years, 12 months ago

    you can probably clean up the code as you have it now, a bit late for me to check everything but as simple rule:

    background-image: url(“redlogo.gif”); set this to

    background-image: url(“redlogo.gif”) no-repeat;

    that’ll stop it from repeating

    http://css.maxdesign.com.au/index.htm

    for navigation lists.

    Also it’s probably a good idea to wrap the header in another div, within that add the style or whatever for the header div, and then add another div for the menu. This should help ease with IE since you’re containing the two divs within another continer which should help when using borders etc.

Viewing 1 replies (of 1 total)

The topic ‘Trouble positioning link – CSS’ is closed to new replies.