CSS Forum

**agent_KGB** · 01-19-2009, 02:34 PM

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

and here is one with retarded firefox...

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 &copy; Subagh Jewelry Design 2008 </span><br />
    </div><!--design-->

</div><!-- footer -->

</div>

<!-- main -->

</body>
</html>
<!--[/page]-->

**agent_KGB** · 01-19-2009, 03:41 PM

PS i figured out how to use CSS validator, and fixed my FireFox error (not having the closing "}" thing at the end of ".Para"...

however my IE problem still exists ;0(... HELP

**LadynRed** · 01-19-2009, 04:11 PM

Ok, CSS does have a learning curve, but it's not really all that hard to get the basics. The hard part is the cross-browser stuff, which is mainly because of IE.

Ok, #1 - get rid of all the positioning, you don't need it, nor do you want it. Use the normal document flow to your advantage and use floats. I would leave position:relative on #main -and that's it.

Remove the left margin from #content, you're triggering the doubled-float margin bug in IE6. Put a RIGHT margin on #leftside to push #content over.

Remove the padding #leftside and #content, apply the padding to the elements INSIDE the boxes.

Put a background color on the <body>, this is just good practice. My default bg color for my desktop is NOT white - I see pink in IE where you want white.

**agent_KGB** · 01-19-2009, 04:18 PM

Quote:

Originally Posted by LadynRed

My default bg color for my desktop is NOT white - I see pink in IE where you want white.

lol... how sweet ;0P

thanks for your advice though, i am going to give your suggestions a try... stand by for more questions...

PS: i figured out my IE problem... it was going crazy because i had
 at the beginning of the HTML code

**LadynRed** · 01-19-2009, 04:23 PM

If you had that before the doctype, it throws IE into Quirks Mode - not good.