Solved

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

Posted on 2006-07-03
4
237 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Citrix XenApp, Internet Explorer 11 set to Enterprise Mode and using central hosted sites.xml file.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
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 +…

749 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