problem aligning a background image (div/css)

can not centre it for cross browser (FF/IE/Opera)

[Somhairle]

hey guys,

been trying to fix this for a while...

I'm having some probs with my css on my site and FF/IE differences.

centering:
#splash-gallery, #splash-home
splash-gallery isn't keeping in the centre (i'm sure im leaving something out).
trying to get everything lining up in the centre of the browser in both FF/IE

#menu-bullet:
at the moment i'm using "▪" to make a square...is there any way i can add a customized 4x4 gif instead? (as I plan on changing the divider design from time to time)

background repeat image (gradient):
this is probably another impossible one, is it possible to make a 1x 1000px png stretch to the browser height? so that it scales when the browser is sized? (nb: this is a temp gradient with white top/bottom...the original is a dark grey to light grey gradient)

also, is there any way i can optimize the css? what should i take out/change? (if anything)

thanks for any help on this.

[edited by: jatar_k at 4:16 pm (utc) on Sep. 25, 2008]
[edit reason] no urls thanks [/edit]

[swa66]

Links are frowned upon out here. You should post code instead.

Since your menu seems to be a list, rip out the extra divider elements, they are layout, not content. You can use the bullets lists provide

list-style-type: square;

Will give you a square bullet.

Centering has a number of ways:

• text-align:center

  will center inline content. It should not touch other stuff (beware of IE).

• margin-left:auto; margin-right:auto

  will center the block itself (note it won't do much if the block has the width of the container) [Beware of IE, it sometimes refuses to do this]

• position:absolute;left:50%;margin-left:-X;

  position the block absolutely if you know the width and use half the width as negative margin (X is half the width)

• Probably a few more
  

There is no scaling of backgrounds in CSS 2.1

[Somhairle]

thanks for the info swa66! will give it a try.

also, if you do use a background image (repeat-x), can you use a background colour at the same time? for me when i do this, the background just comes up white (where the repeat-x gif ends...its 1 x 450px)...I wanted to have a gradient fade into the background colour (to be open to any monitor sizes)

[edited by: Somhairle at 12:04 am (utc) on Sep. 26, 2008]

[swa66]

Yep you can have both a background-color and a background-image. Just be careful when using the shorthand "background" property as it might overwrite previously set items. So, if you do use it, set both the color and the image at the same time.

See here for details:
[w3.org...]

[Somhairle]

Thanks swa66, that worked a treat (and simple).

(yep, I had shorthand before and the colour seperate on a new line)...all good for the moment!

[edited by: Somhairle at 6:25 pm (utc) on Sep. 26, 2008]