[SOLVED] CSS Table Alignment & IE

[D12Eminem989]

Hello, Got this problem with my css. This is the first time working with css tables. I am an old school person. However this my first attempt at css.

 

I have a problem. The middle and right table are not aligning to the top correctly like I wanted the left one to.

 

You can see it there. Anyone got an idea of why its not aligning correctly? Also when I view it in IE. I get a totaly different view from Firefox. Is there a way to fix that?

http://allebizsolutions.com/new/

 

I am also aware of the css being a bit messy. I just want to get the alignment and IE issue fixed then I will go and clean the coding.

 

Here is my css:

 /** BASIC */

body {
margin: 10px 0px 0px 0px;
background: #c0c0c0;
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
font-size: 10px;
color: #FFFFFF;

}
a:hover {
text-decoration: none;
}

/** HEADER */
#header {
width: 964px;
height: 83px;
margin: auto;
background: #000000 url(images/hdr.gif);
}

#headernav {
width: 964px;
height: 29px;
margin: auto;
background: #000000 url(images/hdrnav.gif);
}

/** CONTENT */
#content {
width: 964px;
margin: auto;
background: #000000 url(images/bg.gif);
}

#announce {
width: 964px;
height: 80px;
margin: auto;
background: #000000 url(images/announcement.gif);
}
#announce p {
margin: 0px;
padding: 30px 120px;
color: #000000;
}

/** FOOTER */
#footer {
width: 964px;
height: 45px;
margin: 0px auto;
background: #000000 url(images/footer.gif);
}
#footer p {
margin: 0px;
padding: 15px 25px;
color: #FFFFFF;
}


.side-box-a
{
margin: 0px 25px 0px 20px;
width: 180px;
background: #333333;
color: #777777;
}

.side-box-a .header
{
float: left;
margin: 0px;
padding: 0px;
height: 44px;
width: 100%;
background: #000000 url(images/Menu-T.gif);
}
.side-box-a .header p
{
margin: 0px;
padding: 15px 25px;
color: #FFFFFF;
}
.side-box-a .main
{
float: left;
margin: 0px;
padding: 0px;
width: 100%;
color: #ffffff;
background: #000000 url(images/Menu-M.gif);
}
.side-box-a .main p
{
margin: 0px;
padding: 0px 9px;
color: #FFFFFF;
}

.side-box-a .footer
{
float: left;
margin: 0px;
padding: 0px;
width: 100%;
height: 32px;
background: #000000 url(images/Menu-B.gif);
}









.side-box-b
{
margin: 0px 0px 0px 210px;
width: 496px;
background: #333333;
color: #777777;
}
.side-box-b .header
{
height: 44px;
background: #000000 url(images/Menu-M-T.gif);
}
.side-box-b .header p
{
padding: 15px 25px;
color: #FFFFFF;
}
.side-box-b .main
{
width: 496px;
background: #000000 url(images/Menu-M-M.gif);
}
.side-box-b .footer
{
width: 496px;
background: #000000 url(images/Menu-M-B.gif);
}














.side-box-c
{
margin: 0px 25px 0px 530px;
width: 180px;
background: #333333;
color: #777777;
}

.side-box-c .header
{
float: left;
margin: 0px;
padding: 0px;
height: 44px;
width: 100%;
background: #000000 url(images/Menu-T.gif);
}
.side-box-c .header p
{
margin: 0px;
padding: 15px 25px;
color: #FFFFFF;
}
.side-box-c .main
{
float: left;
margin: 0px;
padding: 0px;
width: 100%;
color: #ffffff;
background: #000000 url(images/Menu-M.gif);
}
.side-box-c .main p
{
margin: 0px;
padding: 0px 9px;
color: #FFFFFF;
}

.side-box-c .footer
{
float: left;
margin: 0px;
padding: 0px;
width: 100%;
height: 32px;
background: #000000 url(images/Menu-B.gif);
}

[bronzemonkey]

Things work a little bit differently with css (I can see some old table concepts in your code) but it looks like you'll get the hang of it pretty quickly if this was only your first attempt!

 

There wasn't anything "wrong" with your approach - it can be done that way - but the html gets cluttered with a lot of unnecessary markup and empty divs. You can achieve the same appearance with much less markup and save yourself a bunch of css coding too. When you are trying to create columns you should use the float property on the outer most element of the column.

 

I've quickly knocked up a bit of code that will do what you're after - have a look through and play around with it. There are also some websites with a variety of examples of how you can produce a 3 column layout with css - http://www.positioniseverything.net/ordered-floats.html & http://www.cssplay.co.uk/layouts/3cols.html are good places to look.

 

