19 replies [Last post]
mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

I have a css layout with varying amounts of columns, the max being five. Those columns have a left border that's a dotted line. I'm using the background-image property to display that line on a repeat-y axis.

The problem I'm having is that the image only repeats as far down that y axis as there is content in the div block. But I need it to repeat all the way to the bottom of the section. The hard part for me is that the height of the section varies. Basically, the height is whatever height the deepest column's content is. So it's variable.

It seems pretty clear that the shorter div blocks are only have the height that their content dictates, therefore, the repeated background image stops repeating at that point.

This must be a common problem with a pretty easy solution, but so far, I haven't been able to figure it our, nor am I finding a solution anywhere.

Any ideas?

You can see an example at this link.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

BTW, among the things I've tried is the min-height property so that the blocks have at least some minimum height that the background image will have to follow. But aside from it's inaccuracy due to unpredictable column lengths, it's not universally supported, including by IE6, it seems.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 weeks 1 day ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

extend div block border beyond content

Hi mr slim,
It's not as simple as it first seems.
I suggest trying to put the background image in the #info div with a single image that has all the dotted borders.
Then set the background to white on #col2-5.

Other then that you may have to look at a JavaScript solution which finds the tallest column and sets the height of the others to the same.

Hope that helps

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

Thanks, Tony. I'll look into this.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

extend div block border beyond content

Turns out this isn't as difficult as it looks at first glance. The key turned out to be using containing divs for the groups. Once you do that, each group can be dealt with on its own without interacting with the other groups.

Firefox's DOM inspector and web developer extension will help you see the logic of my demo.

The background image is a quickie, created with html and capped. You should do better in the GIMP. Other images are as pulled from your site.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
 
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <meta name="generator" 
    content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" /> 
    <meta name="editor" content="Emacs 21" /> 
    <meta name="author" content="Gary Turner" /> 
    <meta http-equiv="content-type" 
    content="text/html; charset=ISO-8859-1" /> 
 
    <title>Slim's Galileo</title> 
 
<style type="text/css"> 
/*<![CDATA[*/ 
 
html, body { 
    margin: 0; 
    padding: 0; 
    } 
 
body { 
    color: #555; 
    background-color: white; 
    font: 83% tahoma, sans-serif; 
    text-align: center; 
    } 
 
p { 
    font-size: 1em; 
    margin-top: 0; 
    } 
 
h1, h2, h3 { 
    margin-top: 0; 
    } 
 
h3 { 
    font-size: 10px; 
    font-weight: normal; 
    } 
 
a { 
    color: #555; 
    text-decoration: none; 
    } 
 
a:hover { 
    color: black; 
    text-decoration: underline; 
    } 
 
#banner { 
    position: relative; 
    margin: 0 auto; 
    width: 750px; 
    text-align: right; 
    padding: 20px 0; 
    } 
 
#banner h1 { 
    float: left; 
    width: 157px; 
    } 
 
#banner img { 
    border: 0 none; 
    } 
 
#banner ul, 
#navbar ul, 
#navcol ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 
 
#banner li { 
    display: inline; 
    } 
 
#navbar-holder { 
    background-color: #999; 
    color: #eee; 
    border-top: 1px solid #555; 
    border-bottom: 6px solid #555; 
    } 
 
#navbar { 
    width: 750px; 
    margin: 0 auto; 
    text-align: left; 
    } 
 
#navbar li { 
    float: left; 
    width: 20%; 
    text-transform: uppercase; 
    } 
 
#navbar a { 
    color: #ddd; 
    background-color: #999; 
    font-weight: bold; 
    letter-spacing: 3px; 
    padding-left: 10px; 
    line-height: 2em; 
    text-decoration: none; 
    display: block; 
    border-left: 1px solid #eee; 
    } 
 
#navbar a.last { 
    border-right: 1px solid #eee; 
    } 
 
#navbar a:hover, 
#navbar a.youarehere { 
    color: white; 
    background-color: #555; 
    } 
 
#mainholder { 
    position: relative; 
    background: #eee url(mainbgcols.jpg) top center repeat-y; 
    } 
 
#main { 
    position: relative; 
    width: 750px; 
    margin: 0 auto; 
    text-align: left; 
    } 
 
