www.webdeveloper.com
Results 1 to 7 of 7

Thread: Beating the 'buffer' in older browsers

  1. #1
    Join Date
    May 2005
    Posts
    10

    Beating the 'buffer' in older browsers

    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>

  2. #2
    Join Date
    Nov 2003
    Location
    Jerryville, Tejas
    Posts
    11,715
    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
    Posts
    10
    What type of doctype should I use? Sorry about this, I'm a bit of a newbie.

  4. #4
    Join Date
    Apr 2005
    Location
    Bathurst, NSW, Australia
    Posts
    3,357
    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
    Location
    USA
    Posts
    3,910
    For use with the code you posted, I recommend the HTML 4.01 Transitional Doctype.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    http://www.hut.fi/u/hsivonen/doctype
    http://www.alistapart.com/articles/doctype/
    http://www.juicystudio.com/choosing-doctype/
    http://www.w3.org/QA/2002/04/valid-dtd-list.html

  6. #6
    Join Date
    May 2005
    Posts
    10
    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
    Posts
    10
    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