CSS..

[~VINTAGE~]

Hey guys i have a small CSS issue that is kind doin my head in lol, ok i was designing a lil template for a whois script and the "Start Search" button i can't seem to get in the right place on firefox, in IE works fine (Haven't tried other browsers).

You can see what i mean here:

http://i-flex.us/webtools/whois/index.php

Firefox throws the button down to the left hand corner while it fits fine in IE:

Here is the CSS:

/* CSS Document */

body { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333333; }

a { color:#CC0000; text-decoration:none; }
a:hover { color:#666666; text-decoration:underline; }

#container { width:734px; margin:auto; }

#header { height:60px; padding:7px; }
#content { margin:auto; width:734px; }
#footer { padding:4px 10px 2px 10px;  color:#666666; font-size:12px; }

#lookup { background: url(../../images/acewhois-02.gif) no-repeat top left; position:relative; margin-bottom:10px; width:734px; height:80px; }
#lookup h1 { position:absolute; top:12px; margin:0px; padding:0px; left:10px; font-size:14px; font-weight:bold; color:#7f7a7a; letter-spacing:-1px; background:none; }
#search_for { width:553px; position:absolute; left:12px; bottom:12px; border:none; font-size:16px; padding:3px; }

#go_search { position:absolute; width:142px; height:34px; right:10px; bottom:9px; background: transparent url(../../images/acewhois_button.gif); border:none; cursor:pointer;}
#go_search:hover { background:url(../../images/acewhois_button_on.gif); }

#result { clear:both; background: url(../../images/acewhois-03.gif) top no-repeat; padding-top:7px; }
#result_content { border-left:1px solid #d2d2d2; border-right:1px solid #d2d2d2; padding:5px 10px 5px 10px; }
#result_bottom { background:url(../../images/acewhois-04.gif) no-repeat top left; width:734px; height:10px; }

h1 { color:#EC0034; text-transform:uppercase; background:url(../../images/acewhois_div.gif) bottom repeat-x; padding:0px 0px 3px 0px; margin:0px 0px 5px 0px; font-size:12px; }

.smalltext
{
	font-size:10px;
}

It seems to be this line thats causing the problem:

#go_search { position:absolute; width:142px; height:34px; right:10px; bottom:9px; background: transparent

Thanks in advance

[Woomera]

Well i checked the page with opera,firefox and ie.

in firefox yeah the search button goes to bottom right of the page.dont know why though but in opera and ie it doesnt look too good neither:

see? the right side of the search area is over the edge.and by the way im using 1280x1024 resolution.

and i hope you find the answer and let us know cause i have a similar problem with my website but in ie.

good luck.

[~VINTAGE~]

Hi mate thanks for you reply, i still didn't find a solution for this im thinking of recoding it from scratch and see how it turns out! really annoying lol.

[ABEO]

I always have problems using absolute positioning with FF.

I get around that by using Margins & Padding in loads of Divs.

I would show you an example but my web host has done a runner so I have no website to show

[gugutz]

did you evolve all the divs on the site in a primary div to make use of all the screen resolution users have?

absolute positioning always works for me here, and instead of what you are doing, my reference is firefox to see if something works right or wrong. IE always screws up my codes.