I have a free directory, 9searches.org. The way I aligned the sub categories is by using three-column table. I am not too smart with the <DIVs> and now I notice that Firefox separates the horizontal spacing more than IE. No biggie but you always want them both showing the same. If anyone can give me input to replicate the below using DIV I would appreciate it. Here is what I am doing with the table <table> <tr> <td width=33%>Category</td> <td width=33%>Category</td> <td width=33%>Category</td> </tr>..... Here a new row starts and dynamically loops repeating the above layout until the loop is over. and then </table> I need to do something like this using CSS / DIVs to ensure both browsers see it the same way. Take a look, go to the site, click on a category and see the sub-category section on both IE and firefox. Please help... Jovanky
Here's a fluid 3 column design: http://www.pmob.co.uk/temp/3colfluidtest_4.htm But to be honest I'd leave them as tables. The differences in IE and FF are very minimal if any at all from what I can see on your index page.
Here's another one for you to play around with. It's a bit more complex than Paul O'Brien's but it does serve the same purpose: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Three Column CSS Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="keywords" content="Keywords go here" /> <meta name="description" content="A description of this page goes here." /> <link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen" /> <style type="text/css" media="screen"> /* Stylesheet written by Dan Schulz on 28 January 2007. Stylesheet last modified by Dan Schulz on 08 February 2007. Stylesheet embedded into the HTML file for educational purposes. */ * { margin: 0; padding: 0; } html, body { height: 100%; } body { background: #FFF; color: #000; } #container { margin-bottom: -3em; min-height: 100%; } * html #container { height: 100%; /* IE 5.x and 6 don't understand min-height, but instead treat height as min-height */ } html>body #container { height: auto; /* for modern browsers as IE 5 and 6 treats height as min-height anyway */ min-height: 100%; /* squashes an IE 7 bug */ } h1 { background: #FCF; color: inherit; padding: 0.25em 0; } #menu { float: left; list-style: none; position: relative; /* this is needed to set the z-index */ width: 8em; z-index: 1; /* this is needed to fix a depth-sorting error */ } #menu li { float: left; /* IE 5.x bug fix */ width: 8em; /* this is needed since the LI is being floated */ } #menu a { background: #F66; color: #FFF; display: block; height: 1%; /* IE 5.01 bug fix */ text-decoration: none; text-indent: 0.25em; width: 100%; } #menu a:hover { background: #FF5; color: #000; } #main { float: left; margin: 0 -13em 0 -8em; width: 100%; } #content { background: #CCF; color: inherit; margin: 0 13em 0 8em; padding: 0 1em; } #content h3, #content p { padding: 0.25em 0; } #content p { text-indent: 1.5em; } #sidebar { background: #FFC; display: inline; /* IE 5 and 6 bug fix */ float: right; padding: 0 1em; width: 11em; } * html #sidebar { /* IE 5.x Box Model Hack */ width:13em; w\idth: 11em; } #sidebar p { padding: 0.25em 0; } #clear-footer { /* needed to make room for the footer */ clear: both; height: 3em; } #footer { background: #6CF; clear: both; color: inherit; height: 3em; } #footer p { padding-top: 1em; text-align: center; } </style> </head> <body> <div id="container"> <h1>Main Heading</h1> <ul id="menu"> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> <li><a href="#">Menu Item</a></li> </ul> <div id="main"> <div id="content"> <h2>Content Heading</h2> <div class="section"> <h3>Section Heading</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> <div class="section"> <h3>Section Heading</h3> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. Etiam sagittis est sagittis odio. Etiam mollis mi ac lacus. </p> </div> </div> </div> <div id="sidebar"> <h2>Sidebar Heading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In quis erat. Nulla auctor consectetuer erat. Sed est tellus, laoreet et, faucibus et, cursus ut, lectus. Nulla scelerisque, mi vel commodo consequat, turpis ligula congue ligula, eget pellentesque turpis augue quis diam. Nulla facilisi. Etiam commodo quam in metus. Etiam nec nisi ac nisl molestie fermentum. Donec ligula ipsum, venenatis in, egestas vel, commodo bibendum, est. Donec sit amet justo et leo tincidunt rhoncus. Cras aliquam sapien eget nisl. Maecenas vitae arcu et mi gravida porta. Nullam ultricies tempor magna. Sed vel tellus. </p> </div> <div id="clear-footer"></div> </div> <div id="footer"> <p> Copyright © 2006-2007, The Monster Under the Bed. All Rights To Scare Unsuspecting Children Reserved. </p> </div> </body> </html> Code (markup):
Thank you guys, what was causing the huge separation on the subcategory pages was the Image based <UL> tags. I just took them off and referred to the image directly. It looks much better now.