#navcol { 
    float: left; 
    width: 140px; 
    padding: 25px 0 0 10px; 
    margin-right: 10px; 
    } 
 
#navcol a { 
    color: #555; 
    display: block; 
    text-decoration: none; 
    } 
 
#navcol a:hover { 
    color: black; 
    text-decoration: underline; 
    } 
 
#content { 
    margin-left: 150px; 
    } 
 
#content-header { 
    background-color: #eee; 
    padding-top: 25px; 
    margin-right: 3px; 
    } 
 
.contentcol { 
    width: 130px; 
    padding: 10px 10px 0; 
    float: left; 
    } 
 
.contentcol img { 
    float: right; 
    width: 15px; 
    border: 0 none; 
    } 
 
#footer { 
    width: 750px; 
    text-align: left; 
    margin: 0 auto; 
    } 
 
 
/*Tony Aslett's clearing hack*/ 
 
.clearing:after { 
    content: ".";  
    display: block;  
    height: 0;  
    clear: both;  
    visibility: hidden; 
    } 
 
.clearing { 
    display: inline-block; 
    } 
 
/* Hides from IE-mac \*/ 
* html .clearing { 
    height: 1%; 
    } 
.clearing { 
    display: block; 
    } 
/* End hide from IE-mac */ 
/*end clearing hack*/ 
 
/*]]>*/ 
</style> 
  </head> 
 
  <body> 
    <div id="banner" class="clearing"> 
      <h1><a href="#"><img src="glogo.gif" alt="Galileo logo" 
      width="157" height="35" /></a></h1> 
 
      <ul> 
        <li><a href="#">Sitemap</a> |</li> 
 
        <li><a href="#">Contact</a> |</li> 
 
        <li><a href="#">PDF</a></li> 
      </ul> 
    </div> 
    <!-- end banner --> 
 
    <div id="navbar-holder"> 
      <div id="navbar" class="clearing"> 
        <ul> 
          <li><a href="#" class="youarehere">Business</a></li> 
 
          <li><a href="#">People</a></li> 
 
          <li><a href="#">Partners</a></li> 
 
          <li><a href="#">R &amp; D</a></li> 
 
          <li><a href="#" class="last">Company</a></li> 
        </ul> 
      </div> 
      <!-- end navbar --> 
    </div> 
 
    <!-- end navbar-holder --> 
 
    <div id="mainholder"> 
      <div id="main" class="clearing"> 
        <div id="navcol"> 
          <h2 style="display: none;">Menu</h2> 
 
          <ul> 
            <li><a href="#">Goal</a></li> 
 
            <li><a href="#">Technology</a></li> 
 
            <li><a href="#">Commercialization</a></li> 
 
            <li><a href="#">Competitive Advantage</a></li> 
 
            <li>&nbsp;</li> 
 
            <li><a href="#">Download Factsheet</a></li> 
 
          </ul> 
        </div> 
        <!-- end navcol --> 
 
        <div id="content"> 
          <div id="content-header"> 
            <h2><img src="title_business.gif" alt="Business" /></h2> 
            <img src="splash_business.gif" width="580" height="160" 
            alt="" /> 
          </div> 
 
          <!-- end content-header --> 
 
          <div class="contentcol"> 
            <a href="#"><img src="arrow_goto_over.gif" title="more..." 
            alt="more..." /></a>  
 
            <h3><a href="#" title="more...">Goal</a></h3> 
 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
            elit.</p> 
          </div> 
          <!-- end contentcol --> 
 
          <div class="contentcol"> 
            <h3>col</h3> 
 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
            elit. Vivamus suscipit velit eu sapien. Curabitur non dui. 
            Praesent wisi dolor, tincidunt id, iaculis sed, 
            sollicitudin eget, quam. Quisque feugiat, nulla elementum 
            interdum fermentum, ante mauris venenatis purus, nec 
            egestas quam risus nec lectus.</p> 
          </div> 
          <!-- end contentcol --> 
 
          <div class="contentcol"> 
 
            <h3>col</h3> 
 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
            elit. Vivamus suscipit velit eu sapien. Curabitur non dui. 
            Praesent wisi dolor, tincidunt id, iaculis sed, 
            sollicitudin eget, quam.</p> 
          </div> 
          <!-- end contentcol --> 
 
          <div class="contentcol"> 
            <h3>col</h3> 
 
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing 
            elit. Vivamus suscipit velit eu sapien. Curabitur non 
            dui.</p> 
          </div> 
          <!-- end contentcol --> 
        </div> 
        <!-- end content --> 
      </div> 
      <!-- end main --> 
    </div> 
 
    <!-- end mainholder --> 
 
    <div id="footer"> 
      <p>&copy;2004</p> 
    </div> 
  </body> 
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

