SitePoint.com

charles_316 · Sep 14, 2009, 21:08

Hello,

I am a beginner at web page design and have tried to use css to develop my first web page.

The page looks fine in IE8 as well as Firefox but in IE6, the main content is way at the bottom and the header is tiled or something for some reason.

I am certain this is a newbie mistake I am making. I am going to post the code. Can someone kindly glance over it for newbie mistakes or anything that is obvious to cause these problems? I assume it is a problem with my CSS code crossing between different browsers. The code is very small.

Nvm, i cannot post because I don't have enough posts. The source code can be pulled from the website at lespetitespommes dot com

and this is my CSS:

Code:

#container {
    width: 850px;
    margin-right: auto;
    margin-left: auto;
}
#header {
    height: 201px;
    width: 850px;
    background-color: #DE1621;
}

#content {
    width: auto;
    height: 1090px;
    padding: 10px;
    margin-left: 125px;
    background-color: #FFFF99;
}

#leftnav {
    float: left;
    width: 115px;
    height: 1100px;
    background-color: #DE1621;
    padding: 5px;
        
}

#leftnav ul
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

#leftnav a
{
    display: block;
    width: 130px;
    padding-top: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    padding-left: 3px;
    border-bottom-width: 1px;
}

#leftnav a:link, .navlist a:visited
{
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

#leftnav a:visited
{
   color: #ffffff;
   text-decoration: underline;
   font-weight: bold;
}

#leftnav a:hover
{
    text-decoration: none;
    color: #0000ff;
}

#sidebar {
    padding: 10px;
    float: right;
    width: 130px;
    background-color: #DE1621;
    height: 390px;

}

#footer {
    background-color: #DE1621;
    padding: 10px;
    clear: both;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
}


h1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #1A2373;
    line-height: 24px;
}
h2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 17px;
    font-weight: bold;
    color: #2F77F1;
    line-height: 20px;
}
h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bolder;
    color: #000000;
    line-height: 20px;
}

p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 11pt;
    margin-top: 3px;
    margin-right: 0;
    margin-bottom: 3px;
    margin-left: 0;
    padding-bottom: 9px;
}

a {
    color: #E82525;
    font-weight: bold;
    text-decoration: underline;
}
a:visited {
    color: #E82525;
    text-decoration: underline;
    font-weight : bold;
}
a:hover {
    color: #901BBE;
    text-decoration: none;
}


.box1 {
    background:#ffffff;
    color: #000;
    border:1px solid #00ffff;
    width: 400px;
    height: 165px;
    padding-top: 5;
    padding-right: 6px;
    padding-bottom: 0;
    padding-left: 6px;
    line-height: 16px;
}

.smalltext {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 3px 0;
    margin: 3px 0;
    line-height: 12pt
}

Thanks in advance,

Charles

charles_316 · Sep 14, 2009, 21:30

Ok, it seems I have fixed all the alignment issues except for the content being below the left nav for some reason.

To fix the alignment issues, I changed display:block to display:inline

#leftnav a
{
display: block;
width: 130px;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
border-bottom-width: 1px;
}

charles_316 · Sep 14, 2009, 21:45

I have uploaded pics of the site from IE6 and FF. You can see that the main content isn't at the correct placement in IE6 - it should be below header but to the right of the navigation bar as seen in FF... However, in IE6, it is actually BELOW the left navigation bar (it's not pictured because I have to scroll down to see the main content)

I am certain there is a quick fix in CSS but i can't figure it out

Rayzur · Sep 15, 2009, 00:07

Hi,
IE6 is the only browser that will stretch a containers width when it's inner contents exceed the parent's width.

You have your #leftnav width at 125px total after side paddings are added in then you have your anchor set at 130px plus 6px total side padding. That has stretched your #leftnav and caused your content div to drop below the #leftnav float.

You didn't have a width set on your content div but you have a 700px wide table in it. There is also one table in there that is 708px wide that needs to be sized down to 700px. (you really don't need those tables in there either)

Change this to 700 -

Code:

<p><strong>A MESSAGE FROM MARY:</strong></p>
  <table width="708 700" border="0">

Now make these changes in your css -

Code:

#content {
    /*width: auto;remove this*/
    float:left;
    width:705px;/*725px total with side padding*/
    height: 1090px;
    padding: 10px;
    /*margin-left: 125px;remove this*/
    background-color: #FFFF99;
}

