horizontal white space disappears

Posted on 2011-04-28
Last Modified: 2012-05-11

I have two rows of plans on this page:
The horizontal white space between the two rows disappears when using IE9 in the compatibility mode.
Attached is an image showing no white space between the rows in compatibility mode.  no white space between rows
Any specific corrections to the style sheet would be appreciated.

Question by:TrueBlue
    LVL 16

    Accepted Solution

    The height in the element style <div style="width: 600px; height: 100px; "> is not applied.
    I suggest that you add some margin for a better control:
    <div style="width: 600px; margin-top: 10px; ">

    Open in new window

    LVL 42

    Assisted Solution

    by:David S.
    The "Compatibility View" in IE8 and IE9 attempts to emulate how IE7 would display the page. It's not always exactly the same, but it is accurate in this case.

    It looks like that because the <div>s used as containers for those two rows have "height:100px". (It's an IE7 bug.) I suggest you use "min-height:100px" instead.

    Also you should add this to your stylesheet:
    form {padding:0;margin:0;}

    Open in new window

    By the way, it's best to use classes instead of inline styles (style attributes) like that.
    LVL 3

    Assisted Solution

    Put below statement between two div tags
    <div style="height:35px"></div>

    See the attachement.

     Div statement

    Featured Post

    Looking for New Ways to Advertise?

    Engage with tech pros in our community with native advertising, as a Vendor Expert, and more.

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
    In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

    729 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now