Wow! Gary, I can't thank you enough for the time and thought you've put into this. In a sense, I was trying to do what you have done, but you've simplified it more.

When I'm doing web stuff, the Firefox DOM Inspector is never closed and I've given this code a good look there already. I need to study it closer to get a better handle on this, because a few of the techniques are different than what I've done, but I'll get there soon.

Thank you very much again for your generosity! I'll come back and let you know how it goes.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

extend div block border beyond content

The beauty of css-p is that once you've got a handle on how you want to group things, it all just drops into place. The devil is in the detail. Laughing out loud

We had 24 for dinner and gift exchange tonight. It was not generosity on my part, but more like a sanity check to slip in here and write a few lines from time to time.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

In that case, I'm happy to have helped provide a needed escape for you. Laughing out loud

I'm giving this a good look and combining some of what I need to do with your structure. I'll keep you posted.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

Gary, I have a question for you as I work with what you gave me. Predictably, Firefox is a more reliable renderer of the expected than IE6/Windows is. The dotted line issue that was my original question here is solved nicely with your considerable help.

Now I want those lines to be covered in the block where the page title and image are located. I think you tried to address this by putting a background color in the containing <div>. In FF, it does the job, but not in IE. I've assigned a contrasting color to the style for that block so that the background that the color is affecting is clearly visible. In FF, it's the whole block. In IE, it's only the bottom 25% or so. I need it to be the whole block and don't understand why it's not.

Here is an example.

Do you know why IE6 renders things as this does?

I realize that you've been working on a Linux box, so I'm going to attach a screen grab in case you can't see what I am.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

Forgot the attachment, here it is:

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

extend div block border beyond content

Don't know why I didn't catch that. Too many Sam Adams, I guess. :roll: It's a disappearing background bug in IE. I forget the details, it has something to do with IE's faulty float model and its 'hasLayout' property. Give #content-header {position: relative;}.

One other thing that was bothering me was #mainholder. I thought it was overkill, and it was. Move the background property to #main, and remove all traces of #mainholder.

I see what you're doing with the margin divs. They are so inelegant compared to the display benefit that my sense of coding æsthetics is kicking and screaming :}

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

I think I need #mainholder in order to maintain the #efefef color to the left and right margins of the centered content area within. If I dump it altogether, that color reverts to the default white set in the html, body definitions. I could change that color to #efefef, but then I lose the white at the corresponding margins at the banner.

Any idea why Firefox adds to the padding in the banner? IE6 dimensions in that respect are what I want, but FF has too much padding. If I eliminate padding-bottom in the DOM Inspector, it's what I want, but if I do it in the actual file and display it in IE, there's no padding at all. Which is what I would have expected. What's up with FF there?

Agreed about the aesthetics of my margin divs. To make sure we're on the same page, it's so that the repeat-y lines of the background that is the source of my original question here does NOT start and end at the very top and bottom of that #main section. I need a #efefef margin there. Obviously, there's some flaws in my CSS coding to begin with that you're helping me with immensely, but is there a way around that one that would eliminate the need for those divs?

The current rev at the url linked to above is changes3.html.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

I hope I'm not asking too many questions, here.

Another browser irregularity question.

The #navcol div with the submenu that's the left column below the horizontal nav area is double spaced in IE6 using <ul><li> markup. It's single spaced as it should be in FF. That's why I used <br /> in my original code instead of lists.

Without doing javascript browser sniffing, I'd like to be able to use lists go get this to display properly cross-browser.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

extend div block border beyond content

I know why you're using the margin divs, I just don't think they're worthwhile. Too, I remember why (with your reminder) I put the #mainholder in there. Like the margin divs, it's another level of complexity. In this case, I actively prefer not having the gray extend edge to edge. The navbar is sufficient tie in. In fact, I really like the navbar width.

