Solved

Table based tabbed nav bar OK in IE - fix needed for Firefox

Posted on 2006-07-03
4
236 Views
Last Modified: 2011-09-20

Please see http://www.soulinks.org/sample-EE.php

Not sure if this is the use of background images or cell dimensions but while this looks fine in IE6 it all falls apart somewhat in Firefox. Separate rows are in separate tables.

I'd like to get a simple fix rather than reconstruct it because my client/boss would like me to spend as little time as possible, but would welcome any pointers to best practice for dealing with this sort of design.

Thanks

Scott


0
Comment
Question by:scottyh56
4 Comments
 
LVL 30

Accepted Solution

by:
GrandSchtroumpf earned 250 total points
ID: 17029918
You are not really heading in the right direction.
If you want to use tables for layout because you are not familiart with CSS-based layout, try to use as few tables as possible.  One thing you should definitely avoid is using empty cells.
Don't use a WYSIWYG editor.  Use a text editor and write your own code.  Simplify your code as much as possible by removing all unnecessary markup.

example:

            <td width="105" align="center" valign="bottom" background="images/ButtonDarkBlue.gif" class="menubar1">
              <div align="center">
                <p class="menubar1"><a href="soulSearchAllOnline.php" class="menubar1">Who's
                    On?</a></p>
              </div>
            </td>

why does that text need to be inside 4 different elements???  This should be more than enough:

            <td width="105" align="center" valign="bottom" background="images/ButtonDarkBlue.gif">
              <a href="soulSearchAllOnline.php">Who's On?</a>
            </td>


Don't systematically set classes on all your elements.
Set a class on the container and use longer CSS selectors.

example:

<table>
  <td class="menubar1"><a class="menubar1">lorem ipsum</a></td>
  <td class="menubar1"><a class="menubar1">lorem ipsum</a></td>
  <td class="menubar1"><a class="menubar1">lorem ipsum</a></td>
</table>

can be replaced with this:

<table class="menubar1">
  <td><a>lorem ipsum</a></td>
  <td><a>lorem ipsum</a></td>
  <td><a>lorem ipsum</a></td>
</table>

Then use these selectors:

table.menubar1 {
  [styles for the table]
}
table.menubar1 td {
  [styles for the cell]
}
table.menubar1 td a {
  [styles for the anchor]
}


Finally, you should use a doctype and validate your code (html and css) using the W3C validator:
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.soulinks.org%2Fsample-EE.php
http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.soulinks.org%2Fsample-EE.php

Currently the css validates but the html does not.


There is still a lot of work to do to turn that page into something decent.
Good luck.
0
 
LVL 18

Assisted Solution

by:Eternal_Student
Eternal_Student earned 250 total points
ID: 17029983
ok firstly .. you have chosen to use tables for layout purposes. I wouldnt advise this but if you are new to html/css then it can be a good way to start to understand code. The use of floated divs is prefered. Also you may want to validate your code here because I noticed you are not using a doctype and using some html that is no longer standards compliant:

http://validator.w3.org/

To answer your layout problem though I can show you what I changed in your code:

The first cell in your second menu table contained nothing ? This meant the other cells were stretching out so all I did was add this:

            <td align="left" height="34" valign="bottom">
                  &nbsp;
              </td>

The space at the top of your page was appearing because you had a spacer image in the first cell that was pushing everything down, so I changed it to this:

            <td rowspan="3" bgcolor="#7574c2" width="250" height="108" valign="top">
               <img src="sample-EE.php_files/logo.jpg" height="108" width="211">
            </td>

I would advise you to use css and not depreciated html so for instance that very cell would have the styles:

.cell {
background-color:#7574c2;
width:250px;
height:108px;
}

And then you would add the class to the cell like so:

<td rowspan="3" class="cell" valign="top">

Hope this helps.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Guacamole cut and paste issue 3 95
chrome tabs 3 78
How to specify a browser 14 58
disclaimer when opening internet 2 48
Problem I downloaded the Microsoft Internet Explorer 9 Beta, today, to give it a test drive and maybe write a review for the site, and it failed miserably and got stuck in a crash restart loop. The error message given is as illustrated below i…
This article offers some helpful and general tips for safe browsing and online shopping. It offers simple and manageable procedures that help to ensure the safety of one's personal information and the security of any devices.
This Micro Tutorial will demonstrate how to add subdomains to your content reports. This can be very importing in having a site with multiple subdomains.
How to create a custom search shortcut to site-search Experts Exchange using Google in the Firefox browser. This eliminates the need to type out site:experts-exchange.com whenever you want to search the site. Launch your Bookmark Menu: Press 'Ctrl +…

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question