css center an image?

[Anexxion]

how do I center an image that is in position: absolute;

trying to center the shadows, to work in both IE and FF.

www.voigrafic.com/golfsite/

[TheJoshMan]

Try this:



.container_shadow {
background:transparent url(http://www.voigrafic.com/golfsite/images/shadow.png) repeat scroll 0 0;
float:left;
height:1000px;
position:absolute;
right:3.1%;
text-align:center;
width:100%;
}

[TheJoshMan]

You could also add this to your "#container" to make it stretch to the bottom:



#container {
background:#F5F5F5 url(http://www.voigrafic.com/golfsite/images/bg_pat.gif) repeat scroll center top;
margin:0;
min-height:100%;
padding:0;
width:100%;
}

[Anexxion]

doesn't work

[rangana]

When you position element absolutely, setting the element to float does'nt makes sense:


.container_shadow {
background:transparent url(http://www.voigrafic.com/golfsite/images/shadow.png) repeat scroll 0 0;
float:left;
height:1000px;
position:absolute;
right:3.1%;
text-align:center;
width:100%;
}


Try t remove highlighted. There's no easy way to center an element that is positioned absolutely, you need to play with the left/top/bottom/right property to get it work.

One problem is that the element that is positioned absolutely will always be on that position no matter what the screen resolution is, that should be a drawback.

You might find it useful to set container_shadow div's parent element a relative position.

Hope that makes sense.

[Anexxion]

alright thanks that helped, now I have another problem

how can I align the search button and the textbox together?

http://www.voigrafic.com/golfsite/

it is seperated

[rangana]

Add float:left on search1 and input class in your CSS.

Hope that helps.