Hi my html and css that i have coded is only valid in opera and does not run as it is meant to in firefox and safari. Can anyone help me fix it. The text input box is what is broken. here is the html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Husain Abdullah Al - Zabir" /> <title>WebSnips</title> <link rel="stylesheet" type="text/css" href="styles/main.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/rounded_corner.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/bottom_menu.css" media="all" /> </head> <body> <center> <div class="box"> <b class="tc"> <b class="L1"></b> <b class="L2"></b> <b class="L3"></b> </b> <div class="content"> <div class="box" style="width:100%;"> <b class="tc"> <b class="L1"></b> <b class="L2" style="background-color:#333333;"></b> <b class="L3" style="background-color:#333333;"></b> </b> <div class="content" style="background-color:#333333;"> <div style="width:630px; padding-top:10px;"> <div style="float:left; background-image:url(images/http.jpg); background-position:center; background-repeat:no-repeat; width:95px; height:40px;"> </div> <div style="float:left;"> <input style="height:28px; border:none; font-family:verdana; font-size:21px; color:#7d7d7d; padding-top:6px; padding-bottom:6px;" type="text" size="35" /> </div> <div style="float:left;"> <input type="image" value="submit" src="images/submit-button.jpg" /> </div> </div> <div style="clear:both; height:30px;"> </div> </div> <b class="bc"> <b class="L3"></b> <b class="L2"></b> <b class="L1"></b> </b> </div> </center> </body> </html> Code (markup): here is the css: #logo { width: 317px; height: 40px; /*background-image: url(../images/logo.gif);*/ background-image: url(../images/logo.jpg); background-position: center; background-repeat: no-repeat; } #logo-holder { padding: 20px; } #footer-logo { width: 609px; height: 40px; /*background-image: url(../images/footer-logo.gif);*/ background-image: url(../images/footer-logo.jpg); background-position: center; background-repeat: no-repeat; } #footer-logo-holder { padding: 5px; } #instruction { border-left:solid 4px #98CB00; padding-left:5px; font-family:verdana; font-size:17px; font-weight: normal; color:white; text-align:left; width:623px; } #instruction-holder { padding-top: 20px; padding-bottom: 20px; } .separator { width:10px; background-image: url(../images/separator.jpg); background-position: bottom; background-repeat: no-repeat; float: left; height:180px; } .urls { font-family: verdana; font-size: 12px; color: #7d7d7d; height:180px; font-weight: bold; line-height: 20px; width:203px; clear:both; padding-top: 20px; } .snips_name { font-family: verdana; font-size: 21px; color: #FFFFFF; text-align: left; } #top_snips { width:31px; height:38px; background-image: url(../images/top_snips.jpg); background-position: top; background-repeat: no-repeat; margin-right: 5px; float: left; } #latest_snips { width:38px; height:38px; background-image: url(../images/latest_snips.jpg); background-position: center; background-repeat: no-repeat; margin-right: 5px; float: left; } #partners { width:53px; height:38px; background-image: url(../images/partners.jpg); background-position: top; background-repeat: no-repeat; margin-right: 5px; float: left; } Code (markup): Can anyone help fix this? Thanks
You forgot to close 2 div- tags: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Husain Abdullah Al - Zabir" /> <title>WebSnips</title> <link rel="stylesheet" type="text/css" href="styles/main.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/rounded_corner.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/bottom_menu.css" media="all" /> </head> <body> <center> <div class="box"> <b class="tc"> <b class="L1"></b> <b class="L2"></b> <b class="L3"></b> </b> <div class="content"> <div class="box" style="width:100%;"> <b class="tc"> <b class="L1"></b> <b class="L2" style="background-color:#333333;"></b> <b class="L3" style="background-color:#333333;"></b> </b> <div class="content" style="background-color:#333333;"> <div style="width:630px; padding-top:10px;"> <div style="float:left; background-image:url(images/http.jpg); background-position:center; background-repeat:no-repeat; width:95px; height:40px;"> </div> <div style="float:left;"> <input style="height:28px; border:none; font-family:verdana; font-size:21px; color:#7d7d7d; padding-top:6px; padding-bottom:6px;" type="text" size="35" /> </div> <div style="float:left;"> <input type="image" value="submit" src="images/submit-button.jpg" /> </div> </div> <div style="clear:both; height:30px;"> </div> </div> <b class="bc"> <b class="L3"></b> <b class="L2"></b> <b class="L1"></b> </b> </div> </div> </div> </center> </body> </html> Code (markup): I'm not sure about the input box. However, now your code is W3C valid. Can I see this code live?
thanks for that, but it hasn't sorted out the problem, http://thepricedetective.com/layout/ notice how when you view it through opera it looks like a submission box but in safari and firefox it is broken up. Can anyone help me fix that? Thanks
well... but for me it doesn't work neither in ff nor opera nor anything else... How should it work? There is no form specified for this field and button like this: <form name="input" action="script.php" method="get"> <input type="text" name="url"> <input type="submit" value="Submit"> </form> Code (markup): so, the box, like it is now, doesn't work correctly hope this article at w3schools will help you: http://www.w3schools.com/html/html_forms.asp