Forum Moderators: not2easy
I'm hoping someone might be kind enough to take a look at my style sheet and tell me where I'm going wrong!
The navigation list on the left hand side only displays as required in IE - Safari, Firefox and Chrome have issues with my poor programming.
The website is <snip>, and the style sheet is pasted below.
The only way I can keep my gif dividers in place on the left is by including them within <a> tags, although I know this is ugly. There's a clash somewhere, but I can't see it!
/* Main layout and header */
body {background:url(img/bg.gif) repeat-y top center #ffffff; color:#999999; font:80% Arial,Verdana,Tahoma,sans-serif; line-height:1.4em; margin:0 auto; padding:0;}
#wrap {background:#fff; color:#999999; margin:0 auto; padding:1px 5px; width:760px;}
#header {float:left; background:url(img/front.jpg) no-repeat bottom left #fff; color:#505050; height:90px; width:148px; margin:0 0 10px; padding:0;}
#headermission {background:url(img/front-mission.jpg) no-repeat bottom left #fff; color:#505050; height:90px; width:760px; margin:0 0 10px; padding:0;}
#header h1 {font-size:2.5em; font-weight:400; letter-spacing:-2px; margin:0 0 15px 15px; padding:20px 0 0;}
#header h1 a,#header h1 a:hover {font-weight:400; padding:0;}
#header p {font-size:1.1em; letter-spacing:-1px; margin:0 0 20px 15px; padding:0 0 0 3px;}
/* Left sidebar and menu */
#leftside {clear:left; float:left; margin:0 0 0px; padding:0; width:148px;}
#leftside ul.avmenu {list-style:none; margin:0 0 0px; padding:0; width:148px;}
#leftside ul.avmenu li {display:inline; padding:0; width:148px;}
#leftside ul.avmenu li a {background:#ffffff repeat-x bottom left #ffffff; border-bottom:0px solid #ffffff; border-left:0px solid #ffffff; border-right:0px solid #ffffff; border-top:0px solid #ffffff; color:#999999; float:left; font-size:1em; font-weight:200; margin-bottom:1px; padding:0px 0px px 0px; text-decoration:none; width:148px;}
#leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {background:#ffffff repeat-x bottom left #ffffff; border-bottom:0px solid #ffffff; border-left:0px solid #ffffff; border-right:0px solid #ffffff; border-top:0px solid #ffffff; color:#02A1BC;}
#leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 0px; padding:0 0 0px 0; width:148px;}
#leftside ul.avmenu ul a {padding:0px 0px 0px 0px; width:148px;}
#leftside ul.avmenu ul ul {font-size:0.9em; width:148px;}
#leftside ul.avmenu ul ul a {width:148px;}
#leftside h2 {font-size:1.5em; font-weight:400; color:#009999;}
/* Right sidebar */
#extras {float:right; margin:10px 0 10px; padding:10px; width:180px; background-image: url(img/gradient.gif); background-repeat: repeat-x;}
#extras p,#extras ul {font-size:1em; line-height:1.3em; font-weight:400; margin:0 0 1.5em; padding:0; color:#ffffff;}
#extras li {list-style:bullets; margin:0 14px 4px; padding:0;}
#extras h2 {font-size:1.1em; font-weight:700; letter-spacing:0px; margin:0 0 6px; color:#02A1BC;}
#extras h3 {font-size:1.3em; font-weight:900; letter-spacing:0px; margin:15px 0 6px; color:#ffffff;}
#extras h4 {font-size:1.1em; font-weight:700; letter-spacing:0px; margin:15px 0 6px; color:#ffffff;}
/* Main content */
#pageimage {float:right; width:600px; padding:5px 0px;}
#content {line-height:1.5em; margin:0px 200px 10px 160px; padding:10px; text-align:left;}
#contentfull {line-height:1.5em; margin:160px 0px 10px 160px; padding:10px; text-align:left;}
#contentwide {line-height:1.5em; margin:10px 0 10px 160px; padding:0; text-align:left;}
#content h2,#contentwide h2,#contentfull h2 {font-size:1em; font-weight:700; color:#02A1BC; letter-spacing:0px; margin:8px 0 10px; padding:0;}
#content h3,#contentwide h3,#contentfull h3 {font-size:1em; font-weight:700; margin:6px 0; padding:0;}
#content h4,#contentwide h4,#contentfull h4 {font-size:1.2em; font-weight:700; color:#02A1BC; margin:6px 0; padding:0;}
#content img,#contentwide img,#contentfull img {background:#ccc; border:4px solid #f0f0f0; color:#303030; display:inline; padding:1px; margin:0 10px 5px 0;}
#content ul,#content ol,#contentwide ul,#contentwide ol,#contentfull ul,#contentfull ol {margin:0 0 16px 20px; padding:0;}
#content ul ul,#content ol ol,#contentwide ul ul,#contentwide ol ol,#contentfull ul ul,#contentfull ol ol {margin:2px 0 2px 15px;}
#content li,#contentwide li,#contentfull li {margin:0 0 2px 5px; padding:0 0 0 4px;}
/* Footer */
#footer {background:#fff; border-top:1px solid #999999; clear:both; color:#666; font-size:0.7em; margin:0 auto; padding:8px 0; text-align:right; width:760px;}
#footer p {margin:0; padding:0;}
#footer a {background:inherit; color:#666; font-weight:400; text-decoration:none;}
#footer a:hover {text-decoration:underline;}
#footer span {font-size:1.2em;}
/* Links and paragraphs */
a {background:inherit; color:#02A1BC; text-decoration:none; font-weight:700;}
a:hover {background:inherit; color:#286ea0; text-decoration:underline;}
a img {border:0;}
p {margin:0 0 16px;}
blockquote {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; margin:16px; padding:7px 7px 7px 11px;}
blockquote p {font-size:1.1em; line-height:1.3em; margin:0;}
/* Tables and forms */
table {border:0; line-height:1.3em; width:95%; margin:0 0 16px; padding:2;}
caption {font-size:1.5em; font-weight:400; margin:0; padding:6px 0 8px; text-align:left;}
input,textarea {border:1px solid #ccc; font-family:Arial,Verdana,Tahoma,sans-serif; font-size:1em; margin:0; padding:4px;}
label {margin:2px 0 2px 0; font-size:1.2em;}
input {width:200px;}
textarea {width:400px;}
/* Search box */
#searchbox label,.hide {display:none;}
#searchbox {margin:6px 0 16px; padding:0;}
#searchform {background:#fff; border:1px solid #ccc; color:#505050; font-size:0.9em; padding:4px; width:116px;}
/* Additional classes */
.announce h2 {margin:0 0 10px; padding:0;}
.textright {margin:-10px 0 4px; text-align:right;}
.center {text-align:center;}
.small {font-size:0.8em;}
.large {font-size:1.3em;}
.red {color:red;}
.green {color:green;}
.blue {color:blue;}
.highlighted {background:#f0f0f0; border:1px solid #b0b0b0; color:#303030; padding:3px;}
.button {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; font-weight:400; font-size:1.2em; margin:0 0 15px; padding:7px 7px 7px 11px; width:120px;}
.left {float:left; margin:10px 10px 5px 0;}
.right {float:right; margin:10px 0 5px 10px;}
[edited by: swa66 at 12:33 pm (utc) on April 25, 2009]
[edited by: coopster at 2:52 pm (utc) on April 25, 2009]
[edit reason] No personal URLs please see ToS [/edit]
The navigation list on the left hand side only displays as required in IE - Safari, Firefox and Chrome have issues with my poor programming.
Hmm, if Safari, Chrome, and Firefox agree, I'd say IE trapped you. Usually even when just on of them disagrees with IE, it's IE that's wrong, if all of them agree (well in this case 2 rendering engines), the odds against legacy IE versions are virtually 100%.
As a consequence I always recommend to never develop in IE as it will set you on the wrong foot. As an side effect of that, correcting things gone wrong in IE is something we often do, correcting for the standards compliant browsers is something we almost never do.
gif dividers
