SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    size of div container is equal to size of two child divs, but divs drop in IE

    Hey all,

    I am having a floating issue in IE 8 with this site:

    HL Law Group

    The divs involved are the following:

    #wrapper div 980px

    #main div 698px
    25px padding on left and right

    so 698 + 25 + 25 = 748px

    #panel div width 230px and border left and right 1px
    so 230 + 1 + 1 = 232px

    748 + 232 = 980px

    which is the width of the wrapper

    This works fine on Google Chrome, Firefox, and Safari.

    However, on IE 8, something strange happens.

    1) On the home page, the #main div drops below the #panel div, as if the main div is too wide to fit within the wrapper, but math above shows this behavior shouldn't happen

    2) If you go to the about page, you will notice that the #main div is not snuggled up against the #panel div, but rather there is a gap between them. But the math above shows that there should be no gap. So between the home and about pages, in IE, two very strange behaviors occur.

    In Google Chrome, Firefox, and Safari, it displays as expected.

    Thanks for response.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    For the first problem, try changing this:

    Code:
    #panel h4 {
      color: #FFFFFF;
      margin: 0.5em;
      text-align: center;
      text-shadow: 0.1em 0.1em 0.2em black;
    }
    to

    Code:
    #panel h4 {
      color: #FFFFFF;
      margin: 0.5em 0;
      text-align: center;
      text-shadow: 0.1em 0.1em 0.2em black;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for response. What might be the cause of the gaps between the panel and main content div?

  4. #4
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So added margin: 0; and padding: 0; to all divs that didnt have a pixel set to them and it appeared to address the gap in IE, mostly. But now I am forced to do a less efficient way of aligning text within the main div. I have to add padding, not to the main div (that would cause the gap in IE), but rather I have to add padding to the h1, p tags within the div, each one of them in order to space them away from edge of div. It seems pretty inefficient, but only solution I can think of.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,813
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    go back to the way you had it before.
    then try adding this as the FIRST LINE of your code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    btw, all your HTML should begin with a DOCTYPE

    hope that helps

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,296
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    go back to the way you had it before.
    then try adding this as the FIRST LINE of your code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    O dear, I should have spotted that. Well done, D_P!

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2010
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    go back to the way you had it before.
    then try adding this as the FIRST LINE of your code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    Amazing. That fixed a number of IE issues I was having, including a piece of javascript that was acting funky in IE.


Tags for this Thread

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
  •