Page 1 of 3 123 LastLast
Results 1 to 10 of 25

Thread: CSS issues with layout in IE 5 & 6 stretching page

  1. #1
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default CSS issues with layout in IE 5 & 6 stretching page

    I'm still fairly green to CSS, but am learning bits here and there and trying to build some kind of foundation so I can get away from using tables again.

    I'd just finished a page and it was looking great, until I checked it out on the computer at work that must be using IE5.5 or 6 on XP or something lower than IE7 (which I am using). My friend uses Firefox and says it displays fine in his.

    I have what I would consider a simple css layout.

    wrapper
    menu
    content on the right
    footer


    What is the bug fix to stop IE from making my content area too big that it ends up way down the page (when it's supposed to be top-right (next to the left menu area).

    Or do I need to provide my ugly scripting so you can figure out what I'm on about? (it really is ugly because i just validated it and ended up with a stack of extra code). Basically, old versions of IE are displaying the page stretched and yet it works fine in IE 7 and seems fine in all other browsers.

  2. #2
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    I've been doing heaps of reading on my issue and I came across this. I'm a bit stuffed to be playing with it tonight, but here's the link I found on the Tan Hack (never heard of it before)

    I'll have a go with it tomorrow and see if it helps. Until I started trying to learn CSS, I didn't realise what a pig IE was.

  3. #3
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    <link href="vmenu.css" type="text/css" rel="stylesheet">
    <style type="text/css">
    body {word-wrap: break-word;}
    input.c3 {color: black; font-family: verdana; font-size: 8pt; font-weight: bold; background-color: white;}
    span.c2 {color: #FFFFFF; font-family: Garamond; font-size: 80%}
    div.c1 {text-align: center}
    #wrapper {
    width:90%;
    position: relative;

    }

    #content {
    width: 65%;
    float: right;


    }


    #menusection {
    width: 20%;
    float: left;
    text-decoration:none;


    }

    #footer {
    font-size:8pt;
    line-height:9pt;
    font-family:verdana;
    font-weight:normal;
    clear:both;
    float:right;
    width:65%;
    }
    </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="menusection"><img src="/cha1.jpg" width="255" height="200" alt="Chaos"> <script language='JavaScript' src="/vmenu.js" type="text/javascript">
    </script> <noscript>Your browser does not support JavaScript!</noscript></div>
    <div id="content">
    <div class="c1"><img src="/cha2.jpg" alt="Chaos Designs"></div>
    <br>
    <div class="c1"><img src="/images/4etchers.jpg" alt="Ravenous"></div>
    <br>
    <br>
    <div class="c1">Ravenous' expertise spans over two decades. Utilising a variety of mediums including: granite, paints, pencils, charcoals, ink pens, metals, mirror, glass, skin and tile; he has the skill and imagination to craft a masterpiece or monument which is second to none. His artistic incline stems from the sheer love of creation and the desire to bring concepts and visions to life. Pictured above, he is working on one of his <a href="/monuments6.html">creations</a></div>
    <br>
    <br>
    <br>
    <br>
    <center>
    <img src="/images/blackbar.gif" width="317" height="18" alt=""><br>
    <a href="/view.html">View</a> / <a href="sign.html">Sign</a> Guestbook<br>
    <img src="images/blackbar.gif" width="317" height="18" alt=""><br>
    <br>
    <table border="1" cellpadding="1" cellspacing="1" width="300">
    <tr>
    <td>
    <form method="post" action="http://www.bfnsoftware.com/cgi-bin/home/Members/MailList/MailList.cgi"><input type="hidden" name="User" value="26083"> <input type="hidden" name="List" value="1743">
    <table border="0" cellpadding="0" cellspacing="0" bgcolor="#000000" width="280">
    <tr>
    <td width="280" height="10" bgcolor="#000000" align="center"><span class="c2"><strong>Be notified of updates</strong></span></td>
    </tr>
    <tr>
    <td width="280" height="20" bgcolor="#000000">
    <table border="0" cellpadding="1" cellspacing="1" width="280">
    <tr>
    <td width="280" align="left"><span class="c2"><strong>E-Mail:</strong></span> <input type="text" name="Email" value="" size="22"><br></td>
    </tr>
    <tr>
    <td width="280" align="center"><input type="submit" value="Subscribe" class="c3"></td>
    </tr>
    </table>
    </td>
    </tr>
    </table>
    </form>
    </td>
    </tr>
    </table>
    <br>
    <br><center>This site is in the process of being relocated to this webserver and therefore some of
    the links won't work yet. The site is still up and running at <a href="http://chaosdesigns.110mb.com/index.html" target="new">http://chaosdesigns.110mb.com</a> if you wish to view all Ravenous' artwork. - Webmistress Sun Nov 25th</center>
    <br>
    <br>
    <br>
    <br>
    <br>
    <BR>
    <BR>
    </center></div>
    <div class="c1" id="footer">All images &copy;Copyright 2007 Ravenous (Chaos Designs).<br>
    No graphics, photographs or concepts are to be reproduced without express permission of the artist.</div>
    </div>
    I know my combination of css and tables will be frowned upon by the CSS gurus here, but I'm learning and i haven't got the time right now to apply another means - however, I have validated this page (with meta tags etc).

    In IE 5.5 & 6 it displays the content way down the page and it should be at the top.

  4. #4
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    I find hacks and either they don't work, or I'm not implementing them properly. HELP? I swear this is driving me nuts.

  5. #5
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default



    See my problem? But it renders correctly in all other browsers except IE6 and IE 5.5

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,494
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Code:
    /* Hide from IE5-Mac \*/
    #content
    {
    	float: none
    }
    /* End hide */
    {CWoT - Riddle } {Freelance Copywriter} {Learn to Write}
    Follow Me on Twitter: @InkingHubris
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Nov 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Eternal_Howl View Post


    See my problem? But it renders correctly in all other browsers except IE6 and IE 5.5
    I'd love to help but for now i have no idea of how to fix it.
    BTW i am using a script which displays banners in my web site, it works good in IE 6 or lower but does not displya any images when viewed with IE7
    Any suggestions?
    Hexkrypt0r

  8. #8
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    Thanks for your response Blizzard, I will try that.

  9. #9
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by hexkrypt0r View Post
    I'd love to help but for now i have no idea of how to fix it.
    BTW i am using a script which displays banners in my web site, it works good in IE 6 or lower but does not displya any images when viewed with IE7
    Any suggestions?
    Hexkrypt0r
    I'm not sure if this sounds like your problem, but if you haven't already read it: http://dynamicdrive.com/forums/showthread.php?t=26858

    From what I've been reading about anything lower than IE 7, IE 6 is running in quirks mode and I think IE5.5 is as well. That probably doesn't mean anything to you, but basically, with the hassles I've been having with my layout, I have determined that if it looks fine in IE5.5 or 6 then it probably sucks in IE 7 and vise versa. IE has some issues that have been resolved or fixed that weren't in the older browsers. IE doesn't obey the accepted web standards apparently, which gives people like you and me a headache. The script you are using for your banner, is it a PHP script? I would suggest you post your scripting on to a new thread so it gets full attention and someone can take a look at it.
    Last edited by Eternal_Howl; 11-27-2007 at 05:50 PM.

  10. #10
    Join Date
    Jul 2007
    Location
    New Zealand
    Posts
    81
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by BLiZZaRD View Post
    Code:
    /* Hide from IE5-Mac \*/
    #content
    {
    	float: none
    }
    /* End hide */
    Hi Blizzard,

    I have tried using this but it didn't seem to work for me.

    Is it wrong to use percentages as opposed to specifying pixels in your divs? I mean I would have thought it would render better for more screen resolutions.
    Last edited by Eternal_Howl; 11-28-2007 at 07:21 AM.

Bookmarks

Posting Permissions

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