Totally stuck with an IE7 CSS bug...

Hi all,

I'm working on this website - http://www.ecruprint.com - which is a custom skin for the e-commerce site Big Cartel.

Forgive the messy CSS files, I will be cleaning them up later!

I'm trying to debug for IE7, and have a weird bug where the CSS width is not being obeyed.

This is the code for one of my main divs:

#main-content {
margin:0 auto;
width:940px;
overflow:hidden;
text-align:center;
}

This results in perfect layout in Chrome, FF and Safari, but Explorer seems to ignore the width and spits it out as 537px instead!:confused:

I've been using DebugBar in Explorer to try and work out what's going on, and that's what gave me the the 537px figure. I really have no clue what's going on here, and I'd really appreciate any ideas.

Many thanks

Hello faboon,
You have no DocType? Can hardly expect IE to get it even close without one. See the links in my signature line, DocType and Validation will both help you.

In sexy.css:

/* Content -------------------------------------------------*/


* html #main-content {
width: 557px;
width: 537px;
}



/*============================================================
Navigation
============================================================*/

Yeah I've spotted that bit of code now - a simple search for "537px" in my CSS would've been a good start!

Thanks for the reply - this project is far from finished so I'll be looking at DocType and validation soon, thanks for the links.