Welcome
Content Box
Some content in here...
Tue, 2007-06-26 15:14
Hi
I'm sure this is a real easy one :blushing: I have a feeling it's IE6 box model related, but have been reading up and can't find the answer.
http://www.blacknest-marketing.com/test/wp.htm
Works fine in FF and IE7. In IE6, the left hand content is pushed down beneath the main content (ie. the search form should be at the top of the page). If anyone could explain why this is happening, I'd be really grateful!
Thanks, Jason
Stylesheet:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background: #d5d6d7;
color: #333;
text-align: center;
}
#page {
background-color: white;
border: 1px solid #959596;
text-align: left;
}
#page {
background-color: white;
margin: 0px auto;
padding: 0;
width: 760px;
border: 1px solid #959596;
}
.narrowcolumn {
float: right;
padding: 0 18px 20px 10px;
margin: 0px 0 0;
width: 560px;
}
#sidebar ul, #sidebar ul ol {
margin: 0;
padding: 0;
}
#searchform {
color: #ffffff;
background: #006699;
margin: 0px 0px 0px -2px;
width: 164px;
padding: 0px 2px;
text-align: left;
font-size: 0.9em;
}
#sidebar #searchform #s {
width: 90px;
padding: 0;
margin: 6px;
vertical-align: middle;
font-size: 1.3em;
}
#sidebar
{
padding: 0 0 0 0;
margin-left: 12px;
width: 158px;
}
.contentbox {
border: 3px solid #006699;
margin: 5px;
}
Html:
Test
Tue, 2007-06-26 16:21
#1
Try removing the width from
Try removing the width from sidebar and adding a margin-right of 590px (if my maths is correct) or 580px accounting for the padding on the right element, perhaps better not to pad major elements the view is that it's better to margin or pad child elements.
Tue, 2007-06-26 17:17
#2
Thanks, but I tried
Thanks, but I tried completely removing the width from sidebar and IE6 still pushed it down :?
Strange!
Tue, 2007-06-26 20:01
#3
Not tested. Remove the
Not tested.
Remove the width property from #searchform. It is wider than the column, which causes IE to expand the column width, making it too wide for the allowable space. Modern browsers simply let it overflow.
cheers,
gary
Wed, 2007-06-27 18:24
#4
that works great - thanks!
that works great - thanks! 
Wed, 2007-06-27 18:56
#5
However simply removing the
However simply removing the input width won't sort the issue alone, padding on the right float plays a part and the ul form arrangement worries me slightly as that is slightly screwy and could probably do with hasLayout being triggered for IE.
btw you perhaps ought to be using fieldset and label elements for that form?
Thu, 2007-06-28 10:10
#6
thanks Hugo - I'm getting
thanks Hugo - I'm getting the feeling that this CSS file needs a major reworking and tidy up...
Thu, 2007-06-28 11:41
#7
I wouldn't say major, it's
I wouldn't say major, it's not that bad, markup could be improved with full form elements used, I'm not sure the form needs to be held in a li element, but that isn't an error as such.
The padding on the right side along with the ul element is at odds at times , padding is better kept away from outer elements , safer is an inner element that holds padding or a margin.