here is my code it works fine for FF but in IE search div goes all the way towards right, please help. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sluuurp - Power Of The Search</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; background:#000000; } #container { border: 0px solid #009933; margin: 0px auto; background: url(back.jpg) no-repeat top left; width: 100%; height: 750px; } #search{ clear:both; margin: 350px 0px 0px 350px; width: 300px; float: left; border: 1px solid #009933; } --> </style> </head> <body> <div id="container"> <div id="search"> <form id="form1" name="form1" method="post" action=""> <input name="Search" type="text" id="Search" value="Search" size="38" /> <input type="submit" name="Go" id="Go" value="Go" /> </form> </div> </div> </body> </html> Code (markup):
Well, you have a lot of properties I'm trying to figure out why they are even declared.... and you CANNOT rely on the width of ANY form element being uniform cross browser. You will find you are getting different widths in IE, Opera, Safari and FF. Though I see the 'big' problem - you are using the search ID twice... looks like Firefox is ignoring it on the input, rest of world is not.... or not... one's lower case and it is theoretically case sensitive. Hmm, I think IE is not case sensitive, and that's what's boning you. Though there are a number of other 'issues' - not the least of which not declaring a px font size or width on your text input inside a px width container - on my machine in Opera and IE the go button is ending up on a second line because of that. (again, large fonts/120dpi)
Now i have removed all the things but it still has same problem there is no extra id there is no duplication but it still going all the way to right <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sluuurp - Power Of The Search</title> <style type="text/css"> <!-- body { margin: 0px; background:#000000; } #container { border: 0px solid #009933; margin: 0px auto; background: url(back.jpg) no-repeat top left; width: 100%; height: 750px; } #search{ clear:both; margin: 350px 0px 0px 350px; width: 300px; float: left; border: 1px solid #009933; } --> </style> </head> <body> <div id="container"> <div id="search"> </div> </div> </body> </html> HTML: