There are 6 posts tagged html (this is page 1 of 1).
Nano See, Nano Doo has a few interesting hacks for IE7 that apply to IE7 only. The major one centers around the * html quirk that has been fixed, and it offers an alternative.
That is, if you have to use a hack. I personally prefer to put my IE specific bits in a separate css with a conditional include from the html. But sometimes, it is just easier not to have to bother with the extra machinery.
Via cssBeauty
Plus, I really like the name “nanobox” ;)
The most common source of that problem, according to few searches on google seem to point to using absolute positioning. This was not an explanation that I found too satisfying, first because I was not about to change my layout, and second because most of the references were at least 3 years old.
So I kept digging, and came accross an other solution from Tom Muck in Fix for IE selection bug. Unfortunately, this did not apply for me.
And finally, I found the most conspicuous post on the drupal site where if you don’t use the form
<link .../>
instead of
<link ...></link>
this will be enough to break internet explorer. Who would have thought! Well, maybe by now I should now better.
And the worst part of that? Well it was the second time in 2 months I needed that, and for the life of me, I could not remember what I had done the first time around. So unless this server crashes too, I’ll know where to find the solution next time.
Here’s the html used here
<html>
<body>
<div id="wrapper">
<div id="blog-header">
</div>
<div id="main-wrapper">
<div id="sidebar">
</div>
<div id="main-content">
</div>
</div>
<div id="main-bottom-space"> </div>
</div>
<div id="footer">
</div>
</body>
</html>
and the css used here:
body {
/* force footer to stick at bottom */
height: 100%;
}
/* avoid trampling on the footer by reserving some space (IE) */
#main-bottom-space {
height: 26px;
clear: both;
}
#wrapper {
position: relative;
/* force footer to stick at bottom */
height: 100%;
}
#main-wrapper {
position: relative;
}
#main-content {
float: left;
}
#sidebar {
float: right;
}
#footer {
clear: both;
/* stick at bottom */
height: 26px;
position: relative;
margin-top: -26px;
}
The key difference is to add the #main-bottom-space <div> element.
Using the most excellent footerStickAlt technique from The Man in Blue, I’ve modified the template to “stick” the footer at the bottom. Becomes less disctracting I think.
One common problem when using a centered layout is that when a page is short, the browser does not display a scrollbar, and when your page is taller than a screen, the browser adds a scrollbar. That’s all nice except that your painfully designed content jumps around to accomodate the scrollbar. The solution I have used is to force the scrollbar to appear all the time.
By no mean am I taking credit for this trick. I’ve modified Richard White’s template to incorporate it.
Just include this in your CSS, and voila!
/* force right scrollbar */
html {
height: 100%;
margin-bottom: 1px;
}
this will force a vertical scrollbar to appear on the right side.
In many cases it is the width of the objects in the body that causes the visual hopping of floated objects. I have found that use of the rule width:auto takes care of many of these issues. Although 4 years old this topic is still high on a Google search and your readers may be interested in this tactic as another means of resolving their issues.
I think this addresses a different issue since the scrollbar appearing will change the width. Having the scrollbar present all the time ensures the width stays contant.
Thank you Richard White for your beautiful template. In case you are interested, you can get it on Richard’s site: {height: 1%;}