Jump to content

HTML/CSS not compatible?


ojsimon

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.