Menu
OK, so i am trying to do this website thing… and it’s hard… things are not lining up ore just plain don’t work… so naturally i am here for advice from you guys (and gals)…
I am trying to make a menu list on the left DIV of my page… naturally i am having problems… in IE my list does not line up to the end of the DIV (all the way to the left)… as for Firefox… well it just shows up like a retarded link list… not pretty at all…
if somebody could clue me in… that would be awesome…
here is a pic of what it looks like in IE
[URL=”http://i126.photobucket.com/albums/p95/stan_chernov/IE-Problem.jpg”]http://i126.photobucket.com/albums/p95/stan_chernov/IE-Problem.jpg
and here is one with retarded firefox…
[URL=”http://i126.photobucket.com/albums/p95/stan_chernov/MF-Problem.jpg”]http://i126.photobucket.com/albums/p95/stan_chernov/MF-Problem.jpg
My CSS Code
[CODE]/* CSS styles */
body {
text-align:center;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666666;
font-size:1em;
}
h1,h2 {
color:#0033CC;
}
h1 {
font-size:1.8em;
}
h2 {
font-size:1.4em;
}
#main {
position:relative;
width:745px;
text-align:left;
margin:0px auto;
}
#header {
position:relative;
text-align:center;
width:100%;
height:120px;
border:1px solid orange;
}
#header img {
position:relative;
border:0px;
}
#left_side {
position:relative;
width:150px;
float:left;
padding:5px 2px;
margin:10px 0px 15px 0px;
border:1px solid black;
}
#content {
position:relative;
width:575px;
float:left;
padding:5px 2px;
margin:10px 0px 15px 5px;
border:1px dashed blue;
}
#BottomAddBox {
position:relative;
text-align:center;
font-size:0.8em;
margin:0px auto;
border:1px dotted red;
}
#footer {
position:relative;
text-align:center;
font-size:0.8em;
margin:10px Auto;
border:1px dotted red;
}
#design {
position:relative;
width:75%;
margin:0px auto 20px auto;
}
#design img {
border:0px;
}
.top_block {
position:relative;
overflow:auto;
width:40%;
height:150px;
float:left;
padding:5px 2px;
margin:10px 0px 10px 5px;
border:1px dashed blue;
}
.clearing {
clear:both;
}
.para {
position:relative;
text-indent:15px;
font-size:1em;
padding:5px;
ul#leftnavlist
{
text-align: left;
list-style: none;
padding: 0;
margin: 0 auto;
width: 100%;
}
ul#leftnavlist li
{
display: block;
margin: 0;
padding: 0;
}
ul#leftnavlist li a
{
display: block;
width: 100%;
padding: 0.2em 0 0.2em 0.1em;
border-width: 1px;
border-color: #ffe #aaab9c #ccc #fff;
border-style: solid;
color: White;
text-decoration: none;
background: #ae1401;
}
#leftnavcontainer>ul#leftnavlist li a { width: auto; }
ul#leftnavlist li#active a
{
background: #cc6600;
color: White;
}
ul#leftnavlist li a:hover, ul#leftnavlist li#active a:hover
{
color: white;
background: #cc6600;
border-color: #aaab9c #fff #fff #ccc;
}
My HTML
[CODE]<!–[page]–>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>CSS Based Templates – C and S Design</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″/>
<meta name=”keywords” content=””/>
<meta name=”description” content=””/>
<link type=”text/css” rel=”stylesheet” href=”style.css” />
</head>
<body>
<div id=”main”>
<div id=”header”>
HEADER
</div><!– header –>
<div id=”left_side”>
Left Side<br />
<ul id=”leftnavlist”>
<li><a href=”#”>Link 1</a></li>
<li><a href=”#”>Link 2</a></li>
<li><a href=”#”>Link 3</a></li>
<li><a href=”#”>Link 4</a></li>
</ul>
<br />
<br />
Left Menu Goes Here
</div><!– left –>
<div id=”content”>
<br />
<h1>Main Page</h1>
<h2>Content Here</h2>
<p class=”para”>
Actual Text.</p>
</div><!– content –>
<div class=”clearing”></div><!– clearing –>
<div id=”BottomAddBox”>
<b>Adds Go Here<br />BottomAddBox</b><br/>
</div><!– BottomAddBox –>
<div id=”footer”>
<b>Footer<br />Line 2</b><br/>
<span class=’small’>Line 3</span>
<div id=”design”>
<br />
<span style=’font-size: .9em;color: Red; font-family: Verdana, Arial, Helvetica, sans-serif;’>copyright © Subagh Jewelry Design 2008 </span><br />
</div><!–design–>
</div><!– footer –>
</div>
<!– main –>
</body>
</html>
<!–[/page]–>