Need Help with IE width (FF/Safari fine).

Discussion in 'HTML & Website Design' started by pyles, May 28, 2007.

  1. #1
    I am working on a site for my brother, to create the rounded corners I used two images saved as backgrounds to two divs (I find it to be a very easy way of doing things).

    I think the site looks great, but my brother checked it on his computer on IE and the width of the actual content div is wider than it is supposed to be.

    I was hoping I could get some help, as I am trying to get this done, ASAP.

    I have created a .zip with the files. If someone could take a look at them and give me some help I would appreciate it.

    Thanks!

    Live example:
    http://www.mileswilliams.net/work/web/old/ese/new/

    Download:
    http://www.mileswilliams.net/work/web/old/ese/new/ese.zip
     
    pyles, May 28, 2007 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    In
    div#header{
    	padding-left: 8px;
    	width:100%;
    	margin:0;
    }
    Code (markup):
    remove {width: 100%;}. In modern browsers, it just overflows by the 8px of padding; no harm, no foul. In IE, it enlarges its container. Without the width property, the div will simply expand to fill the available width, even allowing for the padding.

    You should add this ruleset.
    
    #footer p {
      margin: 0;
      }
    Code (markup):
    Modern browsers properly collapse the p's margin with its parent, causing a gap between #footer and the element below it. IE does not collapse margins properly.

    cheers,

    gary
     
    kk5st, May 28, 2007 IP
  3. pyles

    pyles Peon

    Messages:
    284
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks a lot Gary!
     
    pyles, May 29, 2007 IP