Background problems + a "columns" questi | WPDFD.com Forums

Matthstrife said:

11/20/04, 325 14 2004 2004:%i:1100934850 02:14:10

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 said:

11/20/04, 325 27 2004 2004:%i:1100939220 03:27:00

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 said:

11/21/04, 326 30 2004 2004:%i:1101015027 00:30:27

Do you mean

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 said:

11/21/04, 326 12 2004 2004:%i:1101035578 06:12:58

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 said:

11/22/04, 327 17 2004 2004:%i:1101104226 01:17:06

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 said:

11/22/04, 327 37 2004 2004:%i:1101105438 01:37:18

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 said:

11/22/04, 327 41 2004 2004:%i:1101116484 04:41:24

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 said:

11/22/04, 327 57 2004 2004:%i:1101117462 04:57:42

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 said:

12/01/04, 336 00 2004 2004:%i:1101916828 11:00:28

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 said:

12/01/04, 336 04 2004 2004:%i:1101917072 11:04:32

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