Solved

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

Posted on 2006-07-03
4
231 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Bada platform is becoming more and more famous this days and people talking about same. Some friends included those who have bada OS mobile asked me "what is bada?"and "what its features?". That encouraged me to research and write this article. [st…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Google currently has a new report that is in beta and coming soon to Webmaster Tool accounts. This Micro Tutorial will highlight new features for Google Webmaster Tools.
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.

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now