Friends Site - Ok in IE, Slight Prob in Firefox

silverwex

Hey,

Im designing a site for a mate and have the following prob.

Check out http://www.thelostclassics.com - in IE it displays fine but in Firefox theres a grey bar at the top of the MENU section on the right that I cant get rid of!

Can someone please advise please. Thanks.

PS - Site is only 60% complete so dont worry about some links not working.

S.M.B.

Ugh, table based layout?

Why have you a p tag at the top of that column?

<td width="180" valign="top" bgcolor="#333333" rowspan="4">
<p>
<style type="text/css">
1
2a { text-decoration:none }
</style>
<script language="JavaScript">
1
2<!--
3function na_preload_img()
4{
5 var img_list = na_preload_img.arguments;
6 if (document.preloadlist == null)
7 document.preloadlist = new Array();
8 var top = document.preloadlist.length;
9 for (var i=0; i < img_list.length-1; i++) {
10 document.preloadlist[top+i] = new Image;
11 document.preloadlist[top+i].src = img_list[i+1];
12 }
13}
14
15function na_change_img_src(name, nsdoc, rpath, preload)
16{
17 var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
18 if (name == '')
19 return;
20 if (img) {
21 img.altsrc = img.src;
22 img.src = rpath;
23 }
24}
25
26function na_restore_img_src(name, nsdoc)
27{
28 var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
29 if (name == '')
30 return;
31 if (img && img.altsrc) {
32 img.src = img.altsrc;
33 img.altsrc = null;
34 }
35}
36
37// -->
</script>
</p>
<div align="left">
<table width="180" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="180" bgcolor="black">
<p>
<span style="font-size: 8pt;">
<font face="Arial">
<img width="180" height="30" border="0" src="reviews.png"/>
</font>
</span>
</p>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<p/>
<p>
</p>
<div align="left">
<table width="180" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="180" bgcolor="black">
<p> </p>
</td>
</tr>
<tr>
<td width="180">
<img width="180" height="30" border="0" src="linksmenu.png"/>
</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</div>
<p/>
</td>

silverwex

Yeah only learning CSS at the minute and love it so far but dont know enough to design a whole site with it at the moment.

Toiok out the p tag and still no change...

S.M.B.

If you take out the entire p tag (including the inline stylesheet & javascript and closing tag) it should look fine. It does for me anyway.

I like the look of the site. Good job. the sooner you get your head around non-table based XHTML the better though.

silverwex

Thanks SMB - will do that later... but I need the java and Stylesheet...?

Is it XHTML I should be learning for structure? How does it work if there are no tables in XHTML? Cheers

There are tables in every variant of HTML, and conventional wisdom is to use them only for displaying tabular data - not for layout.

Package your content in div tags and use CSS positioning and floats to lay them out. It takes a little while to get your head around it, but the code is much easier to read and understand.

cormee

They're nice designs (lostclassics and nmdesign), you owe it to yourself to upgrade to CSS based design

It's very frustrating at first but well worth it.