PDA

Click to See Complete Forum and Search --> : Great in IE7/FF, poor in IE6. CSS Positioning...

invision
11-06-2007, 09:46 AM
Hello,

I have an IE6 issue with the header of a web page.
In IE7, FF and Safari it looks great, but looks poor in IE6.

I've tried a number of hacks, but with no success.
The idea is that the search engine box goes aaaaaall the way to be in line with the right edge of the horizontal bar. It works in IE7, but not in IE6.

http://www.michaelmcg.co.uk/shouldntbe.jpg

http://www.michaelmcg.co.uk/shouldbe.jpg

Here's a link to the demo I made:
:: http://www.michaelmcg.co.uk/header.html

If anyone could help me out with this, i'd be eternally grateful.

Many thanks.
invision
11-06-2007, 05:27 PM
Don't normally like 'bumping', but this is still causing me a headache.

Any suggestions? Thanks for your time.
WebJoel
11-06-2007, 05:31 PM
A width issue with a container, -possible something is 'floated'... see screenshot..
invision
11-06-2007, 05:39 PM
Hello.

Sorry, I misunderstand.

Should the div that contains the graphic element not be floated?
WebJoel
11-06-2007, 05:45 PM
.sform .textfield {
color:#7d7d7f;
padding-left:110px;
padding-top:5px;
font-size:90%;
margin:3px;
height:20px;
width:155px;
border:solid 0 #fff;
background: transparent url("http://www.michaelmcg.co.uk/searchbox.gif") no-repeat fixed;
} Your text field was too long. I shortened it to 155px. See if this helps

No, -something was 'pushing' (usually a float-issue). Your textfield was longer than the container could 'contain'. Thnere still seems to be a problem with horizontal scrollbar in Fx, though... :confused:
Centauri
11-06-2007, 05:52 PM
I see you changed it whilst I was looking at it, and I see you worked out that the input padding adds to the width, and subtracted this from the total required.

Edit: sometimes it pays to refresh the page before I post ............

Joel beats me again .......! :rolleyes:
invision
11-06-2007, 05:55 PM
Whoop-whoo! :)

Fantastic WebJoel. How can I ever repay you?! :D

Again, many thanks for your help, brilliant stuff !
WebJoel
11-06-2007, 06:08 PM
Only semi-brilliant... other issues were present and may still vex..

Try this:
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
body {
font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
margin:0px 0px; padding:0px;
}

#container {width:99%; border:1px solid blue;margin:0px auto;}

#container img {border:0px;}

/*
HEADER
ELEMENTS
*/

#header {padding-top:15px; width:auto; padding-bottom:10px;}


#time {padding-top:35px; padding-right:0px;margin-left:1px;
width:auto; float:right; font-size: 11px;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; border:1px solid red;}

.sform .nobr{display:none}

.sform .textfield {
color:#7d7d7f;
padding-left:110px;
padding-top:5px;
font-size:90%;
margin:3px;
height:20px;
width:155px;
border:solid 0 #fff;
background: transparent url("http://www.michaelmcg.co.uk/searchbox.gif") no-repeat fixed;
}



</style>
<base href="http://www.michaelmcg.co.uk/" />

</head>

<body>

<div id="container">

<div id="header">
<img src="../img/cc_logo.gif" width="221" height="81" alt="CC logo" style="border:1px solid #000; float:left;" />


<div id="time">
<form action="search.php" method="get" class="sform">
<input type="text" id="searchbox" name="searchbox" class="textfield" maxlength="20" value="Search..." />
</form>
</div><!-- end TIME -->
</div><!-- end HEADER -->


<div id="navholder" style="margin-top:90px; border-top:10px solid black;">

<p>content, text, etc.</p>
<p>content, text, etc.</p>

<p>content, text, etc.</p>
<p>content, text, etc.</p>
</div>

</div>

</body>

</html> I don't quite have your layout figured out..

You don't actually even need #time... you could just position the "<form>" in "#head". Would eliminate another DIV and a float.
invision
11-07-2007, 02:29 AM
That's great - thanks!

Just a follow-up question. Why does the search box background graphic not appear in Safari?