Forum Moderators: not2easy
<table align="center" cellpadding="0" cellspacing="0" class="header" >
<form name="form1" method="post" action="">
<tr>
<td height="0" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="278" height="127" rowspan="2" background="images/logo.jpg"> </td>
<td width="256" height="127" rowspan="2" background="images/headerbg_part1.jpg"> </td>
<td width="266" height="28" background="images/search_bg.jpg" class="searchtable">Search:
<input name="textfield" type="text" class="searchfield"> <input name="Submit" type="submit" class="searchbutton" value="Go">
</td>
</tr>
<tr>
<td width="266" height="99" background="images/headerbg_part2.jpg"> </td>
</tr>
</table></td>
</tr>
</form>
</table>
<Eeek!>
any help greatly appreciated.
[edited by: Nick_W at 5:57 pm (utc) on Sep. 22, 2003]
[edit reason] no urls please / thanks! [/edit]
We notice you have a variety of contexts in your markup, care to include the CSS you have so far?
.logo {
background-image: url(../images/logo.jpg);
width: 278px;
height: 127px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top left;
}.part1 {
background-image: url(../images/headerbg_part1.jpg);
width: 256px;
height: 127px;
background-attachment: scroll;
background-position: top left;
margin-left: 23em;
background-repeat: no-repeat;
}
.searchtable {
font-family: Verdana;
font-size: 9px;
color: #000000;
text-align: center;
vertical-align: middle;
background-image: url(../images/search_bg.jpg);
background-repeat: no-repeat;
height: 28px;
width: 266px;
background-attachment: scroll;
background-position: top right;
}
.part2 {
background-image: url(../images/headerbg_part2.jpg);
width: 266px;
height: 99px;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: top right;
}
.searchfield {
font-family: Verdana;
font-size: 9px;
color: #000000;
background-color: #FFFFFF;
height: 15px;
width: 127px;
border: 1px solid #000000;
}
.searchbutton {
font-family: Verdana;
font-size: 9px;
color: #000000;
background-color: #FFFFFF;
width: 50px;
height: 15px;
border: 1px solid #000000;
}
#header img, #image img {
vertical-align: bottom;
}
Help on the centering? Now that I'm into it, it's killing me. A better way?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin: 0; padding: 0;
}
#box {
width: 815px; text-align: center; margin: auto;
}
.banner {
width: 800px; border: 1px solid #900; margin: .5em;
}
.leftcol {
width: 278px; height: 127px; border: 1px solid #900; float: left;
}
.centercol {
width: 256px; height: 127px; border: 1px solid #900; float: left;
}
.rightcol {
width: 266px; border: 1px solid #900; height: 127px; float: left;
}
.secondcell {
height: 28px; border-bottom: .1em solid #900; width: 266px;
}
</style>
</head>
<body>
<div id="box">
<div class="banner">
banner
</div>
<div class="leftcol">
left
</div>
<div class="centercol">
center
</div>
<div class="rightcol">
<div class="secondcell">
second cell
</div>
right
</div>
</div>
</body>
</html>
"banner_eg.html"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body {
margin: 0; padding: 0;
}
#box {
width: 800px; text-align: center; margin: auto;
}
.banner {
width: 800px;
}
.leftcol {
width: 278px; height: 127px; float: left;
background-image : url(images/logo.jpg)
}
.centercol {
width: 256px; height: 127px; float: left;
background-image : url(images/headerbg_part1.jpg)
}
.secondcell {
width: 266px; height: 28px; float: left;
background-image : url(images/search_bg.jpg)
}
.rightcol {
width: 266px; height: 99px; float: left;
background-image : url(images/headerbg_part2.jpg)
}
.searchfield {
font-family: verdana, geneva, arial, helvetica, sans-serif;
font-size: 9px;
color: #000000;
background-color: transparent;
position : relative; top: +4px; left: +21px;
width: 127px;
max-height: 15px;
border: none;
}
.searchbutton {
background-color: transparent;
position : relative; top: +7px; left: +22px;
width: 50px;
max-height: 15px;
border: none;
}
</style>
</head>
<body>
<div id="box">
<div class="banner">
<!-- img="images/banner.jpg" -->
</div>
<div class="leftcol">
<!-- img="images/logo.jpg" -->
</div>
<div class="centercol">
<!-- img="images/headerbg_part1.jpg" -->
</div>
<div class="secondcell">
<!-- img="images/search_bg.jpg" -->
<form name="form1" method="post" action="">
<input name="textfield" type="text" class="searchfield">
<input name="Submit" type="submit" class="searchbutton" value="">
</form>
</div>
<div class="rightcol">
<!-- img="images/headerbg_part2.jpg" -->
</div>
</div>
</body>
</html>
For my own part, I'm not sure of the reasoning for the larger box, as the full banner appears correctly in both Firebird and IE6 with a box of 800px.
I played with two selectors and found a couple of things to help control the search area, which you will notice in the above example.
This seems to work fine in Firebird, now, but in IE we run into trouble, which you will see for yourself. Please let us know if you find a solution that works, as this is an interesting problem for us CSS novices.
Thanks once again!
The larger box came from my using a border on the various divisions to keep on eye how all the elements were behaving while working on the problem. I had to add a little extra width to keep the floated divisions from breaking down. The 800px box wouldn't hold them with the borders. (At least in IE6)
Your response got me to looking at it again. Of course, removing the borders eliminated the need for a slightly larger box - but it also repaired the problem of the banner and the columns not centering quite correctly. I don't why they didn't in the first place or why that fixed it. It immediately corrected though.
It would have been a much cleaner example piece if I'd posted the code with {background-color: xxx;} delineating each box instead of the borders in the first place.
Funny thing about browsers... Wish they were more like seat belts: no matter how they're made, they all work the same way.
I hadn't taken into account the effect of the borders since I immediately removed them before going any further.
One hopes that ne00_99 will keep us posted on how the IE problem is finally solved. I've tried everything my little brain can come up with.
The behavior appears to be related to the original height of the Search division, in that the text area is Npx below the top of the window, which appears to be echoed in the lower division for some reason.
