Jump to content

Recommended Posts

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:


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; }


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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 2 weeks later...

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

Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Create New...