#leftnav {
    float: left;
    width: 115px;/*125 total with side padding*/
    height: 1100px;
    background-color: #DE1621;
    padding: 5px;        
}

#leftnav ul
{
    margin-left: 0;
    padding-left: 0;
    list-style-type: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

#leftnav a
{
    display: block;
    width: 105px;/*115px total with side padding*/
    padding:3px 5px;
    /*border-bottom-width: 1px;remove this*/
}

charles_316 · Sep 15, 2009, 08:46

Thank you so much for your help! I really appreciate it.

You are correct - if I am not mistaken, using CSS you do not need any tables in html. Even as a beginner, I can see how powerful CSS can be. It seems like it would reduce TONS of html code for a large site.

Thanks again!

ilonka78 · Sep 18, 2009, 09:42

Hi
I have the same problem with my website.
It looks great in IE8. Firefox, Chrome and Safari but in IE6 my horizontal navigation is all over the place.
I tried change widths of containers, change paddings but nothing works.
Can somebody please help me with that, I will really appreciate that.

I had to delete my navigation items because they contain links and I couldn't post it

HTML4Strict Code:

<body>
 
  <div id="main">
    <div id="logo"><img src="../images/promotional_products_tampa_header.jpg" alt="" width="756" height="194" />
 
></div>
    
    <!-- TemplateBeginEditable name="menubar" -->
    <div id="menubar">
      <ul id="menu">
        <li></li>
      </ul>
    </div>
    <!-- TemplateEndEditable -->
<div id="site_content"><!-- TemplateBeginEditable name="sidebar" -->
      <div class="sidebar">
        <div class="sidebaritem">
          <!-- rounded corners - top **** -->
          <div class="rtop">
            <div class="r1"></div>
            <div class="r2"></div>
            <div class="r3"></div>
            <div class="r4"></div>
          </div>
          <br/>
          <!-- rounded corners - bottom **** -->
<div class="rbottom">
            <div class="r4"></div>
            <div class="r3"></div>
            <div class="r2"></div>
            <div class="r1"></div>
          </div>
        </div>
        <div class="sidebaritem">
          <!-- rounded corners - top **** -->
          <div class="rtop">
            <div class="r2"></div>
            <div class="r3"></div>
          </div>
          <!-- rounded corners - bottom **** -->
        </div>
        <div class="sidebaritem">
          <!-- rounded corners - top **** -->
          <div class="rtop">
            <div class="r1"></div>
            <div class="r2"></div>
            <div class="r3"></div>
            <div class="r4"></div>
          </div>
          <p align="center"> TEXT </p>
          <div align="center">
            <!-- rounded corners - bottom **** -->
          </div>
          <div class="rbottom">
            <div class="r4"></div>
            <div class="r3"></div>
            <div class="r2"></div>
            <div class="r1"></div>
          </div>
        </div>
      </div>
      <!-- TemplateEndEditable --><!-- TemplateBeginEditable name="maincontent" -->
      <div id="content_container">
        <!-- rounded corners - top **** -->
        <div class="rtop">
          <div class="r1"></div>
          <div class="r2"></div>
          <div class="r3"></div>
          <div class="r4"></div>
        </div>
        <div id="content">
          <h1> </h1>
          <p>&nbsp;</p>
          <table width="98%" border="0" cellspacing="0" cellpadding="1">
 
            <tr>
              <td><div align="center"></div></td>
            </tr>
          </table>
          <p>&nbsp;</p>
        </div>
        <!-- rounded corners - bottom **** -->
        <div class="rbottom">
          <div class="r4"></div>
          <div class="r3"></div>
          <div class="r2"></div>
          <div class="r1"></div>
        </div>
      </div>
      <!-- TemplateEndEditable --></div>
    <div id="footer">
     
      <p class="style7">&nbsp;</p>
      
      <p><br />
      </p>
      
    <p><p class="style6">Copyright &copy;</div>
</div>
 
<div style="font-size: 0.8em; text-align: center;">
 
</div>
</body>
</html>

Hope this will be enough
CSS

CSS Code:

/* global */
html{height: 100%;}
 
body
{
    font-family: arial, sans-serif;
    padding: 0px;
    margin: 0px;
    font-size: .78em;
    color: #555;
    background-color: #65605B;
    background-image: url(images/pattern2.png);
    background-repeat: repeat;
}
 
p
{
    margin: 0px;
    padding: 0px 0px 16px 0px;
    line-height: 1.7em;
    font-family: Arial, Helvetica, sans-serif;
}
 
 h2
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 180%;
    color: #555;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 2px;
    margin-left: 0px;
    padding-top: 2px;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-left: 0px;
    font-weight: bold;
    text-align: center;
}
 
