August 19, 200818 yr Hi guys, Got a small problem with table widths (I think). I've managed to finalise my design for the site. All the placeholder text is displaying in the right place and all the DIV's and images are working. Everythings great and I'm ready to slot it into Actinic, however... Safari, Firefox and Opera all display my website correctly. Internet Exploder, chooses to ditch the last inch of my content table. To see what I mean, go here: http://homepage.ntlworld.com/t0mbop/. If you open this in ANYTHING other than Internet Exploder it works a treat, with all the spacing matching up and so forth. In IE though, the second table (main content one) is much shorter with no obvious explanation? Obviously I've tried obvious solutions but it changes it in the other browsers too, so If I get it correct in IE it's incorrect in the others and looks hideous. Heres my code, I'm pretty sure it's something to do with the CSS or the Table, but the code is good I think. Any help appreciated. <html> <head> <title>Atlantis Aquatics</title> <style type="text/css" > body { background-color: #73c2ec; text-align:center; margin:auto; font-family:Arial, Helvetica, sans-serif; } #header { background: url(logo2.png) center; background-repeat:no-repeat; height: 180px; width: 950px; margin-right: auto; margin-left: auto; margin-top: 0px; } #main { background: url(background-main.png) center; background-repeat:repeat-y; background-position:top; width:950px; margin-right:auto; margin-left:auto; text-align:left; overflow:auto; } #searchbar { width:950px; height: 20px; margin-right:auto; margin-left:auto; margin-top:155px; text-align:center; float:left; } #nav { padding-left: 45px; padding-top: 15px; font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-align:left; width: 195px; float:left; } #content { font-family:Arial, Helvetica, sans-serif; font-size:11px; font-weight:bold; text-align:left; padding-left: 17px; padding-top: 15px; float:left; width: 647px; } #footer { background: url(footer.png) center; background-repeat:no-repeat; background-position: top; height: 42px; width: 950px; margin-right: auto; margin-left: auto; } table.navigation { border-width: 1px; border-style: solid; border-color: #019cdf; border-collapse: collapse; background-color: white; width: 100%; } table.mainarea { border-width: 1px; border-style: solid; border-color: #019cdf; border-collapse: collapse; background-color: white; width: 100%; position:relative; } </style> </head> <body> <div id="header"> <div id="searchbar">in here goes searchy and navigational things </div> </div> <div id="main"> <div id="nav"> <table class="navigation" cellpadding="5"> <tr style="background-color: #019cdf;"> <td height="26" valign="center" style="font:Arial, Helvetica, sans-serif; color: #FFFFFF;">product categories</td> </tr> <tr > <td valign="top">main navigation</td> </tr> </table> </div> <div id="content"> <table class="mainarea" cellpadding="5"> <tr style="background-color: #019cdf;"> <td height="26" valign="center" style="font:Arial, Helvetica, sans-serif; color: #FFFFFF;">main content</td> </tr> <tr > <td valign="top">content main bits</td> </tr> </table> </div> </div> <div id="footer">footer and copyright stuff</div> </body> </html> Thanks
August 19, 200818 yr Any reason why you are using tables? The rest of the site uses DIV's and CSS perfectly fine.
August 19, 200818 yr This is an incorrect use of a table - so there's not really a table problem to solve
August 19, 200818 yr Tables. This seems like more of a table problem than an IE problem. Maybe you could consider dropping tables for your layout? Tables are for tabular data. You layout is not tabular.
August 19, 200818 yr well it is an incorrect use of tables as everyone else is saying. but I think your fix would be to change the width on the table.navigation to 195px; table.navigation { border-width: 1px; border-style: solid; border-color: #019cdf; border-collapse: collapse; background-color: white; width: 195px; } see if that works.
August 19, 200818 yr Wow three people saying the same thing, how about we leave it at that for now till Tom Davison comes back and replies
August 19, 200818 yr Author Right, ok an incorrect use of tables. I accept that. How else can I create exactly the same thing visually but without them? More DIV's within DIV's? Just seems a bit cluttered keep adding DIV's ontop of DIV's and the table thing wasn't a lot of code in reality, however if it's simply not going to work then I'll have to resolve! Would it be a case of making new DIV's with solid pixel borders and another DIV for the top bar with solid colour for the background? Seems like far more trouble than the tables (which consequently don't work I grant you) if what I'm thinking is right.
August 19, 200818 yr Right, ok an incorrect use of tables. I accept that. How else can I create exactly the same thing visually but without them? More DIV's within DIV's? Just seems a bit cluttered keep adding DIV's ontop of DIV's and the table thing wasn't a lot of code in reality, however if it's simply not going to work then I'll have to resolve! Would it be a case of making new DIV's with solid pixel borders and another DIV for the top bar with solid colour for the background? Seems like far more trouble than the tables (which consequently don't work I grant you) if what I'm thinking is right. What I recomended didn't work?
August 19, 200818 yr Author What I recomended didn't work? Firefox and other browsers remained the same (correct) but IE moved along slightly but not the full width. It's perhaps half the distance incorrect than what it was before, so an improvement but still not correct. Cheers
August 19, 200818 yr Author Anymore elaboration on my previous comment regarding how to replicate EXACTLY what I've got already just in a more browser friendly way? Cheers.
August 19, 200818 yr Still rather new myself, but what about <div id=content> <div id=nav></div> <div id=main column></div> </div> Then use css to align where needed. Hope that helps.
August 19, 200818 yr Author Yeah, I suppose, but can I set it to have a background colour where I've writted "product categories" and have a pixel border etc. I need to to look exactly the same as that, without tables if that's possible? Thanks.
August 19, 200818 yr Yes it is possible (and probably loads easier) for the border, just set the css for each div to something like border: 1px, #000000; as regards the header I'll just have a little look at my notes, or someone will be able to answer
August 19, 200818 yr Author Thanks Helen, managed to suss why the tables weren't working, poor width classes on my part. Now works on all browsers so I'll attempt the DIV's at a later date. Thanks guys.
Create an account or sign in to comment