Member Avatar for pckong

Hello all,

I have some problems using Horizontal Menu Bar alignment or padding.
There is extra white stuffs in the edge of the manu items I dont know why.
There is the link to the website,

The other link is the orginal view when I did not add the Horizontal Menu Bar in.

Sincerely thanks for anyone who are trying to help.

Pete

  • 3 Contributors
  • 4 Replies
  • 126 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by ko ko

Dani AI

Generated

The white "seam" at the edges of a horizontal menu/dropdown is almost always a layout/painting issue rather than a missing image. 's custom rule fixed one symptom but created another; 's suggestion to use absolute positioning is the right direction; and 's observation that Firefox showed no problem points to browser-dependent rounding/painting differences.

Practical checklist to find and remove the gap:

  • Inspect computed boxes with the browser devtools (turn on element outlines or temporarily add 1px contrasting borders) to see which box (parent LI, the A, or the UL) has the gap.
  • Avoid fixed pixel offsets that depend on a calculated menu height; position submenus relative to the parent using percentage-based positioning so the submenu sits exactly below the parent even if fonts/line-heights change.
  • Watch for fractional-pixel rounding and compositing differences (common in WebKit/Blink). Promoting the submenu to its own layer or using consistent box-sizing and background clipping often removes the hairline seam.
  • Temporarily remove non-essential visual effects (box-shadow, outline, border) to see if those are the visible edge.

Minimal CSS pattern to try (does not replicate the site code posted in the thread):

/* make submenu sit exactly below its parent and include padding/border in width */
#nav li { position: relative; }
#nav li > ul { position: absolute; top: 100%; left: 0; margin: 0; padding: 0; box-sizing: border-box; background-clip: padding-box; }

/* reduce hairline painting differences in some engines */
#nav li > ul { transform: translateZ(0); }

Accessibility note: do not drop focus outlines without replacing them with a visible focus style for keyboard users.

Further reading on positioning and box-model behavior: position on MDN and box-sizing on MDN.

Recommended Answers

All 4 Replies

Member Avatar for ko ko

You should set pop-up menu 'display: absolute;' and set top: ' ' from parent height.

Member Avatar for pckong

Hello, I dont quite get know where I should change the pop-up menu. There is a custom setting in the css file to solve the extra white edge problem, but then I get into the other problem.
the custom setting, which is credited to Richard Williams, is as follow,

#wrapper #header #nav #MenuBar2 .MenuBarSubmenuVisible a {
display: block;
cursor: pointer;
background-color: #F0F9FF;
color: #666666;
text-decoration: none;
font-size: 11px;
padding: 0.5em 0.75em;

}

#wrapper #header #nav #MenuBar2 .MenuBarSubmenuVisible a:hover {
background-color: #33C;
color: #FFF;
}

Any suggestions?

Member Avatar for Member #360561

I have some problems using Horizontal Menu Bar alignment or padding.

To me the two look identical except the menu in the test version is a little narrower. There's no extra white space.

This could be browser dependent. I use FireFox 3.0.

Member Avatar for ko ko

OK Let try this.

CSS:

*html {
background: #373737; height: 100% }
body {
background: #373737; font: normal 100% Arial,Verdana,Lucida Grande,Sans-serif }
ul, li {
margin: 0; padding: 0; list-style: none }
html a {
text-decoration: none; color: #EEEEEE }
p {
margin: 0; padding: 0 }

/* Container */

body > #container {
width: 878px; margin: 0 auto; padding: 42px 0 87px; background: white; line-height: 100%; position: relative }
#container:after {
content: '.'; height: 0; display: block; clear: both; visibility: hidden }
#container > p {
text-align: center; border-bottom: 1px solid #111111; margin: 0 20%; padding-bottom: 7pt }

/* Primary Navigation Menu Bar */

ul#nav-menu {
width: 687px; height: 33px; line-height: 33px; display: table; background: #111111; position: absolute; top: 0; left: 0 }
ul#nav-menu li {
display: table-cell; float: left; vertical-align: baseline; position: relative }
ul#nav-menu a {
display: block; float: none ! important; padding: 0 22px; height: 33px; line-height: 33px }

/* Primary Hover Link */

ul#nav-menu li a:hover, ul#nav-menu li:hover a {
color: #373737 }
ul#nav-menu li.last {
border-bottom: none }


/* Sub Menu */

ul#nav-menu ul {
display: none; width: 147px; position: absolute; top: 33px; left: 0; border-style: none solid; border-width: 1px; border-color: #111111 }
ul#nav-menu ul:after {
content: '.'; height: 0; clear: both; display: block; visibility: hidden }
ul#nav-menu ul li {
display: block; float: left; width: 147px }

/* Secondary Link */

ul#nav-menu li:hover li a {
background: #111111; color: #CCCCCC; text-align: center }
ul#nav-menu li:hover li a:hover, ul#nav-menu li:hover li:hover a {
background: #1a1a1a; color: #EEEEEE }

/* Third Link */

ul#nav-menu li:hover li:hover li a {
background: #111111; color: #CCCCCC }
ul#nav-menu li:hover li:hover li a:hover, ul#nav-menu li:hover li:hover li:hover a {
background: #1a1a1a; color: #EEEEEE }


/* After Secondary */

ul#nav-menu li:hover ul ul {
position: absolute; top: 0; left: 147px; display: none }


/* Show Sub Menu by Hover */

ul#nav-menu li:hover ul, ul#nav-menu ul li:hover ul {
display: block }

/* Sub Menu Box Shadow */

ul#nav-menu ul {
-webkit-box-shadow: 7px 3px 8px #888; outline: none }

Here is HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html>
<head>
<title></title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>

 <div id="container">	

	 <ul id="nav-menu">
   		<li><a href="#">Item 1</a></li>
   		<li><a href="#">Item 2</a>
			<ul><li><a href="#">Item 2-1</a></li>
	    		    <li><a href="#">Item 2-2</a></li>
 	    		    <li><a href="#">Item 2-3</a></li>
			</ul>
   		</li>
   		<li><a href="#">Item 3</a>
			<ul><li><a href="#">Item 3-1</a>
				<ul><li><a href="#">Item 3-1a</a></li>
				    <li><a href="#">Item 3-1b</a></li>
				</ul>
			    </li>
			    <li><a href="#">Item 3-2</a></li>
			</ul>
		</li>
   		<li><a href="#">Item 4</a></li>
   		<li><a href="#">Item 5</a></li>
   		<li><a href="#">Item 6</a></li>
 	</ul>

  <p>Horizontal Menu</p>
 </div>
</body>
</html>

Have fun..

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.