HTML/CSS not compatible?

ojsimon · 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

ToonMariner · 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...

ojsimon · 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?

noober · 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.

Sign In

HTML/CSS not compatible?

Recommended Posts

ojsimon

Link to comment

Share on other sites

ToonMariner

Link to comment

Share on other sites

ojsimon

Link to comment

Share on other sites

noober

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information