Having some trouble with IE7

Deleted User 234324

Deleted User 234324

Deleted User 234324

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.

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>
 
You must log in or register to reply here.
Back
Top Bottom