PDA

Click to See Complete Forum and Search --> : extra space to the right of ea. <li> in navigation menu

rbragg
07-19-2007, 03:54 PM
<style type="text/css">
<!--
#nav ul { margin:0px; padding:0px; }
#nav li { display:inline; }

#nav a:link, #nav a:visited {
background-color:#DF3500;
font-family:arial, verdana, helvetica; font-size:10px; font-weight:bold; color:#FFFFFF; text-decoration:none;
padding:4px 4px 2px 6px;
border-left:1px solid #C9151B;
}
#nav a:hover { background:#EF4200; color:#FFFFFF; border-left:1px solid #C9151B; }
#nav #active a { background:#EF4200; color:#FFFFFF; border-left:1px solid #C9151B; }
-->
</style>

Why would I have this extra space to the right upon hovering? In the example below, I am hovering on "add a call":
LeeU
07-19-2007, 04:36 PM
Could we get a link to see the rest of page?
rbragg
07-19-2007, 04:40 PM
Well, no, because it is a secure login. :( It's communicating with a database. Do you mean you want a link to the stylesheet?
LeeU
07-19-2007, 04:45 PM
It would help to see the rest of the code on the page.
rbragg
07-19-2007, 04:49 PM
Ok, here it is as generic as possible:

<body>
<div id="container">

<div id="top">
<div id="menu" align="right"><? include 'nav.htm'; ?></div>
<div id="page">Result: </div>
</div>

<div id="left_col">
<img src="images/vigil_small.jpg" />
</div> <!-- close left column div -->

<div id="form">
<p class="style5">You have successfully signed out!</p>
<p class='style1'>Please wait while you are redirected ...</p>
</div>
<!-- close form div -->

</div> <!-- close container div -->

</body>

Here is nav.htm:

<div id='nav'>
<ul>
<li><a href='displayAll.php'>display all calls</a></li>
<li><a href='addCall.php'>add a call</a></li>
<li><a href='news.php'>news</a></li>
<li><a href='signout.php'>sign out</a></li>
</ul>
</div>
Centauri
07-19-2007, 05:12 PM
What extra space are you talking about? - your screenshot looks fine to me.
WebJoel
07-19-2007, 06:12 PM
Google "IE white-space bug" on navigation lists... There is a problem specific to 'virtual line returns' on <li> that have a 'whitespace' after the "</li>" and before the next opening "<li>".

There are several ways to cure this... some, ugly. Some, elegant.
rbragg
07-19-2007, 10:41 PM
What extra space are you talking about? - your screenshot looks fine to me.
Hi! Maybe the color variation is hard to see on some screens. The menu is a dark orange color. Upon rollover, the list item turns a lighter orange. If you look to the right of "add a call", you can see that the light orange does not extend all the way to the border.
rbragg
07-19-2007, 10:43 PM
WebJoel, thanks for the tip. I'll be researching this first thing tomorrow. ;)
Centauri
07-19-2007, 11:52 PM
float:left on the <a> tags will probably fix the problem
rbragg
07-20-2007, 11:53 AM
float:left on the <a> tags will probably fix the problemGood day! I added this and after much tampering with other div styles I was able to get it positioned just right. Thanks! :D