h1, h3
{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    letter-spacing: 0.1em;
    padding: 7px 0px 5px 0px;
    margin: 0px 0px 12px 0px;
    color: #555;
    text-align: center;
}
 
h4
{
    font-family: arial, sans-serif;
    font-size: 110%;
    color: #555;
}
 
img
{ border: 0px; 
  margin: 0px; 
  padding: 0px;
}
 
a{outline: none;}
 
form{
    padding: 0;
    margin: 0;
    background-color: #F7F7F7;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
 
/* image positioning - left, right and center */
.left
{ float: left; 
  border-right: 18px solid;
}
 
.right
{ float: right; 
  border-left: 18px solid;
}
 
.center
{ display: block;
  text-align: center;
  margin: 0 auto;
}
 
.left, .right{border-color: #FFF;}
 
/* block quote */
blockquote
{ margin: 20px 0px 20px 0px; 
  padding: 10px 20px 0px 20px;
  border-left: 8px solid #4D4D4D;
}
 
/* unordered list */
ul
{ margin: 2px 0px 18px 16px;
  padding: 0px;
}
 
ul li
{ list-style-type: square;
  margin: 0px 0px 6px 0px; 
  padding: 0px;
}
 
/* ordered list */
ol
{ margin: 8px 0px 0px 24px;
  padding: 0px;
}
 
ol li
{ margin: 0px 0px 11px 0px; 
  padding: 0px;
}
 
/* margin lefts / margin rights - to centre content */
#main, #footer, #logo, #menubar, #site_content
{ margin-left: auto; 
  margin-right: auto;
}
 
/* main container */
#main
{
    width: 776px;
    color: #555;
    background-color: #FFF;
    background-image: url(images/main_brush.png);
    background-repeat: repeat-y;
    background-position: center;
}
 
/* logo */
#logo
{
    width: 756px;
    height: 194px;
    border-top: 1px solid #F2F2F0;
    color: #FFF;
    background-repeat: no-repeat;
    background-position: left top;
}
 
/* navigation menu */
#menubar
{
    width: 760px;
    height: 30px;
} 
 
ul#menu{margin: 0px;}
 
ul#menu li
{
    padding: 0px;
    list-style: none;
    background-image: url(images/button_bg.gif);
    margin-top: 1px;
    margin-right: 1px;
    margin-bottom: 1px;
    margin-left: 1px;
    background-repeat: no-repeat;
    background-position: left top;
} 
 
 
ul#menu li a 
{
    font-family: Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight: bold;
    display: block;
    float: left;
    height: 30px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    padding-top: 5px;
    padding-right: 14px;
    padding-bottom: 2px;
    padding-left: 17px;
    background-image: url(images/button_bg.gif);
    background-repeat: repeat-x;
    background-position: left top;
    text-transform: uppercase;
} 
 
ul#menu li a:hover, ul#menu li a.current, ul#menu li a.current:hover
{
    background-image: url(images/button_bg.gif);
    background-repeat: repeat-x;
    background-position: left top;
    color: #FFFFFF;
    border-top-width: 5px;
    border-right-width: 5px;
    border-bottom-width: 5px;
    border-left-width: 5px;
    border-top-color: #EF0D04;
    border-right-color: #EF0D04;
    border-bottom-color: #EF0D04;
    border-left-color: #EF0D04;
    height: 30px;
} 
 
#search
{ float: right; 
  padding: 18px 15px 0px 0px;
}
 
input.searchfield
{ background: #FFF; 
  border: 1px solid #605D58; 
  padding: 2px;
}
 
input.searchbutton
{ background: #605D58; 
  border: 0px; 
  padding: 1px;
  color: #FFF;
  width: 64px;
  cursor: pointer;
}
 
/* main content */
#site_content
{ width: 760px;
  overflow: hidden;
} 
 
/* sidebar */
.sidebar
{
    float: left;
    width: 190px;
    padding: 15px 15px 15px 15px;
    font-size: 14px;
    text-align: justify;
}
 
/* sidebar items / links */
.sidebaritem
{
    text-align: justify;
    width: 190px;
    float: left;
    margin: 0px 0px 15px 0px;
}
 
.sidebaritem h1, .sidebaritem h3, .sidebaritem p{margin: 8px 10px 10px 12px;}
 
.sidebaritem ul
{ border-top: 1px solid #E5E2DB;
  width: 160px; 
  padding-top: 4px; 
  margin: 4px 0px 15px 14px;
}
 
.sidebaritem li
{ list-style: none; 
  padding: 0px 0px 4px 0px; 
  border-bottom: 1px solid #DDDCE4;
}
 
.sidebaritem li a, .sidebaritem li a:hover
{
    height: 16px;
    text-decoration: none;
    background: transparent url(images/bullet.png) no-repeat left center;
    color: #000000;
    padding: 0px 0px 0px 18px;
    display: block;
    font-size: 14px;
    font-weight: normal;
    font-family: Arial, Helvetica, sans-serif;
} 
 
.sidebaritem li a.current, .sidebaritem li a:hover, .sidebaritem li a.current:hover
{
    background-color: transparent;
    background-image: url(images/bullet_selecy.png);
    background-repeat: no-repeat;
    background-position: left center;
} 
 
/* page content */
#content_container
{ text-align: left;
  width: 525px;
  float: left;
  padding: 15px 15px 15px 0px;
}
 
#content
{ text-align: left;
  width: 495px;
  padding: 8px 15px 8px 15px;
}
 
#content a
{
    background: transparent;
    color: #F30B0B;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}
#main #site_content #content_container #content img {
    padding-right: 10px;
}
 
 
#content a:hover
{
    background: transparent;
    color: #0000CC;
}
 
.sidebaritem, #content{background: #FFF;}
 
/* footer */
#footer
{
    width: 720px;
    height: 80px;
    text-align: center;
    border-top: 2px solid #F2F2F0;
    color: #FFFFFF;
    padding-top: 6px;
    padding-right: 21px;
    padding-bottom: 20px;
    padding-left: 19px;
    background-color: #BDB9B2;
    background-image: url(images/footer_bg1.png);
    background-repeat: repeat;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
}
 
#footer a
{
    background: transparent;
    color: #FFF;
    font-family: Arial, Helvetica, sans-serif;
}
 
#footer a:hover
{
    background: transparent;
    color: #CCCCCC;
}
 
#content a, #content a:hover, #footer a, #footer a:hover{text-decoration: none;}
 
/* Based on Nifty Corners: rounded corners without images */
 
.rtop, .rbottom{display: block; background: #E5E2DB;}
 
.rtop .r1, .rtop .r2, .rtop .r3, .rtop .r4,
.rbottom .r1, .rbottom .r2, .rbottom .r3, .rbottom .r4
{ display: block;
  height: 1px;
  overflow: hidden; 
  background: #FFF;
}
 
.r1{margin: 0 5px;}
 
.r2{margin: 0 3px;}
 
.r3{margin: 0 2px;}
 
.rtop .r4, .rbottom .r4
{ margin: 0 1px;
  height: 2px;
}
 
/* sNews */
fieldset, .comment, .commentsbox
{ margin-bottom: 10px; 
  background: transparent; 
  color: #444;
}
 
fieldset
{ border: 1px solid #E5E2DB; 
  padding: 10px 8px;   
}
 
input{padding: 2px;}
 
textarea
{ width: 95%; 
  height: 200px;
  padding: 3px;
}
 
.comment
{ background: #F2EFEA; 
  color: #444;
}
 
.date
{ border-top: 1px solid #E5E2DB; 
  margin: 15px 0px 5px 0px;
  font-weight: bold;
}
.style6 {color: #333333}
.style7 {
    font-size: 20px;
    font-weight: bold;
}
.style8 {
    color: #F31414;
    font-size: 30px;
}
.style9 {
    color: #F31414;
    font-size: 130%;
    letter-spacing: 0.1em;
}

RyanReese · Sep 18, 2009, 10:20

Hi, I'm not sure if this is the case as I can't do testing.

Jus tby studying your code I'm guessing your running into the staircase bug.

Add float:left; to "ul#menu li"

Please in the future don't hijack someoen elses thread

.

ilonka78 · Sep 18, 2009, 11:04

It worked! Thank you very very much!

RyanReese · Sep 18, 2009, 11:13

Haha dang that's awesome

. Your welcome

.

Off Topic:

I am 4 cereal, looked at CSS only

ilonka78 · Sep 18, 2009, 11:51

You can call yourself just CSS Guru now

RyanReese · Sep 18, 2009, 12:12

I would update my title but I don't want to be cocky ;P

charles_316 · Sep 30, 2009, 22:22

I actually just noticed that I had fixed the main page (change table width from 708 to 700 but forgot to do so on other pages).

Now when I modify all the other pages such that they are down to table width's of 700, I see a few problems.

One of the replies to this thread had said the tables were actually unnecessary. Should I be removing them within the html? I'm not quite sure how to go about doing this while keeping the content intact. If they could be manually modified to work (dimensions), I would prefer that solution and that's how I've been trying to fix it so far.

1) The contents of one of my pages is shown incorrectly. I have attached screenshots of the page shown in IE6 and in Firefox (FF is the one that looks correct). -> lespetitespommes DOT com/about.html

2) Some of the pages I manually changed the table width to 700, I now see the left nav doesn't reach all the way down to the bottom as shown in another pic. - lespetitespommes DOT com/staff.html

3) One of my pages is still stuck beneath the left nav even though I changed the table width down to 700. -> lespetitespommes DOT com/photos.html

Any help would be greatly appreciated? Thanks in advance!

charles_316 · Oct 4, 2009, 22:45

Any ideas? I'm stuck

Paul O'B · Oct 5, 2009, 05:44

1) Add a class to the table and apply this style.

