Hi
I'm trying to fix a problem with how my page displays in some versions of IE. The page has a solid black bar down the side for the links - that's set as the background. Then it has a picture as a sort of header which is supposed to sit flush across the top of the screen (otherwise it looks ridiculous with the background showing through at the top above the header). Down the left hand side there are links (each of which is a gif file) and in the white space to the right is the page content.
I've used a stylesheet to fix how how these images sit on the page, and it displays perfectly in firefox and in netscape (and some versions of IE). I'm trying to see if there is some underlying html code I can use on browsers that aren't able to interpret the css commands.
Thanks
Bobby
If anyone can help, the code looks something like this:
--------------------------
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<link rel="stylesheet" type="text/css" href="style.css" />
<script language="Javascript">
<!--
if (document.images) {
button1 = new Image
button2 = new Image
button3 = new Image
button4 = new Image
button5 = new Image
button6 = new Image
button7 = new Image
button8 = new Image
button9 = new Image
button10 = new Image
button11 = new Image
button12 = new Image
button13 = new Image
button14 = new Image
button15 = new Image
button16 = new Image
button17 = new Image
button18 = new Image
button19 = new Image
button20 = new Image
button1.src = 'pics/home1.gif'
button2.src = 'pics/homemouse.gif'
button3.src = 'pics/books.gif'
button4.src = 'pics/booksmouse.gif'
button5.src = 'pics/forum.gif'
button6.src = 'pics/forumsmouse.gif'
button7.src = 'pics/faq.gif'
button8.src = 'pics/faqmouse.gif'
button9.src = 'pics/me.gif'
button10.src = 'pics/memouse.gif'
button11.src = 'pics/fan.gif'
button12.src = 'pics/fanmouse.gif'
button13.src = 'pics/contest.gif'
button14.src = 'pics/contestmouse.gif'
button15.src = 'pics/writers.gif'
button16.src = 'pics/writersmouse.gif'
button17.src = 'pics/contact.gif'
button18.src = 'pics/contactmouse.gif'
button19.src = 'pics/blog.gif'
button20.src = 'pics/blogmouse.gif'
}
//-->
</script>
</HEAD>
<BODY>
<TABLE BORDER="0">
<TR height="150">
<IMG SRC="pics/homehed.gif" id="header"/>
</TR>
<TR>
<TD width="32">
</TD>
<TD width="200" valign="top">
<table BORDER="0" id="links"/>
<tr>
<td ALIGN="left"><A HREF="index.html"><img src="pics/homemouse.gif" border=0></A></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="book.html" onmouseover="document.book.src=button4.src" onmouseout="document.book.src=button3.src"><img src="pics/books.gif" border=0 name="book"></A></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="PhpBB/index.php" TARGET="_new" onmouseover="document.forum.src=button6.src" onmouseout="document.forum.src=button5.src"><img src="pics/forum.gif" border=0 name="forum"></A></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="faqs.html" onmouseover="document.faq.src=button8.src" onmouseout="document.faq.src=button7.src"><img src="pics/faq.gif" border=0 name="faq"></A></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="bio.html" onmouseover="document.bio.src=button10.src" onmouseout="document.bio.src=button9.src"><img src="pics/me.gif" border=0 name="bio"></A></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="fanclub.html" onmouseover="document.fan.src=button12.src" onmouseout="document.fan.src=button11.src"><img src="pics/fan.gif" border=0 name="fan"></A></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="contest.html" onmouseover="document.contest.src=button14.src" onmouseout="document.contest.src=button13.src"><img src="pics/contest.gif" border=0 name="contest"></td>
</tr>
<td align="left"><a href="blog/index.html" onmouseover="document.blog.src=button20.src" onmouseout="document.blog.src=button19.src"><img src="pics/blog.gif" border=0 name="blog"></a></td>
</tr>
<tr>
<td ALIGN="left"><A HREF="contact.html" onmouseover="document.contact.src=button18.src" onmouseout="document.contact.src=button17.src"><img src="pics/contact.gif" border=0 name="contact"></A></td>
</tr>
</table>
</TD>
<TD>
<P>Page content
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Reply With Quote
Bookmarks