Grow your CSS skills. Land your dream job.

faux column display problems (IE works, others don’t)

  • # May 25, 2009 at 9:06 pm

    I’m updating my Art League’s website, and trying to add some minor style improvements. I’ve uploaded this simplified, broken version here:

    http://hbartleague.com/hidden/faux/SIMP … G_PAGE.htm

    Inconsistent results displaying faux Columns in different browsers.

    Strangely enough, it’s IE that displays as intended (even though Firefox is my deevelopment browser).

    In the following, I’ve replaced the many images and other elements with paragraphs of text. Both the XHTML and CSS validate.

    The background graphic is on the #container_wrap div; the right-hand sidebar column should have a full-height left border and a gradient effect.

    IE6 and IE7 display the faux column correctly. (Although IE7 adds a huge amount of space above the footer, but that’s another issue.)

    Firefox (3.04 and 3.08) show the vertically-repeated graphic, but only part of the way down the column. Safari 3.22 and Opera 9.64 don’t display it at all. IE6 and IE7 do display it properly.

    I’m stumped!

    Markup:
    =======

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.

    Members can enter our monthly show at the general meetings. Our guest demonstrator
    for the evening judges the entries prior to his/her demonstration.

    Single Ribbons are awarded for Best of Show, Master – Oil/Acrylic, Master – Watercolor, plus First, Second, Third Place,

    and Honorable Mention in each of 7 categories.




    CSS:
    ====

    Code:
    /*** BEGIN STYLE SHEET ***/

    /* zeroing out some browser defaults */
    body {
    margin: 0;
    padding: 0;
    }
    p, h1, h2, h3, h4, ul, li {
    margin: 0;
    padding: 0;
    }

    img {
    border: none;
    }

    body {
    font-family: Verdana, sans-serif;
    font-size: small;
    background: #fff;
    }

    h1#hbal_title {
    font-family: ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
    font-size: 360%;
    color: #0B397F;
    margin: -60px 0 0 100px;
    }

    h1#hbal_title_offset {
    font-family: ‘Lucida Grande’, ‘Lucida Sans’, Arial, sans-serif;
    font-size: 360%;
    color: #0B397F;
    color: #9CE0F7;
    margin: -60px 0 0 102px;
    border-bottom: 1px solid #0B397F;
    }

    #tagline {
    margin: 6px 0 -20px 100px;
    color: #0B397F;
    font-size: 1.0em;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    }

    h2 {
    margin: .5em 0 .2em 0;
    font-family: Georgia, serif;
    color: #0F68BA;
    color: #000080;
    }

    h3 {
    margin: .5em 0 0 0;
    font-family: Georgia, serif;
    color: #19419d;
    }

    p {
    margin: 0 0 1em 0;
    }

    dl {
    text-align: left;
    }

    #header {
    width: 980px;
    margin: 20px 0 -20px 20px;
    }

    #header p {
    position: relative;
    margin: -1em 0 -1em 6.6em;
    color: #0B397F;
    font-family: Georgia, serif;
    font-size: 130%;
    }

    #content_wrap {
    width: 1000px;
    background: #fff url(../images_pres/wrap_faux_bg.gif) repeat-y;
    }

    #content {
    float: left;
    margin: 10px;
    padding: 20px 10px 0 10px;
    width: 740px;
    font-size: 95%;
    line-height: 1.5em;
    color: #333;
    display: inline; /* fixes IE/Win double-margin bug */
    }

    #sidebar {
    width: 210px;
    float: left;
    margin: 20px 10px 0 0;
    padding-top: 20px;
    display: inline; /* fixes IE/Win double-margin bug */
    }

    #sidebar h3 {
    text-align: left;
    margin: 0;
    color: #00f;
    font-size: 100%;
    padding: 0 0 0 1em;
    }

    #sidebar p {
    padding: 0 1em 0 1em;
    font-size: .9em;
    }

    #footer {
    position: relative;
    width: 100%;
    height: 100px;
    clear: both;
    }

    #footer_1 {
    float: left;
    position: relative;
    clear: both;
    width: 49%;
    background: #fff url(../images/footer-1_BG.jpg) repeat-y left top;
    font-size: 70%;
    font-weight: bolder;
    line-height: 1.2em;
    padding: .5em;
    color: #036;
    margin-top: 5em;
    border-top: 1px solid #acb8d0;
    }

    #footer_1 a {
    color: #0000C0;
    }

    #footer_2 {
    float: right;
    float: left;
    position: relative;
    width: 49%;
    background: #fff url(../images/footer-2_BG.jpg) repeat-y right top;
    text-align: right;
    font-size: 70%;
    font-weight: bolder;
    line-height: 1.2em;
    padding: .5em;
    color: #036;
    margin-top: 5em;
    border-top: 1px solid #acb8d0;
    }

    #footer_2 a {
    color: #0000C0;
    }

    #footer_2 a:hover {
    background-color: #222;
    color: #FFF;
    }

    #footer_1 ul, #footer_2 ul {
    display: block;
    list-style: none;
    font-weight: normal;
    margin: -2px 0 0 0;
    }

    .top_nav_text {
    position: relative;
    width: 1000px;
    float: left;
    margin-top: 3em;
    margin-left: 0em;
    list-style: none;
    background: #0F68BA;
    display: inline; /* fixes IE/Win double-margin bug */
    }

    .top_nav_text li {
    float: left;
    margin: 0;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 75%;
    font-weight: bold;
    list-style: none;
    border-right: 1px solid white;
    display: inline; /* fixes IE/Win double-margin bug */
    }

    .top_nav_text a {
    float: left;
    display: block;
    margin: 0 1px 0 0;
    padding: 4px 8px;
    text-decoration: none;
    border-bottom: none;
    color: #9CE0F7;
    color: #80FFFF;
    display: inline; /* fixes IE/Win double-margin bug */
    }

    .nav a:hover {
    background: #ccc;
    color: #285598;
    font-size: 100%;
    }

    a.link_on {
    color: #289FE3;
    color: #152D49;
    text-decoration: none;
    font-size: 100%;
    }

    .rogers_map {
    position: relative;
    clear: both;
    margin-left: 0px;
    margin-top: 30px;
    }

    .galrow {
    width: 680px;
    /* clear: both; */
    float: left;
    margin-top: 20px;
    }

    I’m not used to seeing Firefox have problems while IE works as intended. Go figure…

    Anyway, thanks in advance.

    # May 25, 2009 at 11:00 pm

    Looks like a classic float clearing problem. Your content_wrap has two floated elements in it, so it’s collapsing to a zero height. Try setting overflow: hidden; on it and it should expand and show the gradient background you have on it.

    # May 26, 2009 at 12:02 am

    Thank you Chris,

    That did indeed let the background-image appear.

    However, it also introduced a gap between the bottom of the #content_wrap and the footer, noticeable because the graphic stops just above of the footer. I can get around this by applying a negative margin to the #content_wrap, but that will break if the user changes font-size.

    Still, it’s much improved, and I can live with it.

    Thanks again for the quick & effective response.

    # May 26, 2009 at 5:13 am

    Just remove the 5em top margin from footer_1 and footer_2.

    # May 26, 2009 at 1:14 pm

    Thanks, apostrophe.

    To update the status a little:

    Since adding overflow: hidden; to the #content_wrap on my simplified test page worked, I eagerly replaced the text content with my real content, which consists of rows of image/text units. (I’m using a class of galrow, which is floated left; inside each .galrow are two image/text units (.column 1 floated left and .column2 floated right) using definition lists.)

    Well, I still have some work to do, because most of the page (everything below the first .galrow) doesn’t display at all. No scrollbars to get to this content which should be further down the page.

    After some thought, I figured it might be the same as my original problem – floated elements inside floated elements – so I tried the overflow: hidden; declaration on the .galrow divs.

    This didn’t change anything – talk about "one step forward, two steps back." So I’ll look for another solution. If/when I solve this, I’ll update this thread.

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".