Code:

#content .about-table img{
    display:block
}

Code:

<table class="about-table" width="700" border="0">
            <tr>
                <td width="350"><p>This summer I .........

Note that you are doing silly things here:

Code:

<td width="324" valign="top"><p align="center"><img src="http://www.lespetitespommes.com/More Images/Thumbnails/sub_header_youth.jpg" alt="sc" width="350" height="44" align="top" /></p>

The td is 324px but yet you still think you can place a 350px image inside! Tables are usually very forgiving of this action but beware if you try this elsewhere.

2) It only reaches down to the bottom because you set a height on it.

Code:

#leftnav {
    float: left;
    width: 115px;
    height: 1100px;
    background-color: #DE1621;
    padding: 5px;
}

This is a bad approach and doesn't allow for any fluidity at all. Columns in css don't automatically become equal and the easiest solution is to use a "faux column" approach as shown in this short example. Read this to understand the issues fully.

3) Your images are 350px each so therefore they take up the full width already and therefore combined with the default cellspacing thge table becomes too big. as the table is nested the problem is doubled.

Remove the cellspacing as shown.

Code:

<table width="700" border="0"  cellspacing="0" cellpadding="0">
            <tr>
                <td><p><strong>Les Petites Pommes Summer 2009 Photos! </strong></p>
                    <p>&nbsp;</p>
                    <p>Please click on the session photos which you would like to view: </p>
                    <p>&nbsp;</p>
                    <table width="700" border="0" cellspacing="0" cellpadding="0">

