Results 1 to 7 of 7

Thread: Beating the 'buffer' in older browsers

  1. #1
    Join Date
    May 2005

    Beating the 'buffer' in older browsers


    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.



    If anyone can help, the code looks something like this:



    <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'


    <TABLE BORDER="0">

    <TR height="150">

    <IMG SRC="pics/homehed.gif" id="header"/>
    <TD width="32">
    <TD width="200" valign="top">

    <table BORDER="0" id="links"/>
    <td ALIGN="left"><A HREF="index.html"><img src="pics/homemouse.gif" border=0></A></td>

    <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>
    <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>
    <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>

    <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>
    <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>
    <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>

    <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>
    <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>




    <P>Page content


  2. #2
    Join Date
    Nov 2003
    Jerryville, Tejas
    The first thing I notice is you've got no doctype so IE will be in quirks mode.
    "Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it." Brian W. Kernighan

  3. #3
    Join Date
    May 2005
    What type of doctype should I use? Sorry about this, I'm a bit of a newbie.

  4. #4
    Join Date
    Apr 2005
    Bathurst, NSW, Australia
    plus you have 2 </head>'s Was this just done from moving from your page to this forum or is it actually like that?

  5. #5
    Join Date
    Jul 2005
    For use with the code you posted, I recommend the HTML 4.01 Transitional Doctype.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

  6. #6
    Join Date
    May 2005
    The two head tags was a copying mistake, sorry! It doesn't appear like that in the actual code.

  7. #7
    Join Date
    May 2005
    I've added the doctype but it didn't seem to make any difference - an other suggestions? The main page content is also sitting underneath the header - ie, it's ignoring the table format by basically displaying two table rows on top of each other. I have no idea why that's happening!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
HTML5 Development Center

Recent Articles