Layout: Background problems + a "columns" questi

started by Matthstrife on Nov 20, 2004 — RSS Feed

Matthstrife Matthstrife
Posts: 8

Yes, another newbie, how fun eh?  

Ok, seriously now, I have a problem with a div background image and h headers background color + image in Internet Exploder, as I like to call it.

div background: the background image appears but if I scroll up and down it partly disappear, like half of it or a line of a couple of pixels disappears.

h headers: the background color and image just won't show up.

Here is the partial CSS:

#news      {
     margin: 0 0 0 170px;
     background: url(images/backgrounds/newsbg.jpg) repeat-y;
     }

#news h3 {
     font-size: 13px;
     color: #FF0;
     background: #000 url(images/box_coin_1.gif) no-repeat;
     padding: 4px;
     padding-left: 25px;
     padding-right: 0;
     }


Also, what I am using to practice CSS happens to be a two column layout type. The left one with the navigation and some links to other sites. And of course the other column has the content. But if the content column is shorter than the menu/links one well the footer gets misplaced (read "too high". Is there a way to remedy to that?

Joe Gillespie Joe Gillespie
Posts: 528

matthstrife said:

Ok, seriously now, I have a problem with a div background image and h headers background color + image in Internet Exploder, as I like to call it.

div background: the background image appears but if I scroll up and down it partly disappear, like half of it or a line of a couple of pixels disappears.

h headers: the background color and image just won't show up.


Try adding overflow: hidden; to the div spec. I've noticed that when a background image repeats, IE(Win) overdraws the backgound by a few pixels. overflow: hidden; makes it look the same in all browsers.


Also, what I am using to practice CSS happens to be a two column layout type. The left one with the navigation and some links to other sites. And of course the other column has the content. But if the content column is shorter than the menu/links one well the footer gets misplaced (read "too high". Is there a way to remedy to that?


Add a thin horizontal spacer div under each pair of columns. Give it no width but a few pixels height.

Matthstrife Matthstrife
Posts: 8

Do you mean <div style="overflow: hidden;"> or directly in the CSS document?

I've tried either way and it doesn't seem to help. The image is about 500 px "tall" so in my test so far it hasn't started repeating.Would the image width and height have anything to do with it?

(By Forum Admin) Add a thin horizontal spacer div under each pair of columns. Give it no width but a few pixels height.
Well before I apply this I'll be me and ask: "Will it work even if my menu/links column is absolutely positionned?"

Joe Gillespie Joe Gillespie
Posts: 528

The IE ovedraw happens when the background image repeats regardless of the image size and I'm sure it is related to another problem mentioned in another posting...

http://www.wpdfd.com/cgi-bin/yabb/YaBB.pl?board=css;action=display;num=1100569576

The horizontal spacer will only work with a relatively positioned layout. I don't like the idea of layouts based upon absolute positioning. Fluid layouts bend, hard layouts break!

Matthstrife Matthstrife
Posts: 8

Allright, I'll have to fiddle with the relativity of it all.

Thanks for pointing to that other discussion, I'll give the solution a try and if it doesn't work I'll post a screenshot -- which I should have probably done in the first place.

Thanks for your time.

Matthstrife Matthstrife
Posts: 8

Ack! I give up. Ok here are the screenshots:

Netscape:
http://soundrebirthprod.theforsakenones.com/problems/netscape.jpg

IE:
http://soundrebirthprod.theforsakenones.com/problems/ie1.jpg

this one may be less relevant, but after putting it in fullscreen in IE:
http://soundrebirthprod.theforsakenones.com/problems/ie2.jpg

Joe Gillespie Joe Gillespie
Posts: 528

I'm assuming that you want IE to behave the same as Netscape and I can't see your markup or CSS so I'm guessing.

If I had to construct that layout, I would have a overall continer div for the grey background, with the background image, inside which would be five horizontal, relatively positioned div

container
  header
  top text
  middle graphic (fixed height)
  bottom text
  base (fixed height)

Have a look here...

http://www.wpdfd.com/forum2004/divtest.html

Matthstrife Matthstrife
Posts: 8

I see your method. I was kind of using what I saw on csszengarden. I uploaded the page on the server:

http://soundrebirthprod.theforsakenones.com/testCSS.htm

A few images may be missing, like the container image but that one is less important.

If there is no fixto my problem I will upgrade to what you did in divtest.htm and even then I think I will save that exemple, just in case

Ladynred Ladynred
Posts: 5

Ok. A couple of things.
The freaky IE behavior you're seeing is known as the 'peek-a-boo' bug and it can be handled.

http://www.positioniseverything.net/explorer/peekaboo.html

Kudos to you for trying out CSS ZenGarden's layout, I learned a ton from saving them and picking them apart.

To get the footer to stay at the bottom of un-even columns, you need what is called a 'clearing' element. There are several ways to do this, one requires a bit of additional markup, the other does not.

http://www.positioniseverything.net/easyclearing.html

I'd like to add that there is a gold mine of CSS information at the Wiki page for www.css-discuss.org. Eric Meyer is the shepherd for this list and there are many talented and helpful people there that can and will help you solve just about any CSS problem, especially the trickier ones

Matthstrife Matthstrife
Posts: 8

Allright. Thanks a bunch!   I'll give them a look and of course add to my favorites.

You must login to reply