Permabanned
- Joined
- 25 Oct 2004
- Posts
- 9,078
Trying to create a sort of rounded corner box for some of the elements on a site ive been working on and IE7 (not even bothered with IE6 yet) is doing my head in.
Basically both display things fairly correctly but for some reason IE7 has a large cap between the top and middle element and i cant see what or why that is.
If anyone could offer any tips or pointers on what is causing this i would be greatful.
Here is my html + css code for the rounded corner box, the images are pulled from our sites server.
Basically both display things fairly correctly but for some reason IE7 has a large cap between the top and middle element and i cant see what or why that is.
If anyone could offer any tips or pointers on what is causing this i would be greatful.
Here is my html + css code for the rounded corner box, the images are pulled from our sites server.
Code:
<!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" lang="en" xml:lang="en">
<head>
<title>Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.srchBox {
background:transparent url(http://www.torbuy.org.uk/images/header/imgHdrSearchBg.gif) repeat-x scroll right top;
height: 30px;
line-height: 30px;
}
.srchBoxE {
background:transparent url(http://www.torbuy.org.uk/images/header/imgHdrSearchLft.gif) no-repeat scroll left top;
}
.srchBoxW {
background:transparent url(http://www.torbuy.org.uk/images/header/imgHdrSearchRgt.gif) no-repeat scroll right top;
padding:0pt 11px;
white-space:nowrap;
}
div.snav {
background:transparent url(http://www.torbuy.org.uk/images/header/imgHdrCatsLft2.gif) no-repeat scroll left bottom;
margin:0pt;
padding:0pt;
position:relative;
height: 20px;
}
div.snavE {
background:transparent url(http://www.torbuy.org.uk/images/header/imgHdrCatsRgt2.gif) no-repeat scroll right bottom;
margin:0pt 0pt 0pt 10px;
padding:0pt;
height: 20px;
}
div.snavW {
background:transparent url(http://www.torbuy.org.uk/images/header/imgHdrCatsBg2.gif) repeat-x scroll left bottom;
margin-right:6px;
height: 20px;
}
</style>
</head>
<body style="margin: 0; padding: 0; width: 930px; margin: 0 auto; height: 150px; position: relative;">
<div class="wrap" style="clear: both;">
<form name="headerSearch" action="search.html" method="get">
<div class="srchBox">
<div class="srchBoxE">
<div class="srchBoxW">
<input type="text" class="srchfld" size="60" maxlength="300" value="" id="satitle" name="satitle" tabindex="1"/>
<input type="submit" tabindex="2" value="Search"/>
<a tabindex="3" rel="nofollow" href="advsearch.html" id="AdvSearchId">Advanced Search</a>
</div>
</div>
</div>
</form>
<div style="height: 60px; background: #fff; border-left: 1px solid #C0C0C0;border-right: 1px solid #C0C0C0; padding-left: 2px;">
<div style="width: 928px; height: 60px; margin: auto;">
<img src="images/header/banner-med1.gif" />
<img src="images/header/banner-med2.gif" />
</div>
</div>
<div class="snavwrap">
<div class="snav">
<div class="snavE">
<div class="snavW">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