However your images will now be tight together with no space so the better solution would be to reduce your image withs by about 10px or so in order that they fit.

charles_316 · Oct 5, 2009, 08:08

Thank you for the response. I will read through your examples and the link you provided and then re-code the necessary parts.

Oct 5, 2009, 05:44	#14
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 26,593	1) Add a class to the table and apply this style. Code: #content .about-table img{ display:block } Code: <table class="about-table" width="700" border="0"> <tr> <td width="350"><p>This summer I ......... Note that you are doing silly things here: Code: <td width="324" valign="top"><p align="center"><img src="http://www.lespetitespommes.com/More Images/Thumbnails/sub_header_youth.jpg" alt="sc" width="350" height="44" align="top" /></p> The td is 324px but yet you still think you can place a 350px image inside! Tables are usually very forgiving of this action but beware if you try this elsewhere. 2) It only reaches down to the bottom because you set a height on it. Code: #leftnav { float: left; width: 115px; height: 1100px; background-color: #DE1621; padding: 5px; } This is a bad approach and doesn't allow for any fluidity at all. Columns in css don't automatically become equal and the easiest solution is to use a "faux column" approach as shown in this short example. Read this to understand the issues fully. 3) Your images are 350px each so therefore they take up the full width already and therefore combined with the default cellspacing thge table becomes too big. as the table is nested the problem is doubled. Remove the cellspacing as shown. Code: <table width="700" border="0" cellspacing="0" cellpadding="0"> <tr> <td><p><strong>Les Petites Pommes Summer 2009 Photos! </strong></p> <p> </p> <p>Please click on the session photos which you would like to view: </p> <p> </p> <table width="700" border="0" cellspacing="0" cellpadding="0"> However your images will now be tight together with no space so the better solution would be to reduce your image withs by about 10px or so in order that they fit.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Sep 14, 2009, 21:30	#2
charles_316 SitePoint Member Join Date: Sep 2009 Posts: 7	Ok, it seems I have fixed all the alignment issues except for the content being below the left nav for some reason. To fix the alignment issues, I changed display:block to display:inline #leftnav a { display: block; width: 130px; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; border-bottom-width: 1px; }

