Can anyone explain to me how I get this page looking right by equaling out the height of the columns.
http://www.warringtonpcdoctor.co.uk/design/cgs/
Many Thanks
Paul
This is a css solution
This is a javascript solution
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
#container {
border: 1px solid red;
width: 800px;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px}
#sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid green;
float: left;
width: 250px}
#content {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid blue;
float: right;
width: 490px}
</style>
<script type="text/javascript">
window.onload=function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("container").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
}
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
}
}
</script>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul id="menu_list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</div>
<div id="content">
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut.
</div>
</div>
</body>
</html>
Before I’d be worrying about making them equal height (something I would do by simply using a faux-columns background-image since the layout appears to be fixed width) I would first strip all the comments that are placed in a manner that is tripping the disappearing content and double render bugs in IE 7-. … then get rid of all the pointless extra wrapping div, (and you’ve got a LOT of them), STOP using the giant image for text, lose all the pointless ID’s, axe the giant 30k+ javascript that’s doing the job of 4k or less (which probably explains why hovers are painfully laggy), the IE conditionals for nothing, fix the nonsensical heading orders (H2 before the h1?!?), the paragraphs around non-paragraph elements, double breaks for what should be paragraph close/opens, h2 tag doing STRONG’s job since that’s not the start of a new section of text, etc, etc, etc…
Lemme go over the comments part - your comments are ending up between floats - this causes IE to do all sorts of funky nonsense that no amount of hacking can fix. Solution? Get rid of redundant comments, and move neccessary comments INSIDE their element instead of placing them after.
What do I mean by unneccessary?
<!-- Begin Header –>
<div id=“header”>
No, really? <div id=“header”> is the start of the HEADER?!? Who’d have thunk it!!!
You’re using meaningful names, you don’t need ‘begin’ comments. END comments can be helpful… but since you’ve got a perfectly good closing tag there, do you really need to say end?
So this:
</div>
<!-- End Header –>
gets changed to:
<!-- #header –></div>
making the IE rendering bug go away and removing the ‘wasteful’ parts of the comments. (NOT that I’d have a #header div in the first place)
I highly suggest reading this IBM Linux developers page on the subject of naming conventions and commenting.
http://www.ibm.com/developerworks/linux/library/l-clear-code/
It’s mostly targeting C programmers, but anyone writing code should be able to come away from that with much better practices.
So for starters, if I was the one writing that page the markup would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Consumer Credit Solutions
</title>
</head><body>
<div id="pageWrapper">
<h1>
Consumer Credit Solutions
<span></span>
</h1>
<ul id="topMenu">
<li><a href="index.html">Home</a></li>
<li><a href="profile.html">Profile</a></li>
<li><a href="finance.html">Finance</a></li>
<li><a href="promise.html">Our Promise</a></li>
<li><a href="partners.html">Partners</a></li>
<li><a href="comments.html">Client Comments</a></li>
<li><a href="contact.html">Contact Us</a>
</ul>
<div id="homeBanner">
<img src="images/somepeopletalking.jpg" alt="Some people talking" />
<p>
CSS has the expertise, the products and the service to help your business become more profitable.
</p>
<!-- #homeBanner --></div>
<ul id="middleMenu">
<li>
<a href="index.html">Home</a>
</li><li class="hideSticky">
<a href="profile.html">Profile</a>
<ul>
<li><a href="management.html">Meet the Management</a></li>
<li><a href="team.html">Meet the team</a></li>
</ul>
</li><li class="hideSticky">
<a href="finance.html">Finance</a>
<ul>
<li><a href="sectors.html">Market Sectors</a></li>
<li><a href="products.html">Finance Products</a></li>
</ul>
</li><li class="hideSticky">
<a href="promise.html">Our Promise</a>
<ul>
<li><a href="service.html">Premier Service</a></li>
<li><a href="training.html">Training</a></li>
<li><a href="support.html">Sales Support</a></li>
</ul>
</li><li>
<a href="partners.html">Partners</a>
</li><li>
<a href="comments.html">Client Comments</a>
</li><li>
<a href="contact.html">Contact Us</a>
</li>
</ul>
<div id="fauxColumns">
<div id="content">
<h2>Welcome to Consumer Credit Solutions</h2>
<p>
Founded in 1998, Consumer Credit Solutions (CCS) has grown into the leading independent supplier of credit solutions to the ‘point of sale' finance market.
</p><p>
Operating predominantly within the Home Improvement market, we can offer an unrivalled range of finance products from our panel of ‘blue chip' lenders, helping to add both sales volume and profitability to your company.
</p><p>
Our ethos is refreshingly straightforward: To provide the best possible finance products combined with the best level of support and training. Our goal isn't just about finding you the best possible credit products - we've got the buying power, we've got the unbeatable range and an enviable panel of lenders behind us, but we are much more than just a supplier.
</p><p>
Offering the best portfolio of finance options isn't enough. In fact, it's nothing without the right support, the right training and the right people to help you use it. That's why we have always spent as much time helping our business partners to use the finance we supply as we do actually supplying it. From implementation to documentation, sales process and lead generation to marketing - we're there every step of the way.
</p><p>
To find out how our business can add value to your company and join the hundreds of leading industry names who already enjoy a profitable partnership with CCS, please contact us today.
</p><p>
<strong>To find out more about how CCS can boost your business call 0845 120 6666 or email us.</strong>
</p>
<!-- #content --></div>
<div id="sideBar">
<h2>Find out more about how CSS can boost your business</h2>
<div class="subSection">
<h3>Call</h3>
0845 120 6666
</div>
<div class="subSection e-mail">
<h3>E-Mail</h3>
info@creditSolutionsgroup.co.uk
</div>
<!-- #sideBar --></div>
<!-- #fauxColumns --></div>
<div id="footer">
<div>Committed to <strong>exceeding</strong> expectations</div>
Copyright 2006 - 2010 Consumer Credit Solutions
<!-- #footer--></div>
<!-- #pageWrapper --></div>
<script type="text/javascript" src="hideSticky.js"></script>
</body></html>
Cleaning it out… I’m off to stuff my face, but when I get back in here I’ll belt out the CSS and a tiny little javascript to replace the monster you’re using.
though honestly my gut is saying axe one of those two menus. Pick a place and stick with it!
… and here’s that rewrite complete:
http://www.cutcodedown.com/for_others/geordiewire/template.html
The markup got a few minor changes/additions like removing the scripting entirely from the markup (CSS can handle the menu just fine, csshover3.htc for IE6-) and adding horizontal rules for people browsing with CSS disabled to make the breaks between sections clearer.
As with all my examples the directory:
http://www.cutcodedown.com/for_others/geordiewire
is unlocked so you can get at all the sub-files with ease. Redid the images so now between the elimination of the javascript, code reductions and image optimizing it’s 31k total, just under a third the size of your original.
Tested working IE 6 through 9 beta, FF 2 and 3, and the latest flavors each of Safari, Chrome and Opera.
If I have time later I’ll see if I can toss together an explanation of the choices I made in my code – no promises though.
Ok, bedtime for bonzo.
Wow, I don’t know what else to say other than thanks.
Quite obvious that I hae a lot more reading and learning too do.