background image and text floating on top please help

[Orionsbelter]

ok, so i have a background image for my login and i want several boxes floating on top i used the CSS coding

 

#inner {
margin: 0 auto;
padding: 6px;
width: 33%;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
font-style: italic;
color: #CCC;
position: absolute;
text-align: center;
top: 176px;
left: 297px;
}

 

but however this doesn't always go in the right place i want, for example if i use different browsers it changes it place on the page or if there is a different screen resolution then it changes its place on the page

 

i need some help on this please how can i keep it on the same place where i set it?

[phpian]

this is not a php question! but try making the container of #inner position:relative; that may help you

[RussellReal]

okay, some browsers pixels are screwy, like firefox is a lil bulkier in my opinion. but what you could try doing, is setting left and top to a percentage.. or use javascript to find out the precise available height in your browser window..

 

however, your best bet, is to just develop with lets say an EXPECTED width.. so if you EXPECT 1,000 pixels wide.. or 900 atleast you KNOW where the center of 900 is,

 

((900 - WidthOfElement) / 2) would be where you would start your element.. this doesn't AT ALL fall under PHP HELP sadly..

 

but I hope I helped atleast a little lol