CSS Inline horizontal menus always indented

**eengnerd** · 09-22-2008, 10:56 PM

I'm new to CSS and have a great book on it. But I have tried using the code from this site and others for CSS based inline horizontal menus and they are consistently indented a little bit to the right of all the other items, like the website header, etc. I would like to know why this is happening and if there is a solution available to me...or if I must use a vertical menu to bypass this issue. It seems quite illogical that no solution would exist. I have tried hundreds of experiments with no satisfactory results.

**TheJoshMan** · 09-22-2008, 11:24 PM

if you are using a <ul> to create your menus... My first guess without seeing the code would be that the default margin/padding is what's causing the "indention". Try adding this to your css...

Code:

ul{
margin:0;
padding:0;
}

**eengnerd** · 09-22-2008, 11:46 PM

Originally Posted by Nyne Lyvez

if you are using a <ul> to create your menus... My first guess without seeing the code would be that the default margin/padding is what's causing the "indention". Try adding this to your css...

Code:

ul{
margin:0;
padding:0;
}

Here is the CSS content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Computer Outlet, Inc. Style Sheet</title>

<style type="text/css">

.hovermenu ul{
width: 80%;
font: bold 3px arial;
text-align: left;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
float: left;
list-style: none;
list-style-position: outside;
display: compact;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #e1e1e1; /* You Can Change this color */
border: 2px solid #e1e1e1; /*You can change this color*/
}

.hovermenu ul li a:hover{
background-color: #e5e5e5; /*You Can Change This Color*/
border-style: outset;
}

body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}

.framecontentTop {
position: absolute;
top: 0;
left: 0;
width: 98%;
height: 110px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}

.framecontentBottom {
position: absolute;
top: auto;
left: 0;
bottom: 0;
top-margin: 0px;
height: 40px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: white;
color: black;
}

.maincontent{
position: fixed;
top: 110px; /*Set top value to HeightOfTopFrameDiv*/
left: 0;
right: 0;
width: 98%;
text-align: justify;
bottom: 40px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto;
background: #fff;
}

.innertube{
margin: 2px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

</style>

</head>

<body>
</body>
</html>

And here is the content of index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>LCD Monitor Repair, LCD TV repair, Recycling LCD Monitors, The Computer Outlet</TITLE>
<META NAME="Author" "Arthur Baldwin">
<META NAME="Description" CONTENT="The Computer Outlet (877)722-5929 is your best source for LCD Monitor Repair, Recycled LCD Panels, Refurbished LCD Panels, Plasma Panels and LapTop LCD Panels. Call us for all your LCD Recycling needs. We work hard to earn your trust and respect by implementing competitive prices, great customer service, and attention to detail. ">
<META NAME="Keywords" CONTENT="LCD Monitor Repair, LCD TV Repair, Recycling LCD Monitors, LCD Computer Monitors, Recycled LCD & Plasma Panels, LCD's TV">
<META NAME="Robots" CONTENT="All">
<link rel="stylesheet" href="TCOutlet.css" type="text/css" />
</HEAD>

<body>
<div class="framecontentTop">
<h1>The Computer Outlet, Inc.</h1>
<div class="hovermenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="RecycledPanels.html">Recycled Panels</a></li>
<li><a href="OurProducts.html">Our Products</a></li>
<li><a href="ContactUs.html">Contact Us</a></li>
<li><a href="OurLocation.html">Our Location</a></li>
<li><a href="OurPolicies.html">Our Policies</a></li>
<li><a href="AboutUs.html">About Us</a></li>
</ul>
</div>
</div>

<div class="maincontent">
<h1>Home</h1>

<img alt="bldgfront.jpg" border="" src="Images/Building/bldgfront.jpg" width="560">

<h1>Welcome to The Computer Outlet!</h1>

<p>
The Computer Outlet is your best source for recycled and refurbished LCD panels, Plasma panels, and panel based products. We have excellent customer service and high quality standards.
</p>

<p>At The Computer Outlet we work hard to earn your trust and respect. We offer competitive prices, great customer service, and attention to detail.
</p>

<p>
Please let us know what you need!
<br>You can e-mail us at: sales@tcoutlet.com
</p>

<a href="mailto:support@tcoutlet.com"><font color="000000"">Technical Support EMail: support@tcoutlet.com</font></a>
</div>

<div class="framecontentBottom">
<p>The Computer Outlet * 2755 Melbourne Avenue * Pomona, CA  91767 * USA * (877) 722 - 5929 </p>
</div>

</body>
</html>

**TheJoshMan** · 09-23-2008, 12:14 AM

I copied your code "as is" and tested it... I couldn't recreate the problem you were mentioning. Everything lined up perfectly to the left as it should (or at least I THINK that's how you want it to line up).

I did notice however, that you had the font set to 3px. That's nearly IMPOSSIBLE for anyone to read. I had to set it to 12px for it to look decent.

**eengnerd** · 09-23-2008, 12:29 AM

Originally Posted by Nyne Lyvez

I copied your code "as is" and tested it... I couldn't recreate the problem you were mentioning. Everything lined up perfectly to the left as it should (or at least I THINK that's how you want it to line up).

I did notice however, that you had the font set to 3px. That's nearly IMPOSSIBLE for anyone to read. I had to set it to 12px for it to look decent.

Can't you tell that the border of the first menu item is NOT lined up with the first letter of "The Computer Outlet, Inc."? It displays indented both in IE7 and Firefox 3. It displays nearly a half inch to the right!

**TheJoshMan** · 09-23-2008, 01:45 AM

Here is what I see after copying your code and changing the font size to 12px...

**Medyman** · 09-23-2008, 02:18 AM

@ eengnerd...
Does your CSS file contain the below in it?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>The Computer Outlet, Inc. Style Sheet</title>

<style type="text/css">

If so...you got some problems there.

@ Josh...
Got enough toolbars? :-p

**TheJoshMan** · 09-23-2008, 03:51 AM

one can never have enough toolbars!!! LOL

You can measure a man's dork factor by the number of toolbars and plugins he has for firefox

Thread: CSS Inline horizontal menus always indented

Thread Tools

Search Thread

CSS Inline horizontal menus always indented

CSS Inline horizontal menus always indented

Bookmarks

Bookmarks

Posting Permissions