• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 252
  • Last Modified:

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


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
scottyh56
Asked:
scottyh56
2 Solutions
 
GrandSchtroumpfCommented:
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
 
Eternal_StudentCommented:
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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

Tackle projects and never again get stuck behind a technical roadblock.
Join Now