9 Replies - 1276 Views - Last Post: 02 June 2011 - 01:19 AM

#1 Imperial   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 13-March 11

Navbar hover not extending to edges

Posted 31 May 2011 - 06:32 PM

Hi guys. I'm having some trouble with the navbar on my site.

http://www.mdmalaska.com/test/

I have the colors all panned out the way I want them to be, but the last 5 hover images have a 4 or 5 pixel gap in between the divider and the actual background image and I can not figure out why.

HTML:
<div id="navbar">
<span class='contenttext'>
<ul>
<li class='homelink'><img class ="navbarimg" src="images/navbardivider.png" width="2" height="30"><a href="#"><img class='navbarimg' src="images/home.png" width="100" height="34"></a><img src="images/navbardivider.png" width="2" height="30"></li>
<li class='presentationlink'><a href="#"><img class='navbarimg' src="images/presentations.png" width="150" height="34"></a><img class ="navbarimg" src="images/navbardivider.png" width="2" height="30"></li>
<li class='weblink'><a href="#"><img class='navbarimg' src="images/web.png" width="100" height="34"></a><img class ="navbarimg" src="images/navbardivider.png" width="2" height="30"></li>
<li class='videolink'><a href="#"><img class='navbarimg' src="images/video.png" width="100" height="34"></a><img class ="navbarimg" src="images/navbardivider.png" width="2" height="30"></li>
<li class='graphicslink'><a href='#'><img class='navbarimg' src='images/graphics.png' width='125' height ='34'></a><img class ="navbarimg" src="images/navbardivider.png" width="2" height="30"></li>
<li class='contactlink'><a href='#'><img class='navbarimg' src='images/contact.png' width='100' height ='34'></a><img class ="navbarimg" src="images/navbardivider.png" width="2" height="30"></li>
</ul>
</span>
</div>



CSS:
/* Navbar */ 


#navbar ul 
{ 
        margin-bottom: 0px; 
        padding: 0px; 
        list-style-type: none; 
        text-align: center; 
        background: url(images/bg-navbar.png);
		height: 34px;
		-moz-border-radius-topleft: 10px;
        -webkit-border-top-left-radius: 10px;
		-moz-border-radius-topright: 10px;
        -webkit-border-top-right-radius: 10px;
} 
 
#navbar ul li 
{  
        display: inline;
		margin: 0;
		height: 34px;
} 
 
#navbar ul li a 
{ 
        text-decoration: none; 
        padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 20px;
		padding-right: 20px;
        color: #fff;  
		margin: 0;
		height: 34px;
		display:inline-block;
} 

#navbar ul li.homelink a:hover 
{  
        background: url(images/bg-navbarred.png);
		margin: 0;
		height: 34px;
}

#navbar ul li.presentationlink a:hover 
{  
        background: url(images/bg-navbarorange.png);
		margin: 0;
		height: 34px;
}

#navbar ul li.weblink a:hover 
{  
        background: url(images/bg-navbaryellow.png);
		margin: 0;
		height: 34px;
}

#navbar ul li.videolink a:hover 
{  
        background: url(images/bg-navbargreen.png);
		margin: 0;
		height: 34px;
}

#navbar ul li.graphicslink a:hover 
{  
        background: url(images/bg-navbarblue.png);
		margin: 0;
		height: 34px;
}

#navbar ul li.contactlink a:hover 
{  
        background: url(images/bg-navbarpurple.png);
		margin: 0;
		height: 34px;
}

.navbarimg
{
	border: 0;
	margin: 0;
	padding: 0px;
	height: 34px;
}

/* End Navbar*/



Thanks in advance. :)

This post has been edited by Imperial: 31 May 2011 - 06:33 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Navbar hover not extending to edges

#2 scentauri   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 64
  • Joined: 16-February 11

Re: Navbar hover not extending to edges

Posted 31 May 2011 - 10:05 PM

You have

padding-left: 20px;
padding-right: 20px;

on #navbar ul li a

Could that be the problem?

Sorry, I didn't see the link to the website.

This post has been edited by scentauri: 31 May 2011 - 10:22 PM

Was This Post Helpful? 0
  • +
  • -

#3 scentauri   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 64
  • Joined: 16-February 11

Re: Navbar hover not extending to edges

Posted 31 May 2011 - 10:31 PM

I believe the problem lies in the fact that the separators begin in a new <li> and there are spaces between the elements. The solution I've come up with is:

