Re: Websites without tables

Hi David,

> This is my first website without using tables. When you look at it in
> Opera and Mozilla the menu items are not the  proper containers. It is
> ok in MSIE and even graceful degraded in NN4.61  How can I get it
> working in Mozilla and Opera?

The menu looks ok for me in the follwing browsers:
         Opera 6.05, 7.20, 7.23
         Firebird 0.7, Firefox 0.8
         Mozilla 1.4, 1.6
         K-Meleon 0.8.2.
         Netscape 7.1

However, as Tenley already remarked, you should consider putting the 
entire styling information into a separate stylesheet instead of using 
inline-styles.

I would like suggest another simplification. A menu like yours can be 
regarded as a par excellence candidate for unordered lists. Using these 
instead of neutral <div /> elements adds meaning to your source code and 
considerably reduces your markup:

         <ul id="mainMenu">
         <li><a href="index.php">Home</a></li>
         <li><a href="employment.php">Employment</a></li>
         <li><a href="manufacturing.php">Manufacturing</a></li>
         <li><a href="rehab.php">Rehabilitation</a></li>
         <li><a href="seniors.php">Seniors</a></li>
         <li><a href="dayservices.php">Adult Day Service</a></li>
         <li><a href="accessibility.php">Accessibility</a></li>
         <li><a href="contact.php">Contact Us</a></li>
         <li><a href="cedarcreek.php">Cedar Creek</a></li>
         <li><a href="foundation.php">Foundation</a></li>
         <li><a href="donate.php">Donate</a></li>
         <li><a href="volunteer.php">Volunteer</a></li>
         <li><a href="links.php">Affiliations</a></li>
         </ul>

The styling information for the above could be something like:

         ul#mainMenu li {
                 width: 132px;
                 height: 26px;
                 padding: 0 0 0 8px;
                 margin: 10px 0;
                 background: #fff;
                 color: #000;
                 font-family: Verdana, Arial, Helvetica, sans-serif;
                 font-size: 14px;
                 font-weight: bold;
                 line-height: 26px;
                 list-style: none;
                 }

The values I used might need a bit of tweaking and you could position the 
<ul /> element anywhere on your page.

For more information about using lists this article by Mark Newhouse is 
quite interesting:
http://www.alistapart.com/articles/taminglists/


Cheers,

jens


-- 
Jens Brueckmann
http://www.j-a-b.net/

HWG hwg-techniques mailing list archives, maintained by Webmasters @ IWA