SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css - firefox overlays links

    Works great in IE for rollovers but firefox doesn't hold the vertical spacing.
    (declared 'line-height' which doesn't matter)

    Also, does not recognize the background dimension (width: 150px)


    Code:
    .set:link {background: #33CCCC; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: none; font-size: 13px;  font-family: Arial, Helvetica, sans-serif; height:20px; width: 150px;  padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    .set:visited{background: #33CCCC; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: none; font-size: 13px;  font-family: Arial, Helvetica, sans-serif; height:20px; width: 150px;  padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    .set:active {background: #33CCCC; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: none; font-size: 13x; font-family: Arial, Helvetica, sans-serif; height:20px; width: 150px;  padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    .set:hover {background: #A7E9E9 ; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: underline; font-size: 13px;  font-family: Arial, Helvetica, sans-serif;  height:20px; width: 150px; padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    
    
    <a href="spoint.htm" class="set">link1</a><br>
    <a href="spoint.htm" class="set">link2</a><br>
    <a href="spoint.htm" class="set">link3</a><br>
    Must this be done with a <li> or which way?

  2. #2
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by datadriven View Post
    Works great in IE for rollovers but firefox doesn't hold the vertical spacing.
    (declared 'line-height' which doesn't matter)

    Also, does not recognize the background dimension (width: 150px)


    Code:
    .set:link {background: #33CCCC; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: none; font-size: 13px;  font-family: Arial, Helvetica, sans-serif; height:20px; width: 150px;  padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    .set:visited{background: #33CCCC; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: none; font-size: 13px;  font-family: Arial, Helvetica, sans-serif; height:20px; width: 150px;  padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    .set:active {background: #33CCCC; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: none; font-size: 13x; font-family: Arial, Helvetica, sans-serif; height:20px; width: 150px;  padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    .set:hover {background: #A7E9E9 ; color:#FFFFFF; border: 1px solid #FFFFFF; text-decoration: underline; font-size: 13px;  font-family: Arial, Helvetica, sans-serif;  height:20px; width: 150px; padding-left: 10px; padding-top: 5px; padding-right: 5px; padding-bottom: 8px;}
    
    
    <a href="spoint.htm" class="set">link1</a><br>
    <a href="spoint.htm" class="set">link2</a><br>
    <a href="spoint.htm" class="set">link3</a><br>
    Must this be done with a <li> or which way?
    Is this what you want?

    Code CSS:
    a:link {
    	background: #33CCCC; 
    	color:#FFFFFF; 
    	border: 1px solid #FFFFFF; 
    	text-decoration: none; font-size: 13px;  
    	font-family: Arial, Helvetica, sans-serif; 
    	height:20px; 
    	width: 150px;  
    	padding-left: 10px; 
    	padding-top: 5px; 
    	padding-right: 5px; 
    	padding-bottom: 8px; 
    	display:block;}
    a:visited{
        background: #33CCCC; 
    	color:#FFFFFF; 
    	border: 1px solid #FFFFFF; 
    	text-decoration: none; 
    	font-size: 13px;  
    	font-family: Arial, Helvetica, sans-serif; 
    	height:20px; 
    	width: 150px; 
    	padding-left: 10px;
    	padding-top: 5px; 
    	padding-right: 5px; 
    	padding-bottom: 8px;
    	display:block;
    }
    a:active {
    	background: #33CCCC; 
    	color:#FFFFFF; 
    	border: 1px solid #FFFFFF;
    	text-decoration: none; 
    	font-size: 13x; font-family: Arial, Helvetica, sans-serif; 
    	height:20px; 
    	width: 150px;  
    	padding-left: 10px; 
    	padding-top: 5px; 
    	padding-right: 5px; 
    	padding-bottom: 8px;
    	display:block;
    }
    a:hover {
    	background: #A7E9E9 ; 
    	color:#FFFFFF; 
    	border: 1px solid #FFFFFF; 
    	text-decoration: underline; 
    	font-size: 13px;  font-family: Arial, Helvetica, sans-serif;  
    	height:20px; 
    	width: 150px; 
    	padding-left: 10px; 
    	padding-top: 5px; 
    	padding-right: 5px; 
    	padding-bottom: 8px; 
    	display:block;
    }

    Code HTML4Strict:
    <a href="spoint.htm">link1</a><br>
    <a href="spoint.htm">link2</a><br>
    <a href="spoint.htm">link3</a><br>
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by datadriven View Post
    Works great in IE for rollovers but firefox doesn't hold the vertical spacing.
    (declared 'line-height' which doesn't matter)

    Also, does not recognize the background dimension (width: 150px)

    Must this be done with a <li> or which way?
    Hi,
    Actually IE was rendering it the same as FF for me.

    The problem you are having with your code is that anchors are inline elements by default. Inline elements (other than inline-block) can't take on dimensions or vertical margins & paddings as you noticed.

    You don't have to restate every rule over for the pseudo classes, the only ones you need to reset are the ones that change. With your code you only need to address the :hover styles that are different.

    You don't have to use a ul & li but it is the most logical way to make your menus most of the time. The UL gives you a container for the li & a which can be styled and positioned just like a div.

    The block level "li" will also allow you to eliminate the <br> tags you were using to drop each item to a new line.

    Try this -
    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nav Test</title>
     
    <style type="text/css">
    #nav {
        margin:0;
        padding:0;
        list-style:none;
        width:165px;/*150px + "a" side paddings = 165px*/
        border:1px solid #FFF;
        border-bottom:none;
    }
    #nav li,#nav li a {
        display:block; /*fill the ul's entire width*/
    }
    #nav li a {
        height:20px;  
        padding:5px 5px 8px 10px;
        border-bottom:1px solid #FFF; 
        background:#3CC; 
        color:#FFF; 
        text-decoration:none; 
        font-size:13px;  
        font-family:Arial, Helvetica, sans-serif; 
    }
    #nav li a:hover {
        background:#A7E9E9; 
        text-decoration:underline; 
    }
     
    </style>
    </head>
    <body>
     
    <ul id="nav">
        <li><a href="spoint.htm">link1</a></li>
        <li><a href="spoint.htm">link2</a></li>
        <li><a href="spoint.htm">link3</a></li>
    </ul>
     
    </body>
    </html>

  4. #4
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thats it Luki.

    The 'display;block'

    Thanks Rayzur, I'll have to try that. I'm redoing the whole site so whatever makes sense.

  5. #5
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, all of those rules are exactly the same (just from eye scan)

    You can combine them via a comma into one rule.

    Also, the problem of the width not being accepted on the anchor is because hte anchor is an inline element and doesn't accept widths/heights.

    Giving display:block (as Luki did) fixes it . A lot of things fix that though
    Edit:

    Ahh..last tab
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  6. #6
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...is an inline element and doesn't accept widths/heights.
    This being the case, I'm labeling the nav bar with a graphic at the top, and so FF stretches the links below wider than the graphic while IE matches widths between the graphic and links.

    How can this be reconciled?

  7. #7
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I already set the "li" & "a" as blocks in my example. You can hook your BG image to the anchor.

    Set the anchor's height the same as the image height and remove the vertical paddings. Then set your line-height the same as the anchor height to center the text vertically.

    You can set the image's BG repeat as x,y, or no-repeat

  8. #8
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    You can just set the width on the anchors to match that of the image can't you? Provided of course you set display:block (or if you need them on the same line, float:left)
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  9. #9
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't want to stretch the image, since it contains type.
    (trying to keep characters off the page -- seo)

  10. #10
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i assumed the OP would be cleaning his code up in the final stage .... my bad
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  11. #11
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by datadriven View Post
    I don't want to stretch the image, since it contains type.
    (trying to keep characters off the page -- seo)
    Hi,
    You really need to post a link to your page so we can see the images you are working with. Then we can give you the best solution for your situation.

    Just set the anchors width and height the same as the visible part of your images. You should not need to use padding to position text since your images contain type.

    If the text in the html is just for SEO then you can hide it off-screen with text-indent:-999em.

    You will need to give classes or ID's to your anchors so you can hook different BG images on them. You will be better off using the Sprite method so your hover states will be preloaded.

    Sprites are just images that have all states of the anchor in one image. Then it is shifted on hover via background-position.

    Here is a simple example of a vertical sprite nav -
    http://www.css-lab.com/demos/sprites...text-vert.html

    Here is a rough start of how the code would look using sprites and html text hidden off-screen. This assumes that the image is 150px(w) x 45px(h).

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nav Test</title>
     
    <style type="text/css">
    #nav {
        margin:0;
        padding:0;
        list-style:none;
        width:150px;
        border:1px solid #FFF;
        border-bottom:none;
    }
    #nav li, #nav li a {
        display:block;
    }
    #nav li a {
        width:150px; /*image width*/
        height:45px; /*image height*/
        line-height:45px;
        border-bottom:1px solid #FFF;
        color:#FFF;
        text-decoration:none;
        font-size:13px; 
        font-family:Arial, Helvetica, sans-serif;
        text-indent:-999em;/*hide text off screen*/
    }
     
    #a {background:#3CC url(img-1.jpg) no-repeat 0 0;}
    #b {background:#3CC url(img-2.jpg) no-repeat 0 0;}
    #c {background:#3CC url(img-3.jpg) no-repeat 0 0;}
     
    #a:hover {background:red url(img-1.jpg) no-repeat 0 -45px;}
    #b:hover {background:blue url(img-2.jpg) no-repeat 0 -45px;}
    #c:hover {background:lime url(img-3.jpg) no-repeat 0 -45px;}
    </style>
     
    </head>
    <body>
     
    <ul id="nav">
        <li><a id="a" href="spoint.htm">link1</a></li>
        <li><a id="b" href="spoint.htm">link2</a></li>
        <li><a id="c" href="spoint.htm">link3</a></li>
    </ul>
     
    </body>
    </html>

  12. #12
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Been meaning to get back...very much appreciate the posts here, and about the sprites. Will be using these. - Thank you.

  13. #13
    SitePoint Wizard
    Join Date
    May 2002
    Posts
    1,370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Need to ask, since I have many of these, how the double line is treated here for FireFox:
    (maintaining ea line height of 20px)

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Nav Test</title>
     
    <style type="text/css">
    #nav {
        margin:0;
        padding:0;
        list-style:none;
        width:165px;/*150px + "a" side paddings = 165px*/
        border:1px solid #FFF;
        border-bottom:none;
    }
    #nav li,#nav li a {
        display:block; /*fill the ul's entire width*/
    }
    #nav li a {
        height:20px; 
        padding:5px 5px 8px 10px;
        border-bottom:1px solid #FFF;
        background:#3CC;
        color:#FFF;
        text-decoration:none;
        font-size:13px; 
        font-family:Arial, Helvetica, sans-serif;
    }
    #nav li a:hover {
        background:#A7E9E9;
        text-decoration:underline;
    }
     
    </style>
    </head>
    <body>
     
    <ul id="nav">
        <li><a href="spoint.htm">link1</a></li>
        <li><a href="spoint.htm">link2</a></li>
        <li><a href="spoint.htm">link3</a></li>
    </ul>
     
    </body>
    </html>
    Especially if the id is declared in <ul>
    For double line, must ea line css be declared if each line in the list is not the same>


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
  •