Solved

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

Posted on 2006-07-03
4
228 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
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

#Citrix #Internet Explorer #Enterprise Mode #IE 11 #IE 8
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.
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.

744 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

12 Experts available now in Live!

Get 1:1 Help Now