Comic Discussion > QUESTIONABLE CONTENT

Optimized Homepage CSS

<< < (3/3)

bicostp:
Good call.

I think the last two lines were to fix issues with IE 6 and Safari.

Unfortunately, IE 6 doesn't render either of our chopped-up CSS pages correctly; it needs a left margin, and the sidebar doesn't show up where it's supposed to. :( Pretty simple fix to track down; it just needs center text alignment declared. It also messes up the right float, so the sidebar doesn't fit where it's supposed to.

This centers properly but doesn't put the sidebar where it belongs:

--- Code: ---body { text-align: center; background: #112b33; font: 11px/1.5em Helvetica,Arial,sans-serif; }
table { margin: 2px; }
img, table { border: 0; }
a:link, a:visited { text-decoration: underline; color: #f60; }
a:link:hover, a:visited:hover { color: #00c6ff; }
.inline-list { width: 100%; margin-top: 10px; padding: 0; }
.inline-list li { display: inline; padding: 10px; font-weight: bold; }
.inline-list a { margin: 4px; font-size: 24px; text-decoration: none; }
#comicnav { margin: 0; text-align: left; }
#comicnav a { margin: 4px; font-size: 18px; }
#container { width: 800px; margin: 0 auto; border: 4px #444 solid; border-width: 0 4px; background: #555; text-align: left;}
#comic { float: left; width: 600px; border: 4px #444 solid; border-width: 4px 4px 0 0; background: #444; }
#strip  { border: 1px solid #000; }
#side { float: right; width: 190px; text-align: left; color:#FFF; margin: 0px; }
#header { width: 800px; margin-bottom: 0; text-align: left; }
#archive, #news { margin-right: 0; padding: 2px; background: #fff; }
#adbar { width: 100%; height: 60px; overflow: hidden; padding: 0 0 2px; color: #666; }
/* fixes for weird browsers */
.clear { clear: both; }
#comic img { display: block; }
--- End code ---

Navigation

[0] Message Index

[*] Previous page