Take a look at my site in IE 5 or IE 5.5, <!-- m --><a class="postlink" href="http://www.mididelight.com">http://www.mididelight.com</a><!-- m -->
Its unreadable, I know there are CSS hacks to fix this, but I am not sure how to use them. Below is my code, can you give me any hints as to how to edit it to make it look good.
/* MIDI Delight CSS v1 2005 */
body { margin: 10px; padding:0px; text-align: center; background: #ccc url(../img/bkgd.gif); font-family: arial, sans-serif; font-size: 12px;}
p { padding: 0px; margin: 2px; }
img { padding: 0px; margin: 0px; border: 0px none;}
hr { display: none; }
/* Incloses whole layout */
#wrapper {
position: relative;
width: 764px;
margin:0 auto;
text-align: left;
border: black 1px solid;
background: #fff url(../img/site_bkgd.gif);
}
/* -------------- Header ----------------- */
#header {
width: 764px;
height: 71px;
background: #ccc url(../img/title_bkgd.gif) no-repeat;
}
#header h1, #header h2 { display: none; }
#header img {
margin-top: 35px;
margin-left: 10px;
position: absolute;
z-index: 2;
}
#toplinks {
background-color: #002200;
padding: 5px 5px 5px 0;
margin: 0px;
text-align: center;
color: #FFFFFF;
font-family: arial, sans-serif;
font-size: 80%;
font-weight: bold;
}
#toplinks ul { list-style-type: none; margin: 0px; padding: 0px; display: inline;}
#toplinks ul li { list-style-type: none; margin: 0 5px 0 0; padding: 0px; display: inline;}
#toplinks a:link, #toplinks a:visited { color: #CCFFCC; text-decoration: none; font-weight: bold; font-family: verdana, arial, sans-serif; }
#toplinks a:hover { color: white; }
/* -------------- Nav ----------------- */
#nav {
clear: both;
width: 764px;
height: 27px;
background: #99CC99 url(../img/nav_bkgd.gif) repeat-x;
}
#nav ul { display: inline; list-style-type: none; margin: 0px; padding: 0px; position: relative; z-index: 3; }
#nav ul li { display: inline; list-style-type: none; }
#nav ul li a:link, #nav ul li a:visited { font-family: arial, sans-serif; color: #000; font-size: 100%; font-weight: bold; text-decoration: none; line-height: 1.7em; margin: 0px 8px; }
#nav ul li a:hover { color: #FFFFCC; }
/* -------------- Content ----------------- */
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#main-body {clear:left;}
/* End IE5-Mac hack */
#content {
float: left;
width: 592px;
background: #fff;
}
html>body #content { /* be nice to Opera */
width: 592px;
}
#content a:link, #content a:visited { color: #336633; text-decoration: none;}
#content a:hover { color: #000000; }
#contentLeft {
padding: 10px;
float: left;
width: 275px;
}
#contentRight {
padding: 10px;
float: left;
width: 275px;
}
#contentPadding { padding: 0 45px 0 15px; }
#contentPadding p { margin-bottom: 10px; }
#contentPadding h2 { font-family: "Trebuchet MS", arial, sans-serif; font-size: 140%; border-bottom: 1px solid #ccc; margin-top: 10px;}
#contentPadding h3 { font-family: "Trebuchet MS", arial, sans-serif; font-size: 120%; margin: 0 0 5px 0; padding: 0px;}
#displayList { }
#displayList ul { list-style-type: none; margin: 15px 0px; padding: 2px 5px 2px 10px;}
#displayList ul li { list-style-type: none; margin: 0px; padding: 0px;}
#contentLeft div, #contentRight div { margin: 0 0 15px 0; }
#content h4 { background: #669966 url(../img/header_bkgd.gif); padding: 2px 2px 2px 4px; font-family: verdana, arial, sans-serif; font-size: 90%; color: #fff; margin: 0px; /* border-bottom: 1px solid #999999;*/ border-right: 1px solid #999999;}
/* borders */
#money,
#newestFiles,
#special,
#favorites,
#found,
#top10,
#featuredArtists,
#requested,
#testimonial,
#breakingNews { border: 1px solid #669966; padding-bottom: 5px;}
/* Media Plazza */
#money { margin: 10px 12px 0 10px; }
#money iframe { margin-top: 3px; width: 550px; height: 95px; }
/* -------------- Sidebar ----------------- */
#sidebar {
position: relative;
float: left;
width: 172px;
}
#search { padding: 0px 0px 0px 15px; background: url(../img/search_bkgd.gif) no-repeat;}
#search form { margin-left: 0px; }
.searchTitle { font-family: verdana, "Trebuchet MS", arial, sans-serif; font-weight: bold; font-size: 90%; color: white; padding-top: 10px; display: block;}
#search_controls_text { width: 140px; height: 15px; font-family: arial, sans-serif; font-size: 90%; margin-bottom: 3px; margin-top: 0px; border: 1px solid #333;}
#search_controls_button { margin-left: 1px; width: 140px; height: 14px; font-size: 0%; background: #003300 url(../img/go.gif); border: 0px; padding: 2px 8px 2px 8px; margin-bottom: 20px; cursor: pointer;}
#sidebarLinks { padding: 0 0 0 15px; }
#sidebarLinks ul { list-style-type: none; margin: 0 0 20px 0; padding: 0px;}
#sidebarLinks ul li { list-style-type: none; margin: 0 0 0 15px; }
#sidebarLinks a:link, #sidebarLinks a:visited { text-decoration: none; color: #FFFFCC; font-size: 90%; font-family: arial, sans-serif; }
#sidebarLinks a:hover { color: #000; }
#sidebar h4 { background: url(../img/arrow.gif) no-repeat 0 50%; padding-left: 12px; font-family: verdana, "Trebuchet MS", arial, sans-serif; font-weight: bold; font-size: 90%; color: white; margin: 0px;}
#sidebar h4 img { margin-right: 2px; }
/* -------------- Footer ----------------- */
#footer {
position: relative;
clear: both;
background: #333;
color: white;
font-family: arial, sans-serif;
font-size: 90%;
padding: 2px 20px;
}
#footer a { text-decoration: none; }
#footer a:link, #footer a:visited { color: #99FF99; }
#footer a:hover { color: #336633; }
#footer p { padding: 0px; margin: 7px 2px; }There are hacks, but I see hacks for Internet Explorer 5.0 - 5.2 / Macintosh, not 5.01 and 5.5 Windows. You'll want to use the voice-family hack (<!-- m --><a class="postlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">http://www.tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->) to single out IE5.x/Windows.
Its unreadable, I know there are CSS hacks to fix this, but I am not sure how to use them. Below is my code, can you give me any hints as to how to edit it to make it look good.
/* MIDI Delight CSS v1 2005 */
body { margin: 10px; padding:0px; text-align: center; background: #ccc url(../img/bkgd.gif); font-family: arial, sans-serif; font-size: 12px;}
p { padding: 0px; margin: 2px; }
img { padding: 0px; margin: 0px; border: 0px none;}
hr { display: none; }
/* Incloses whole layout */
#wrapper {
position: relative;
width: 764px;
margin:0 auto;
text-align: left;
border: black 1px solid;
background: #fff url(../img/site_bkgd.gif);
}
/* -------------- Header ----------------- */
#header {
width: 764px;
height: 71px;
background: #ccc url(../img/title_bkgd.gif) no-repeat;
}
#header h1, #header h2 { display: none; }
#header img {
margin-top: 35px;
margin-left: 10px;
position: absolute;
z-index: 2;
}
#toplinks {
background-color: #002200;
padding: 5px 5px 5px 0;
margin: 0px;
text-align: center;
color: #FFFFFF;
font-family: arial, sans-serif;
font-size: 80%;
font-weight: bold;
}
#toplinks ul { list-style-type: none; margin: 0px; padding: 0px; display: inline;}
#toplinks ul li { list-style-type: none; margin: 0 5px 0 0; padding: 0px; display: inline;}
#toplinks a:link, #toplinks a:visited { color: #CCFFCC; text-decoration: none; font-weight: bold; font-family: verdana, arial, sans-serif; }
#toplinks a:hover { color: white; }
/* -------------- Nav ----------------- */
#nav {
clear: both;
width: 764px;
height: 27px;
background: #99CC99 url(../img/nav_bkgd.gif) repeat-x;
}
#nav ul { display: inline; list-style-type: none; margin: 0px; padding: 0px; position: relative; z-index: 3; }
#nav ul li { display: inline; list-style-type: none; }
#nav ul li a:link, #nav ul li a:visited { font-family: arial, sans-serif; color: #000; font-size: 100%; font-weight: bold; text-decoration: none; line-height: 1.7em; margin: 0px 8px; }
#nav ul li a:hover { color: #FFFFCC; }
/* -------------- Content ----------------- */
/* Commented Backslash Hack
hides rule from IE5-Mac \*/
#main-body {clear:left;}
/* End IE5-Mac hack */
#content {
float: left;
width: 592px;
background: #fff;
}
html>body #content { /* be nice to Opera */
width: 592px;
}
#content a:link, #content a:visited { color: #336633; text-decoration: none;}
#content a:hover { color: #000000; }
#contentLeft {
padding: 10px;
float: left;
width: 275px;
}
#contentRight {
padding: 10px;
float: left;
width: 275px;
}
#contentPadding { padding: 0 45px 0 15px; }
#contentPadding p { margin-bottom: 10px; }
#contentPadding h2 { font-family: "Trebuchet MS", arial, sans-serif; font-size: 140%; border-bottom: 1px solid #ccc; margin-top: 10px;}
#contentPadding h3 { font-family: "Trebuchet MS", arial, sans-serif; font-size: 120%; margin: 0 0 5px 0; padding: 0px;}
#displayList { }
#displayList ul { list-style-type: none; margin: 15px 0px; padding: 2px 5px 2px 10px;}
#displayList ul li { list-style-type: none; margin: 0px; padding: 0px;}
#contentLeft div, #contentRight div { margin: 0 0 15px 0; }
#content h4 { background: #669966 url(../img/header_bkgd.gif); padding: 2px 2px 2px 4px; font-family: verdana, arial, sans-serif; font-size: 90%; color: #fff; margin: 0px; /* border-bottom: 1px solid #999999;*/ border-right: 1px solid #999999;}
/* borders */
#money,
#newestFiles,
#special,
#favorites,
#found,
#top10,
#featuredArtists,
#requested,
#testimonial,
#breakingNews { border: 1px solid #669966; padding-bottom: 5px;}
/* Media Plazza */
#money { margin: 10px 12px 0 10px; }
#money iframe { margin-top: 3px; width: 550px; height: 95px; }
/* -------------- Sidebar ----------------- */
#sidebar {
position: relative;
float: left;
width: 172px;
}
#search { padding: 0px 0px 0px 15px; background: url(../img/search_bkgd.gif) no-repeat;}
#search form { margin-left: 0px; }
.searchTitle { font-family: verdana, "Trebuchet MS", arial, sans-serif; font-weight: bold; font-size: 90%; color: white; padding-top: 10px; display: block;}
#search_controls_text { width: 140px; height: 15px; font-family: arial, sans-serif; font-size: 90%; margin-bottom: 3px; margin-top: 0px; border: 1px solid #333;}
#search_controls_button { margin-left: 1px; width: 140px; height: 14px; font-size: 0%; background: #003300 url(../img/go.gif); border: 0px; padding: 2px 8px 2px 8px; margin-bottom: 20px; cursor: pointer;}
#sidebarLinks { padding: 0 0 0 15px; }
#sidebarLinks ul { list-style-type: none; margin: 0 0 20px 0; padding: 0px;}
#sidebarLinks ul li { list-style-type: none; margin: 0 0 0 15px; }
#sidebarLinks a:link, #sidebarLinks a:visited { text-decoration: none; color: #FFFFCC; font-size: 90%; font-family: arial, sans-serif; }
#sidebarLinks a:hover { color: #000; }
#sidebar h4 { background: url(../img/arrow.gif) no-repeat 0 50%; padding-left: 12px; font-family: verdana, "Trebuchet MS", arial, sans-serif; font-weight: bold; font-size: 90%; color: white; margin: 0px;}
#sidebar h4 img { margin-right: 2px; }
/* -------------- Footer ----------------- */
#footer {
position: relative;
clear: both;
background: #333;
color: white;
font-family: arial, sans-serif;
font-size: 90%;
padding: 2px 20px;
}
#footer a { text-decoration: none; }
#footer a:link, #footer a:visited { color: #99FF99; }
#footer a:hover { color: #336633; }
#footer p { padding: 0px; margin: 7px 2px; }There are hacks, but I see hacks for Internet Explorer 5.0 - 5.2 / Macintosh, not 5.01 and 5.5 Windows. You'll want to use the voice-family hack (<!-- m --><a class="postlink" href="http://www.tantek.com/CSS/Examples/boxmodelhack.html">http://www.tantek.com/CSS/Examples/boxmodelhack.html</a><!-- m -->) to single out IE5.x/Windows.