Reply to thread

Message

<blockquote data-quote="MythosaAkira" data-source="post: 1098777" data-attributes="member: 2428">I'm working on re-designing my website to conform to Web standards and in the process I've finally switched over to using CSS as well (well, more than I was in the past). I've run into a problem, though, that I'm hoping someone here might be able to help with.The layout of my page is based off the &quot;Two Column Layouts&quot; method over at <a href="http://www.bluerobot.com/web/layouts/" target="_blank">BlueRobot</a>. The CSS they use basically gives you a header at the top of the page, a leftside menu, and a content area (pretty standard). My problem is that I want to put a border around each area: header, menu, and content. Using their method, where the menu has an absolute position and the content is relative, things line up fine in Mozilla, but not in IE. When I use absolute positioning for the content as well, everything lines up fine in both, but if the content area goes off the browser, IE doesn't display the lower border when you scroll down. Not a really big deal, but it would look better if IE did the same thing as Mozilla.Here's the (editted) CSS I'm talking about:#Header {&nbsp; &nbsp; margin:15px 20px 10px 20px;&nbsp; &nbsp; width: auto;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; height:90px;&nbsp; &nbsp; border-style: double;&nbsp; &nbsp; border-color: #8b4513;&nbsp; &nbsp; border-width:5px 5px;&nbsp; &nbsp; line-height:11px;&nbsp; &nbsp; background-color: #ffffff;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; }#Content {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:160px;&nbsp; &nbsp; left:220px;&nbsp; &nbsp; right:20px;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; border-style: double;&nbsp; &nbsp; border-color: #8b4513;&nbsp; &nbsp; border-width:5px 5px;&nbsp; &nbsp; background-color: #ffffff;&nbsp; &nbsp; }#Menu {&nbsp; &nbsp; position:absolute;&nbsp; &nbsp; top:160px;&nbsp; &nbsp; left:20px;&nbsp; &nbsp; width:140px;&nbsp; &nbsp; padding:10px;&nbsp; &nbsp; background-color:#ffffff;&nbsp; &nbsp; border:5px double #8b4513;&nbsp; &nbsp; line-height:17px;&nbsp; &nbsp; text-align: right;}Hope I'm being clear. I'm not very experienced with using style sheets, so I'm not sure if this is something I'm doing or something in one of the browsers.Thanks!</blockquote>

[QUOTE="MythosaAkira, post: 1098777, member: 2428"] I'm working on re-designing my website to conform to Web standards and in the process I've finally switched over to using CSS as well (well, more than I was in the past). I've run into a problem, though, that I'm hoping someone here might be able to help with. The layout of my page is based off the "Two Column Layouts" method over at [URL=http://www.bluerobot.com/web/layouts/]BlueRobot[/URL]. The CSS they use basically gives you a header at the top of the page, a leftside menu, and a content area (pretty standard). My problem is that I want to put a border around each area: header, menu, and content. Using their method, where the menu has an absolute position and the content is relative, things line up fine in Mozilla, but not in IE. When I use absolute positioning for the content as well, everything lines up fine in both, but if the content area goes off the browser, IE doesn't display the lower border when you scroll down. Not a really big deal, but it would look better if IE did the same thing as Mozilla. Here's the (editted) CSS I'm talking about: #Header { margin:15px 20px 10px 20px; width: auto; padding:10px; height:90px; border-style: double; border-color: #8b4513; border-width:5px 5px; line-height:11px; background-color: #ffffff; text-align: center; } #Content { position:absolute; top:160px; left:220px; right:20px; padding:10px; border-style: double; border-color: #8b4513; border-width:5px 5px; background-color: #ffffff; } #Menu { position:absolute; top:160px; left:20px; width:140px; padding:10px; background-color:#ffffff; border:5px double #8b4513; line-height:17px; text-align: right; } Hope I'm being clear. I'm not very experienced with using style sheets, so I'm not sure if this is something I'm doing or something in one of the browsers. Thanks! [/QUOTE]

Verification