IE's whitespace bug applies to lists. Do this

 
<ul> 
  <li>item</li><li> 
      item</li><li> 
      item</li></ul>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

I now get the idea I'd better learn more about this IE whitespace bug. Thanks for the fix. There's one I'd NEVER have figured out via pure experimentation.

I understand about the editorial issues related to CSS elegance. Not my call in this case, though. There's room for changes if something's simply not going to work, but otherwise, I should stay reasonably faithful to the design, taking browser variations into account.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

extend div block border beyond content

mr slim wrote:
I now get the idea I'd better learn more about this IE whitespace bug. Thanks for the fix. There's one I'd NEVER have figured out via pure experimentation.

Think white space bug if there is a line-size gap below an element and that element has an implicit linefeed following it in the source. Check to be sure it's not caused by collapsed margins. Otherwise, remove the white space by bringing the next tag up to abut the closing tag of which you're suspicious. (The clumsy wording is in honor of Mrs. Stokes, my 7th grade English grammar teacher, who abhorred split infinitives and sentences that ended with a preposition. Smile )

continuing, mr slim wrote:
I understand about the editorial issues related to CSS elegance. Not my call in this case, though. There's room for changes if something's simply not going to work, but otherwise, I should stay reasonably faithful to the design, taking browser variations into account.

I understand. The graphics design people do tend to have influence well beyond their worth. Laughing out loud

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

The whitespace matter is now reasonably embedded in my mind.

The page is now at this link.

I have made some changes that you won't like, but can't avoid. The main one is that I had to reinsert javascript driven nav graphical menu links below the banner. Not my choice, really. Plus, the dividing line at the left edge of the rolled over link and the one to its right have to disappear on rollover, thus more JS to control that. The CSS is largely the same, other than commenting out some now superfluous stuff.

It's looking fine on IE6, but in FF there is a place with excess padding at the bottom of the banner, which has 20 extra pixels. I can't figure out why this is other than that it's related to the <h1> tag where the logo graphic is located. Nothing I try fixes this.

Worse, on both browsers, near the bottom of #navbar, but above the darker padding, are a few extra pixels. In FF that space is live when the mouse is over it, but not in IE. I can fix this by setting margin-bottom: -3px; in the #navbar li selector. It works, but seems like an avoidable workaround.

No small thanks to your contributions, Gary, I'm almost there. Any thoughts on these two matters?

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

OK, I fixed the Firefox extra padding thing by changing the css for the aforementioned <h1> tag so that margin-bottom is set to 0. I knew enough to try that as the first thing and thought I had, but obviously, I hadn't.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 47 weeks 4 days ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

extend div block border beyond content

You're right, I don't like it.Wink Using javascript for this adds an unnecessary level of complexity to what could/should be handled with css. Moreover, it adds nothing to the user experience—in fact, it subtracts for the 10%+ who have js turned off. We both know it's a lost cause, but we do have a responsibility to point out design shortcomings on the off chance a designer will wake up one morning with a modicum of clue. Tongue And, it's a chance to CYA Laughing out loud

Make h1 {margin: 0;}. It's a collapsed margin thing, which surprises me in this case due to the padding.

[edit]You slipped in on me while I ran errands. Good deal.[/edit]

Make #navbar-holder {height: 27px;}.

When a property value is 0, do not use a metric unit. 0 is 0. When a unit is called for, do not use pt. Use px or em, whichever is more appropriate.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

mr slim
Offline
Regular
Last seen: 15 years 3 weeks ago
Timezone: GMT-8
Joined: 2004-12-23
Posts: 31
Points: 0

extend div block border beyond content

The #navbar-holder height setting doesn't work in IE. I'd tried before that and tried it again now. So far, only my negative margin thing I mentioned a couple posts ago is working. It seems ugly, but I may have to go with it unless I can figure out another way.

Understood about 0 meaning 0. I'd already cleaned that up locally.

The design thing is a perennial issue. I wish the browser had evolved in such a way that implementing designs were largely separable from browser layout matters, i.e., html/css limitations, which are enormous. Of course, that's what Flash is for, but that just introduces another set of problems.