Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #24955
    droll13
    Member

    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:




    SIMPLIFIED MEETING PAGE STRUCTURE


    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.

    #58161
    Chris Coyier
    Keymaster

    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.

    #58170
    droll13
    Member

    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.

    #58180
    apostrophe
    Participant

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

    #58200
    droll13
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.