ojsimon Posted February 8, 2009 Share Posted February 8, 2009 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> 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; } Can anyone help fix this? Thanks Quote Link to comment Share on other sites More sharing options...
ToonMariner Posted February 8, 2009 Share Posted February 8, 2009 Validate your markup first (i suggest you switch to a strict doctype) and make sure your css validates - after that if you still have problems come back and quiz us all - we'll be happy to help... Quote Link to comment Share on other sites More sharing options...
ojsimon Posted February 8, 2009 Author Share Posted February 8, 2009 Ok i have now made it w3c compliant http://thepricedetective.com/layout/ but notice how it hasn't fixed the problem, the submission box only looks normal in opera, in firefox and safari it looks like images separated. how do i fix this? Quote Link to comment Share on other sites More sharing options...
noober Posted February 10, 2009 Share Posted February 10, 2009 I'm frankly a little surprised it's working that well since the method you've used to center the whole page is with actual center tags. Anyhow, after validating your css, the submission box is being floated with no width declared, which might be causing the problem. FF looks fine but IE is where the problem you see is happening, for me. You've got bigger problems in Safari imo. If I were you, I'd would wrap the site in div tags to center it instead of actual center tags, then position your div tags with left, top, and as absolute where necessary, or at least for you search bar and graphics. Then you can implement a fix for IE positioning, because I'd be surprised if it still wasn't off a few pixels. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.