Firefox Looks Fine, IE Overlaps?

Discussion in 'HTML & Website Design' started by Claymation, Oct 16, 2006.

Thread Status:
Not open for further replies.
0
  1. #1
    I recently put together some map pages that look fine to me in Firefox, but somebody pointed out to me that in IE the entire left column gets overlapped by the center column.
    Can anybody take a look and help out a rookie regarding this?
    Thanks a bunch in advance!
    http://smalliehunters.com/bangslake
     
    Claymation, Oct 16, 2006 IP
  2. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #2
    it only overlaps when you get the browser width to a smaller resolution.

    You basically need to make IE use a min width. This is the trick I employ to make it work on my sites:

    put this after the <body>:
    <div id="inner">
    <div id="content">
    <div id="content2">

    and put this before the </body>:
    </div>
    </div>
    </div>

    Then in the CSS put this:

    #inner{padding-left:760px;float:left;}
    #content{margin-left:-760px;}
    #content2{position:relative;width:100%;}

    Make 760px be whatever size it takes for the text to not overlap in IE.
     
    DatR, Oct 16, 2006 IP
  3. Claymation

    Claymation Peon

    Messages:
    1,031
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Regarding the CSS, with or without the "#" ?
    I'm doing CSS inside the style tags on the pages.

    However, I did try what you suggest, and it still overlaps.
    : (

    http://smalliehunters.com/shabbonalake
     
    Claymation, Oct 16, 2006 IP
  4. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #4
    just put it like this between the <head> and </head>

    <style>
    #inner{padding-left:760px;float:left;}
    #content{margin-left:-760px;}
    #content2{position:relative;width:100%;}
    </style>

    the # is required as it is called div id=inner and when referencing a id= you put #inner, but if it were class=inner then you would have put .inner.

    give that a try
     
    DatR, Oct 16, 2006 IP
  5. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #5
    ok i just tried it locally and this worked:

    replace
    inner{padding-left:760px;float:left;}
    content{margin-left:-760px;}
    content2{position:relative;width:100%;}

    with this (it needs the # and 910 make it not overlap instead of 760):

    #inner{padding-left:910px;float:left;}
    #content{margin-left:-910px;}
    #content2{position:relative;width:100%;}
     
    DatR, Oct 16, 2006 IP
  6. Claymation

    Claymation Peon

    Messages:
    1,031
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I tried it on that last page above I linked to- still overlapping in IE.
    You may see it on View Page Source?
    Thanks for the tips, BTW!
    Just wish I could figure out the trick to make it work. :cool:
     
    Claymation, Oct 16, 2006 IP
  7. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #7
    did you try what i just posted? looks like you replied at the same time i posted my second post :)
     
    DatR, Oct 16, 2006 IP
  8. Claymation

    Claymation Peon

    Messages:
    1,031
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Claymation, Oct 16, 2006 IP
  9. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #9
    wow lol that doesnt do that locally...

    oh i just noticed you have it as
    <style>
    #inner{padding-left:910px;float:left;}<br>
    #content{margin-left:-910px;}<br>

    #content2{position:relative;width:100%;}
    </style>

    remove the <br> tags at the end... how did those get in there :)
     
    DatR, Oct 16, 2006 IP
  10. Claymation

    Claymation Peon

    Messages:
    1,031
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    0
    #10
    You are a genuine class act, my friend!
    I hope to someday get the chance to repay the favor.
    Thank you so much for your time.
     
    Claymation, Oct 16, 2006 IP
  11. DatR

    DatR Peon

    Messages:
    210
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #11
    no problem... glad I could help
     
    DatR, Oct 16, 2006 IP
Thread Status:
Not open for further replies.