Sep 15, 2009, 00:07	#4
Rayzur SitePoint Wizard Join Date: Jun 2007 Location: Texas Posts: 1,982	Hi, IE6 is the only browser that will stretch a containers width when it's inner contents exceed the parent's width. You have your #leftnav width at 125px total after side paddings are added in then you have your anchor set at 130px plus 6px total side padding. That has stretched your #leftnav and caused your content div to drop below the #leftnav float. You didn't have a width set on your content div but you have a 700px wide table in it. There is also one table in there that is 708px wide that needs to be sized down to 700px. (you really don't need those tables in there either) Change this to 700 - Code: <p><strong>A MESSAGE FROM MARY:</strong></p> <table width="~~708~~ 700" border="0"> Now make these changes in your css - Code: #content { /width: auto;remove this/ float:left; width:705px;/725px total with side padding/ height: 1090px; padding: 10px; /margin-left: 125px;remove this/ background-color: #FFFF99; } #leftnav { float: left; width: 115px;/125 total with side padding/ height: 1100px; background-color: #DE1621; padding: 5px; } #leftnav ul { margin-left: 0; padding-left: 0; list-style-type: none; font-family: Arial, Helvetica, sans-serif; font-size: 16px; } #leftnav a { display: block; width: 105px;/115px total with side padding/ padding:3px 5px; /border-bottom-width: 1px;remove this/ }

Sep 15, 2009, 08:46	#5
charles_316 SitePoint Member Join Date: Sep 2009 Posts: 7	Thank you so much for your help! I really appreciate it. You are correct - if I am not mistaken, using CSS you do not need any tables in html. Even as a beginner, I can see how powerful CSS can be. It seems like it would reduce TONS of html code for a large site. Thanks again!

Sep 18, 2009, 10:20	#7
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	Hi, I'm not sure if this is the case as I can't do testing. Jus tby studying your code I'm guessing your running into the staircase bug. Add float:left; to "ul#menu li" Please in the future don't hijack someoen elses thread .

Sep 18, 2009, 11:04	#8
ilonka78 SitePoint Member Join Date: Sep 2009 Posts: 3	It worked! Thank you very very much!

Sep 18, 2009, 11:13	#9
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	Haha dang that's awesome . Your welcome . Off Topic: I am 4 cereal, looked at CSS only

Sep 18, 2009, 11:51	#10
ilonka78 SitePoint Member Join Date: Sep 2009 Posts: 3	You can call yourself just CSS Guru now

Sep 18, 2009, 12:12	#11
RyanReese CSS Guru in Training Join Date: Oct 2008 Location: Whiteford, MD Posts: 8,673	I would update my title but I don't want to be cocky ;P

Oct 4, 2009, 22:45	#13
charles_316 SitePoint Member Join Date: Sep 2009 Posts: 7	Any ideas? I'm stuck

Oct 5, 2009, 08:08	#15
charles_316 SitePoint Member Join Date: Sep 2009 Posts: 7	Thank you for the response. I will read through your examples and the link you provided and then re-code the necessary parts.