#navbar ul li
{
display: inline;
margin: 0;
margin-right:-3px; /* takes the spaces away.
height: 34px;
}

I don't know if that's good practice though, I haven't been doing this for very long.

This post has been edited by scentauri: 31 May 2011 - 10:32 PM

Was This Post Helpful? 0
  • +
  • -

#4 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Navbar hover not extending to edges

Posted 01 June 2011 - 02:25 AM

For the navdivider you need to set of a margin. Create a class for your navdivder and in CSS, put:
.nameofclass {
     margin: 0;
}

Was This Post Helpful? 0
  • +
  • -

#5 Imperial   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 13-March 11

Re: Navbar hover not extending to edges

Posted 01 June 2011 - 02:29 PM

View PostEnvXOwner, on 01 June 2011 - 02:25 AM, said:

For the navdivider you need to set of a margin. Create a class for your navdivder and in CSS, put:
.nameofclass {
     margin: 0;
}

I added a class for the divider images but I'm still getting the space.
Was This Post Helpful? 0
  • +
  • -

#6 EnvXOwner   User is offline

  • D.I.C Lover
  • member icon

Reputation: 358
  • View blog
  • Posts: 2,319
  • Joined: 10-August 09

Re: Navbar hover not extending to edges

Posted 01 June 2011 - 02:34 PM

One thing I do notice is that for the class homelink is that you have two dividers, whereas on every other one you have one. Also when I visit your website, and you hover over the graphics item no gradient appears (I assume there should)
Was This Post Helpful? 0
  • +
  • -

#7 scentauri   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 64
  • Joined: 16-February 11

Re: Navbar hover not extending to edges

Posted 01 June 2011 - 02:44 PM

It's not a margin problem with the divider. If it was a margin problem the first image would also have problem, and you'd have the problem on both sides of your dividers.

Even though your <ul> is set to inline, it leaves a space between each <li> element. It's a known fact that inline elements can still leave spaces between elements. The only way I know of to get rid of the problem is to use a negative integer when specifying the right margin for <li>.

In your code you have <ul><li>divider.image.divider</li>then for each other <li> you have <li>image.divider</li>.

That's my solution, unless someone else wants to post another solution to get rid of the inline gap. I don't know if there is one.

View PostImperial, on 01 June 2011 - 02:29 PM, said:

View PostEnvXOwner, on 01 June 2011 - 02:25 AM, said:

For the navdivider you need to set of a margin. Create a class for your navdivder and in CSS, put:
.nameofclass {
     margin: 0;
}

I added a class for the divider images but I'm still getting the space.

Was This Post Helpful? 0
  • +
  • -

#8 scentauri   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 64
  • Joined: 16-February 11

Re: Navbar hover not extending to edges

Posted 01 June 2011 - 03:10 PM

You can make this change:

#navbar ul li 
{  
        display: block; /* change from inline to block */
		margin: 0;
                   float:left; /* floats each element to the left to arrange it in order horizontally */
		height: 34px;
}



include

#navbar ul 
{ 

margin: 0 auto;

} 

to center the navigation menu horizontally.

Mod Edit:
:code:!
Was This Post Helpful? 0
  • +
  • -

#9 scentauri   User is offline

  • D.I.C Head

Reputation: 5
  • View blog
  • Posts: 64
  • Joined: 16-February 11

Re: Navbar hover not extending to edges

Posted 01 June 2011 - 09:49 PM

Sorry if I have been posting too much, or if I misled you in anyway with my prior posts.

I found out a solution to your problem while debugging your page with the web developer add-on in firefox. If you remove the white space between each <li></li> tags it will remove your spacing problems. It seems that inline-block elements renders white space as an extra pixel on the screen, thus causing the spacing problem.

I hope that helps.
Was This Post Helpful? 1
  • +
  • -

#10 Imperial   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 13-March 11

Re: Navbar hover not extending to edges

Posted 02 June 2011 - 01:19 AM

View Postscentauri, on 01 June 2011 - 09:49 PM, said:

Sorry if I have been posting too much, or if I misled you in anyway with my prior posts.

I found out a solution to your problem while debugging your page with the web developer add-on in firefox. If you remove the white space between each <li></li> tags it will remove your spacing problems. It seems that inline-block elements renders white space as an extra pixel on the screen, thus causing the spacing problem.

I hope that helps.

That last one got it working. Thanks a lot :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1