Need Help Top Nav background image is cut off

  • AlvinMedia
  • Born
  • Born
  • AlvinMedia
  • Posts: 1

Post 3+ Months Ago

Hi,

I'm working on a top navigation created in CSS. I created a 2 tab background images. One for the off state and one for hover state.

On some of the tabs part of the background image has been cut off vertically. The cut off doesn't occur when the text is put on 2 lines. How do I make the background images a fixed size.

Here is the css code and I attached an image.

Thanks,
Attachments:
Screen shot 2011-08-24 at 4.02.41 PM.png

CSS Code: [ Select ]
@charset "UTF-8";
/* CSS Document */
 
/*body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 13px;
color: #00136c;
}*/
 
#nav{  
  width:100%;  
  height:100%;  
  background: url(images/topnav_nohover.png) no-repeat left top;
  }
 
#nav {
   width: 100%;
   height: 100%;
   float: left;
   margin: 0 0 3em 0;
   padding: 0;
   list-style: none;
   background: url(images/topnav_hover.png) no-repeat left top;
   border-bottom: 2px solid #00136c;
   border-top: none;
   }
   
#nav li {
   float: left;
   width: 95px;
   height: 40px;
}
   
#nav li a {
   display: block;
   padding: 5px 15px;
   text-decoration: none;
   font-weight: none;
   font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size: 13px;
   text-align: center;
   border-right: 1px solid #fff;
   border-bottom: none;
   background:url(images/topnav_nohover.png) no-repeat left top;
   padding-bottom:none;
   }
   
#nav li a:hover {
   border-bottom:none;
   border-left:0px;
   border-right:0px;
   border-top:0px;
   color:#fff;
   display:block;
   font-family:Arial, Helvetica, Sans-Serif;
   font-size:13px;
   padding: 5px 15px;
   text-decoration:none;
   background-image:url(images/topnav_hover.png);
   }
   
   /*div:hover { background:url(/images/stuff.gif) }
  1. @charset "UTF-8";
  2. /* CSS Document */
  3.  
  4. /*body {
  5. font-family: Arial, Verdana, Helvetica, sans-serif;
  6. font-size: 13px;
  7. color: #00136c;
  8. }*/
  9.  
  10. #nav{  
  11.   width:100%;  
  12.   height:100%;  
  13.   background: url(images/topnav_nohover.png) no-repeat left top;
  14.   }
  15.  
  16. #nav {
  17.    width: 100%;
  18.    height: 100%;
  19.    float: left;
  20.    margin: 0 0 3em 0;
  21.    padding: 0;
  22.    list-style: none;
  23.    background: url(images/topnav_hover.png) no-repeat left top;
  24.    border-bottom: 2px solid #00136c;
  25.    border-top: none;
  26.    }
  27.    
  28. #nav li {
  29.    float: left;
  30.    width: 95px;
  31.    height: 40px;
  32. }
  33.    
  34. #nav li a {
  35.    display: block;
  36.    padding: 5px 15px;
  37.    text-decoration: none;
  38.    font-weight: none;
  39.    font-family: Arial, Verdana, Helvetica, sans-serif;
  40.    font-size: 13px;
  41.    text-align: center;
  42.    border-right: 1px solid #fff;
  43.    border-bottom: none;
  44.    background:url(images/topnav_nohover.png) no-repeat left top;
  45.    padding-bottom:none;
  46.    }
  47.    
  48. #nav li a:hover {
  49.    border-bottom:none;
  50.    border-left:0px;
  51.    border-right:0px;
  52.    border-top:0px;
  53.    color:#fff;
  54.    display:block;
  55.    font-family:Arial, Helvetica, Sans-Serif;
  56.    font-size:13px;
  57.    padding: 5px 15px;
  58.    text-decoration:none;
  59.    background-image:url(images/topnav_hover.png);
  60.    }
  61.    
  62.    /*div:hover { background:url(/images/stuff.gif) }
Moderator Remark: Added the [css][/css] bbcode around the CSS. Please remember to use bbcode on any code you post. Thanks!
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • sherma
  • Silver Member
  • Silver Member
  • User avatar
  • Posts: 127

Post 3+ Months Ago

Hi, hopefully someone who knows what they're doing will be along soon to figure it out, but without looking at the actual code you're using to call this from the style sheet, I personally, can't tell.

I would ask though what size the images are? I mean are they (ex: 150px X 150px and just not fully revealing without the second line of content, or are they smaller graphics that are designed to repeat x,y as needed?

My only other question is does this happen in all browsers or only certain ones like IE? (good luck!)
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Posts: 9088
  • Loc: Seattle, WA & Phoenix, AZ

Post 3+ Months Ago

Little late at responding, hopefully you already figurd it out. I believe all you need to do to fix this is set a min-height on the #nav li a block. So add something like:

CSS Code: [ Select ]
#nav li a {
   min-height:50px;
}
  1. #nav li a {
  2.    min-height:50px;
  3. }


You could also just set a fixed height as well. I believe this is probably the only reason that the background is not showing. Let us know if this helped.
  • Peepsmam
  • Born
  • Born
  • Peepsmam
  • Posts: 1

Post 3+ Months Ago

Try making your top margin a negative integer. Worked for me.

ie:

margin-top: -20px;

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 40 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.