Solved

CSS UL LI Issue

Posted on 2011-03-01
4
278 Views
Last Modified: 2012-05-11
Can someone help me fix a CSS issue I have with my UL/LI. I have attached a couple screenshots showing the issue and current styles.  Notice the  blue box outlining "Product" button.  It shows up when I click on one of the buttons.  I have javascript on the page that displays a drop down menu when I hover over the buttons.  The browser is recognizing the extra spacing above and below, so when I hover in the extra spacing the drop down menu shows up.  I only want the hover over functionality to work when I roll over the buttons.  

Thanks for any help given...
 screenshot css
0
Comment
Question by:obautista
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
4 Comments
 
LVL 9

Accepted Solution

by:
CCSOFlag earned 500 total points
ID: 35008491
try giving your global_nav div the height of the graphics you are using as your links.  It's hard to tell for sure without you posting your code.  Could you post the html and css for this whole section?
0
 

Author Comment

by:obautista
ID: 35008624
Thanks.  I have attached code and css...
<div class="grid_16" id="sys-globalNavContainer">
	<br />
	<div id="ctl00_g_c30a3b67_3841_4718_8a60_b6b9f8ebec49" __MarkupType="vsattributemarkup" __WebPartId="{c30a3b67-3841-4718-8a60-b6b9f8ebec49}" WebPart="true" partorder="2">
	<div id="global_nav">
		<ul>
			<li id="ProductsGlobalNav"><a href="#" title="nav-product" id="ProductsTab" class="main_item with_subnav">Products</a><div class="outerwrapper1">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Productsdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="Services-SupportGlobalNav"><a href="#" title="nav-support" id="Services-SupportTab" class="main_item with_subnav">Services-Support</a><div class="outerwrapper2">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Services-Supportdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="EducationGlobalNav"><a href="#" title="nav-education" id="EducationTab" class="main_item with_subnav">Education</a><div class="outerwrapper3">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Educationdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="CareersGlobalNav"><a href="#" title="nav-careers" id="CareersTab" class="main_item with_subnav">Careers</a><div class="outerwrapper4">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Careersdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="ContactusGlobalNav"><a href="#" title="nav-contactus" id="ContactusTab" class="main_item with_subnav">Contactus</a><div class="outerwrapper5">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Contactusdiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li><li id="CompanyGlobalNav"><a href="#" title="nav-company" id="CompanyTab" class="main_item with_subnav">Company</a><div class="outerwrapper6">
				<div class="subnav_container">
					<table width="960px" border="0px" cellspacing="0px" cellpadding="0px">
						<tr cellspacing="0px" cellpadding="0px">
							<td><div class="subnav_content_inner" id="Companydiv">
							</div></td>
						</tr>
					</table>
				</div>
			</div></li>
		</ul>
	</div>

Open in new window

#global_nav .outerwrapper1 {
	POSITION: relative; LEFT: -60px
}
#global_nav .outerwrapper2 {
	POSITION: relative; LEFT: -200px
}
#global_nav .outerwrapper3 {
	POSITION: relative; LEFT: -340px
}
#global_nav .outerwrapper4 {
	POSITION: relative; LEFT: -480px
}
#global_nav .outerwrapper5 {
	POSITION: relative; LEFT: -620px
}
#global_nav .outerwrapper6 {
	POSITION: relative; LEFT: -760px
}
.js #global_nav LI A.with_subnav.main_item {
	BACKGROUND-IMAGE: url(/_layouts/1033/images/SysmexIRPImages/GlobalNav/navimagebeforehover.png); TEXT-ALIGN: center; PADDING-BOTTOM: 20px; LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; PADDING-LEFT: 15px; WIDTH: 120px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; HEIGHT: 50px; COLOR: #ffffff; FONT-SIZE: 10pt; TOP: 20px; FONT-WEIGHT: bold; LIST-STYLE-IMAGE: none; TEXT-DECORATION: none; PADDING-TOP: 32px
}
#global_nav LI A:hover A.with_subnav.main_item {
	BACKGROUND-IMAGE: url(/_layouts/1033/images/SysmexIRPImages/GlobalNav/navimageafterhover.png); TEXT-ALIGN: center; PADDING-BOTTOM: 20px; LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; PADDING-LEFT: 15px; WIDTH: 120px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; HEIGHT: 50px; FONT-SIZE: 10pt; TOP: 20px; FONT-WEIGHT: bold; LIST-STYLE-IMAGE: none; TEXT-DECORATION: none; PADDING-TOP: 32px
}
#global_nav LI.current A.with_subnav.main_item {
	BACKGROUND-IMAGE: url(/_layouts/1033/images/SysmexIRPImages/GlobalNav/navimageafterhover.png); TEXT-ALIGN: center; PADDING-BOTTOM: 20px; LIST-STYLE-TYPE: none; TEXT-INDENT: 0px; PADDING-LEFT: 15px; WIDTH: 120px; PADDING-RIGHT: 15px; DISPLAY: block; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: center 50%; HEIGHT: 50px; FONT-SIZE: 10pt; TOP: 20px; FONT-WEIGHT: bold; LIST-STYLE-IMAGE: none; TEXT-DECORATION: none; PADDING-TOP: 32px
}
#global_nav .subnav_container {
	Z-INDEX: 99; POSITION: absolute; BORDER-RIGHT-WIDTH: 1px; BACKGROUND-COLOR: transparent; MARGIN-TOP: 1px; DISPLAY: none; BORDER-TOP-WIDTH: 1px; BORDER-BOTTOM-WIDTH: 1px; BORDER-LEFT-WIDTH: 1px
}
#global_nav UL {
	LIST-STYLE-TYPE: none; FLOAT: left; LIST-STYLE-IMAGE: none
}
#global_nav LI {
	Z-INDEX: 99; POSITION: relative; LIST-STYLE-TYPE: none; FLOAT: left; OVERFLOW: visible; LIST-STYLE-IMAGE: none; MARGIN-RIGHT: 2px
}
.js #global_nav LI A.with_subnav.main_item {
	LIST-STYLE-TYPE: none; PADDING-RIGHT: 3px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-POSITION: right 12px; LIST-STYLE-IMAGE: none
}
#global_nav TABLE {
	MARGIN-TOP: -33px
}

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 35008869
reduce the padding bottom in most of the styles and you would be good to go
0
 
LVL 9

Assisted Solution

by:CCSOFlag
CCSOFlag earned 500 total points
ID: 35008940
aye, the padding bottom is the only thing I can see.  Do you have a link to your web site?  I'm not getting any adverse affects even with the padding, but I don't have the images to put in so not sure how they size up...
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Can't get video to center on page 2 46
allow link tag to be submit like form 15 60
Error Handler 8 43
carousel control extend past the images 9 29
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

751 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question