Equal Column Height Madness

Hi there. I am a CSS 'greenie' and going slightly bananas trying to troubleshoot my CSS in Safari and IE (it works fine in FF for Mac and PC). i am using an equal column heights hack that doubtless needs more hacking. In Safari v2.0.4 Mac OSX, the page oscillates btw cropping content + sotw divs at random from the bottom of the div. In Win IE 7.0, the font styles are HUGE and the sotw div is pushed down below the content div. Craziness.

here's my CSS (don't laugh) and my dw template code >>

I deeply appreciate your help :)

CSS >>

/* =Global Styles */
body { background-color: #fff; font-size:63.7%; color:#564b47; text-align:left; margin:0px; padding:0px; font-family:"Lucida Grande", Verdana, Arial, sans-serif; }
html { padding:0px; margin:0px; }

/* =Body Background Styles */
img { border:0; padding:0; margin-bottom:0 }
a, a:visited { color:#e88f23; text-decoration:none;}
a:hover { color:#666666; text-decoration:underline;}
a img {border:none;}

/* =Font Styles */
p, h1, h2, pre { padding: 0px 30px 10px 20px; margin: 0px;}
p { font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em; line-height:1.3; }
p strong { font-family:Georgia, "Times New Roman", Times, serif; font-size:1.1em; font-weight:bold; line-height:1.3; border-bottom: 1px solid #ccc; }
ul, ol, td { font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em; line-height:1.3; margin:0 0 0.5em 0; list-style: none; }
dl, dt, dd { font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em; line-height:1; margin:0 0 0.5em 0; }
blockquote { font-family: "Lucida Grande", Geneva, Arial, sans-serif; font-style:italic; margin:0.8em 0; font-size:1.1em; line-height:1.3; padding:0 0 0.8em 0; border-bottom: 1px solid #ccc; }
blockquote strong {font-style:normal; font-size:1.0em; font-family:Georgia, "Times New Roman", Times, serif; }
h1 { padding: 0px 0px 0px 20px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size: 1.4em; color: #e88f23; text-transform: uppercase; line-height: 1.5;}
h2 { padding: 5px 20px 10px 20px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size: 1.2em; color: #336699; text-transform: uppercase; line-height: 1.5;}
h3 { padding: 0px 0px 0px 20px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size: 1.6em; color: #336699; text-transform: uppercase; line-height: 1.5;}
h2r { padding: 0px 0px 0px 20px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size: 1.2em; color: #b2000c; line-height: 1.5; }
.news { font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em; color: #fff; line-height:1.3; margin:0 0 0.5em 0; }
.RHShdr { padding: 10px 0px 0px 34px; margin: 0px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em; color:#e88f23; text-transform: uppercase;}
.RHStxt { padding: 10px 10px 10px 34px; margin: 0px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em;color:#fff}
.RHSsub { padding: 10px 0px 10px 14px; margin: 0px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em;color:#fff; text-transform: uppercase;}
.LHStxt { padding: 5px 20px 10px 20px; margin: 0px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em;color:#666666}
.LHStiny { padding: 5px 20px 10px 20px; margin: 0px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:0.8em;color:#999999}
.LHSsub { padding: 5px 20px 0px 20px; margin: 0px; font-family:"Lucida Grande", Geneva, Arial, sans-serif; font-size:1.1em;color:#e88f23; text-transform: uppercase;}
.yellow {font-size:1.1em; color:#e88f23; font-weight: bold;}
.blue {font-size:1.1em; color:#336699; font-weight: bold;}
.greyBG { color:#333; background-color: #f1f1f4; }

table {font-size: inherit; padding-left: 20px; }

/* =Structure Styles */

/* Hacks that can't be avoided in this file */

/* =Clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
.clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/* Start Mac IE5 filter \*/
#block_1, #block_2, #block_3
{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/* End Mac IE5 filter */

/* ----------container to add margin around whole thing-------------- */
#container{ width: 700px; height: auto; margin-top: 50px; padding: 20px; margin-bottom: 0px; margin-left: auto; margin-right: auto; background-color: #fff; overflow:hidden; }
#container div { float: left; margin-right: 0px; margin-bottom: -2000px; padding-bottom: 2000px; }
#content { background: url(../images/leftBG.gif) top left repeat; width: 504px;}
#container #sotw { width: 196px;}
#floatwrap { width: 100%; float: left;
/* background: #f00; */ /* this is where the background does stretch */
}

#head { width: 700px; margin: 0 auto; text-align: left; height: 86px; background: url(../images/masthead.jpg) no-repeat; margin: 0px;}

#menu { height: 30px; width: 700px; background: url(../images/menuBG.jpg) no-repeat; padding: 0; margin: 0; color: #fff; float: left; }
#menu ul { margin: 0px; padding: 0px; font-weight: bold; font-family: "Lucida Grande", Geneva, Helvetica, Arial, sans-serif; font-size: 1.1em; text-transform: uppercase; color: #FFF; line-height: 27px; white-space: nowrap;}
#menu li { list-style-type: none; display: inline; }
#menu li a { text-decoration: none; padding: 1px 12px 0px 12px; color: #fff; text-decoration: none; float: left; border-right: solid 1px #fff; }
#menu li a:link {color: #FFF;}
#menu li a:visited { color: #666666;}
#menu li a:hover {background-color: #004887; }

#rightTop { width: 194px; height: 45px; float:left; text-align: left; }
#rightBase { width: 194px; float:left; text-align: left; }

#footer { width:700px; margin: 0 auto; text-align: center; }

PAGE CODE >>

Equal Column Height Madness

Need help with returned column in IE and cropped columns in Safari

luicylou

luicylou

Marshall

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week