7 replies [Last post]
facelikebambi
facelikebambi's picture
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2007-06-26
Posts: 10
Points: 4

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

Welcome

Content Box

Some content in here...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

facelikebambi
facelikebambi's picture
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2007-06-26
Posts: 10
Points: 4

Thanks, but I tried

Thanks, but I tried completely removing the width from sidebar and IE6 still pushed it down :?

Strange!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 47 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

facelikebambi
facelikebambi's picture
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2007-06-26
Posts: 10
Points: 4

that works great - thanks!

that works great - thanks! Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

facelikebambi
facelikebambi's picture
Offline
newbie
UK
Last seen: 12 years 24 weeks ago
UK
Timezone: GMT+1
Joined: 2007-06-26
Posts: 10
Points: 4

thanks Hugo - I'm getting

thanks Hugo - I'm getting the feeling that this CSS file needs a major reworking and tidy up...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 8 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me