Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

CSS Tables in Netscape/Mozilla

Status
Not open for further replies.
RamDje

RamDje

Programmer
Apr 3, 2003
23
US
Hello all,

I am redesigning my website to be XHTML 1.0 Strict.

I am coming along fine except for this:
I am still using tables.....old school. My Nav Table has a background image all set up thru CSS. Even the table height and width is set thru CSS. It looks exactly the way I want it to on IE 5+, however, Netscape and Mozilla don't preview correctly.

Below is the code, and help would be greatly appreciated:

<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;<html>
<head>

<!-- This is the start of my CSS style sheet -->
<style type=&quot;text/css&quot;>
body {background-color: #e3e0dd}
h1 {font-family: verdana}
h1 {font-size: 11px}
h1 {color: #333333}
h1 {background-color: #e3e0dd}
p.nav {font-family: verdana}
p.nav {font-size: 10px}
p.nav {color: #FFFFFF}
p.nav {font-style: normal}
p {font-family: verdana}
p {font-size: 10px}
p {color: #333333}
P {font-style: normal}
p {background-color: transparent}
a {font-family: verdana}
a {font-size: 10px}
a {color: #333333}
a {font-style: normal}
a {background-color: #e3e0dd}
table.nav {height: 26px; width: 760px}
td.nav1 {background-image : url(&quot;images/midnav.png&quot; ); background-repeat: no-repeat}
td.nav1 {height: 26px}
td.nav2 {height: 26px; width: 11px}
td.nav3 {height: 26px; width: 207px}
</style>
<!-- This is the end of my CSS style sheet -->

</head>

<body>
<!-- Start Main Layout Table -->
<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td align=&quot;center&quot; valign=&quot;top&quot;>
<!-- Start Logo and Search -->
<table width=&quot;760&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr>
<td align=&quot;left&quot; valign=&quot;bottom&quot;><img src=&quot;images/logo.gif&quot; alt=&quot;logo&quot;/></td>
<td align=&quot;right&quot; valign=&quot;middle&quot;><p>TESTING</p></td>
</tr>
</table>
<!-- End Logo and Search -->
<!-- Start Navigation -->
<table class= &quot;nav&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot;>
<tr align=&quot;center&quot; valign=&quot;middle&quot;>
<td class= &quot;nav2&quot;><img src=&quot;images/leftnav2.png&quot; alt=&quot;leftnav&quot; /></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>home</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>about us</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>networks</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>web</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>computer</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>media</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>support</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>l</p></td>
<td class= &quot;nav1&quot;><p class=&quot;nav&quot;>contact us</p></td>
<td class= &quot;nav2&quot;><p class=&quot;nav&quot;><img src=&quot;images/rightnav.png&quot; alt=&quot;rightnav&quot; /></p></td>
<td class= &quot;nav3&quot;><img src=&quot;images/shopnav.png&quot; alt=&quot;shop&quot;/></td>
</tr>
</table>
<!-- End Navigation -->
</td>
</tr>
</table>
<!-- End Main Layout Table -->
</body>
</html>

Thanks in advance!!
-RRD


RRD
 
Sort by date Sort by votes
Did you see that the &quot;P&quot; in this line was capitalized:

Code: 
P {font-style: normal}

IE doesn't care about case, but other browsers do.

Cheers,


[monkey] Edward [monkey]

&quot;Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!&quot; -- inventor of the cat door
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
760
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
781
spamjim
spamjim
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
606
PeDa
PeDa
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller

Part and Inventory Search

Sponsor

Back
Top