Hasn't been tested in IE6, so if it has some problems in that browser you'll need to create a new "conditional stylesheet" where you can make some modifications that will only affect IE6. If you're really unlucky you might even need to add another element to the html to get IE6 to play ball. Let me know if and what the issues in IE6 are.

 

Another member recommended this website for tutorials and information on how the float property works, looks pretty handy - http://css.maxdesign.com.au/floatutorial/

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>All E Biz Solutions</title>
<style type="text/css">
/* BASIC CSS RESET
----------------------------------- */

html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, cite, code, em, img, small, strike, strong, dl, dt, dd, ol, ul, li {margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline;}
/* remember to define focus styles! */
:focus {outline:0;}
ol, ul {list-style:none;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}

/* YOUR STYLES
----------------------------------- */

body { font-family:Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif; font-size:10px; color:#fff; background:#c0c0c0; text-align:center;}

a:link, a:visited {color:#fff; text-decoration:none;}
a:hover, a:focus, a:active {text-decoration:underline;}
a:focus {/*define a specific style for focus states to help with accessibility*/}

#container {width:964px; margin:10px auto 0 auto; text-align:left;}

#header {width:964px; height:185px; background:#000 url(http://allebizsolutions.com/new/images/hdr.gif) 0 22px no-repeat;}
  #nav_header {width:964px; height:22px; background:#000 url(http://allebizsolutions.com/new/images/hdrnav.gif) 0 0 no-repeat;}
  #announce {width:964px; height:80px; margin-top:83px; background:#000 url(http://allebizsolutions.com/new/images/announcement.gif) 0 0 no-repeat;}
  #announce p {margin:0px; padding:30px 120px; color:#000;}

#wrapper {width:964px; padding-bottom:15px; background:#000 url(http://allebizsolutions.com/new/images/bg.gif) 0 0 repeat-y;}

  #content {float:left; width:496px; padding-bottom:32px; margin:0 34px; background:#000 url(http://allebizsolutions.com/new/images/Menu-M-B.gif) center bottom no-repeat;}
  #content h2 {display:block; height:29px; padding:15px 25px 0; background:#000 url(http://allebizsolutions.com/new/images/Menu-M-T.gif) 0 0 no-repeat;}
  #content .main {padding:0 9px; background:#000 url(http://allebizsolutions.com/new/images/Menu-M-M.gif) 0 0 repeat-y}
  #content .main p {padding-bottom:5px;}

  #sidebar1 {float:left; margin-left:20px;}
  #sidebar2 {float:right; margin-right:20px}  
  #sidebar1, #sidebar2 {width:180px; padding-bottom:32px; background:#333 url(http://allebizsolutions.com/new/images/Menu-B.gif) center bottom no-repeat;}
  #sidebar1 h3, #sidebar2 h3 {display:block; height:29px; padding:15px 25px 0; background:#000 url(http://allebizsolutions.com/new/images/Menu-T.gif) 0 0 no-repeat;}
  #sidebar1 .main, #sidebar2 .main {padding:0 9px; background:#000 url(http://allebizsolutions.com/new/images/Menu-M.gif) 0 0 repeat-y;}

#footer {height:45px; background:#000 url(http://allebizsolutions.com/new/images/footer.gif) 0 0 no-repeat;}
#footer p {padding:15px 25px; color:#fff;}

/* SELF-CLEARING FLOATS
----------------------------------- */

#wrapper:after {content: "."; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
/*IE6 only*/
* html #wrapper {height:1%;}
/*Ie7 only*/
*:first-child+html #wrapper {min-height:1px;}
</style>
</head>

<body>

<div id="container">
  <div id="header">
    <div id="nav_header">
    </div>
    <div id="announce">
      <p>Sorry, Currently we do not have any new and important announcements for you. Please check back later.</p>
    </div>
  </div><!-- end #header -->

  <div id="wrapper">
    <div id="sidebar1">
      <h3>Navigation</h3>
      <ul class="main">
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
          <li><a href="" title=""># Navigation</a></li>
        </ul>
    </div><!-- end #sidebar1 -->

    <div id="content">
      <h2>Page Navigation</h2>
      <div class="main">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed vel nisl. Donec dolor elit, laoreet quis, cursus ac, pellentesque in, ipsum. Mauris euismod orci et orci. Pellentesque ac quam sit amet nisi scelerisque posuere. Mauris lobortis ipsum quis leo. Integer lectus justo, vehicula sit amet, molestie in, pulvinar ut, velit. Etiam fringilla. Nam vitae felis. Aliquam vel erat. Ut faucibus quam a quam. Donec eu lectus. Vivamus ultrices convallis quam. Mauris non urna. Cras venenatis urna nec nibh. In euismod ante quis nisi. Maecenas est libero, placerat rutrum, dapibus nec, pulvinar vel, justo. Sed leo. Aliquam diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec enim.</p>
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vivamus sit amet magna vel nulla consequat hendrerit. Nunc ultricies varius purus. Maecenas vitae lorem. In hendrerit, nisi ac volutpat dapibus, lorem nunc mattis nisl, eu rutrum tortor lacus ac nisi. Duis dapibus posuere nibh. Pellentesque a elit. Duis facilisis, dui at condimentum rutrum, dolor mauris fermentum orci, eu tristique mauris velit et libero. Proin vestibulum blandit orci. Mauris eu justo.</p>
        <p>Aliquam eu magna et tellus aliquam eleifend. Vestibulum suscipit. Ut vehicula purus eu nibh. Etiam eu tortor quis orci posuere rhoncus. Quisque et nisl. Sed quis mi at lacus sagittis feugiat. Nam nec odio. Mauris rutrum pharetra nisl. Integer scelerisque, metus et imperdiet pellentesque, mauris diam dapibus risus, non adipiscing tortor nisl in dui. Suspendisse potenti. Nam ut augue. Donec non velit in erat sagittis volutpat. Maecenas laoreet euismod arcu. Integer aliquam. Praesent at eros a ligula sagittis mollis. Integer euismod dictum ipsum. Donec lectus risus, blandit a, volutpat id, cursus a, elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam id sem ac mi mollis dictum.</p>
        <p>Sed facilisis, massa vitae pharetra pulvinar, ante ante varius dui, a pretium libero eros mattis mauris. Duis scelerisque purus vel orci. Aliquam pretium adipiscing risus. Curabitur luctus. Cras lectus. Nam blandit, metus sit amet luctus luctus, justo tortor lobortis nunc, eget imperdiet ante dolor eu neque. Mauris hendrerit, mauris ut scelerisque feugiat, nibh sem sodales libero, a hendrerit est urna sit amet orci. Integer mauris. Cras imperdiet ipsum nec erat. Praesent magna. Vestibulum sollicitudin tellus nec lacus. Sed lorem. Ut vel sapien. Sed rutrum eros non nulla. Etiam et lacus. Duis varius aliquet lectus. Mauris non justo vitae magna vulputate elementum. Aliquam id dolor.</p>
        <p>Donec augue odio, accumsan vel, sodales ac, vehicula vitae, tortor. Aliquam quam leo, tincidunt a, porttitor ut, porttitor nec, dolor. Donec malesuada condimentum est. Nulla in justo at magna porttitor accumsan. Proin libero lectus, porttitor sit amet, pharetra nec, cursus ac, mauris. Nulla auctor, metus vel gravida egestas, pede velit accumsan dui, id auctor ipsum erat non augue. Vivamus nibh neque, egestas sit amet, facilisis et, molestie nec, metus. Fusce hendrerit leo eu ligula. Donec consequat consectetuer est. Donec nec diam ac purus cursus elementum. Sed vel nulla eget felis elementum pretium. Aenean cursus varius sem. Duis eget elit.</p>
      </div>
    </div><!-- end #content -->

    <div id="sidebar2">
      <h3>Navigation</h3>
      <ul class="main">
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
        <li><a href="" title=""># Navigation</a></li>
      </ul>
    </div><!-- end #sidebar2 -->
  </div><!-- end #wrapper -->

  <div id="footer">
    <p>Copyright © 2007 allebizsolutions.com Designed & Coded by All E Biz Solutions. All rights reserved.</p>
  </div><!-- end #footer -->
</div><!-- end #container -->
</body>
</html>

[D12Eminem989]

That's just what I was looking for buddy. The only thing thats wrong with that is. What if I want to add another block? Do I just copy and past? I don't think it's that easy I suppose? I have about 3 more blocks I want to add to the whole design. 1 more in the middle and 2 more on the left side. Is there a better way I should go about doing this?

 

Thanks for all the support buddy and what you have done. You were the only helpful person out of all of this. All I got on other web sites were "Your design and coding sucks". Then from there I get flamed.

 

Thanks buddy and I am looking forward to your reply.

[D12Eminem989]

Hey bronzemonkey I am cool with that. It wont let me reply to your message. You got time to help me with these few problems?

[D12Eminem989]

nvm i ditched the css issue. To much of a hassle. Did it my old way I do things. Thx for help thoe.

[bronzemonkey]

Nevermind i ditched the css issue. To much of a hassle. Did it my old way I do things. thanks for help thoe.

 

That's a shame. It would have been much easier in the long run. Good luck with the site.

[D12Eminem989]

Thanks, Maybe in the future I will try it out when I get the hang of it. I will refer back to this thread for some pointers. Thank you for your time.