Log in

View Full Version : 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...



ul{
margin:0;
padding:0;
}

eengnerd
09-22-2008, 11:46 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...



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 &nbsp;91767 * USA *&nbsp;(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
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...



http://www.eight7teen.com/images/screenie.jpg

Medyman
09-23-2008, 02:18 AM
@ eengnerd...
Does your CSS file contain the below in it?


<!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