SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry navigation too low in IE6

    Hello everyone,

    I have recently updated the design on one of my websites. I did use a template
    that I downloaded from Open Source Web Design (I think) and everything is
    fine in FF, Safari etc. However, in IE 6, the sidebar navigation (<div id="links"> inside the <div id="sidebar"> ) is all the way at the bottom of
    the page.

    Among other disturbing results in IE 6 are the
    fonts are jagged and ugly looking, no matter which font-family i specify.
    BTW, it looks fine in FF Windows.

    I have tried specifying different positionings, which makes everything ok in
    IE 6, but messes it up in FF. I have tried making a different stylesheet and
    using the conditional "If IE" phrase, but this doesn't seem to work. I have also run the style sheet through validation and it came out fine. Please Help!

    www.sportswestreno.com
    Last edited by rooster; Sep 22, 2007 at 21:36. Reason: need website address

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You have experienced IE6's doubled float-margin bug on both the content and sidebar divs - IE6 will double the width of the margin of a floated element where the margin is in the direction of the float. Inline display fixes that. IE6 also has a hard time working out 1+1=2, sometimes the answer is 3. The widths of the divs and their margins exactly equals the total width, but IE6 doesn't think it fits. You don't need the right margin on the left-floated content div, and getting rid of it cures IE6 :
    Code:
    #content {
    	float: left;
    	width: 440px;
    	margin: 20px 0 20px 50px;
    	display: inline;
    }
    
    #sidebar {
    	float: right;
    	width: 200px;
    	margin: 20px;
    	display: inline;
    }

  3. #3
    SitePoint Member
    Join Date
    Jun 2006
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for this! some of this does help. However, now I have a new problem with a different website in IE6-
    go to: www.peakphysicaltherapy.us and you'll see that the left container
    displays way too low in IE, it fine in the other browsers. I seem to be having trouble getting it to recognize the ie stylesheet, and can't seem to make that
    column come up to its correct height no matter what I do....

    so frustrating!

    rooster

  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The first line before the doctype is causing browsers to go into quirks mode - the doctype needs to be the first thing on the page.
    Code:
    <!-- This template is Open Source as long as the footer links are not removed. Have fun. Greetings shocktone (www.shocktone.de)-->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


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
  •