I've written about differences between Firefox and Internet Explorer, and about one specific symptom which seems to result from this difference. One of the challenges here has been that not all blogs exhibit this symptom. Most likely because not all blogs (not many most likely) try to cram page elements into spaces where they don't fit.
But occasionally, you run across blogs that seem to be impervious to this symptom, even though they appear to be inviting it. And today, I ran across a possible reason why some blogs don't have this problem.
And it's not hard to make your blog, too, be impervious to the symptom. Just find the stylesheet code, and insert the portion in red.
The rule names will vary, from template to template. Just find the rules with the float setting, and with text related settings like font-size and line-height, and add the code. This will vary, depending upon whether your sidebar is positioned on the left or right. The solution will be the same though.
Insert the code, save the template, and republish the blog.
(Edit 11/23): There's also some identified, but not completely understood, issue of a 3px padding next to a float element, again apparently only in IE V6 and previous.
>> Top
But occasionally, you run across blogs that seem to be impervious to this symptom, even though they appear to be inviting it. And today, I ran across a possible reason why some blogs don't have this problem.
And it's not hard to make your blog, too, be impervious to the symptom. Just find the stylesheet code, and insert the portion in red.
/* Page Structure
#outer-wrapper {
width:740px;
margin:0 auto;
text-align:left;
font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}
#main-wrap1 {
width:485px;
float:left;
margin:15px 0 0;
padding:0 0 10px;
color:#333333;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#main-wrap2 {
float:left;
width:100%;
padding:10px 0 0;
}
#main {
background:url("http://www.blogblog.com/
rounders/rails_main.gif") repeat-y;
padding:0;
}
#sidebar-wrap {
width:240px;
float:right;
margin:15px 0 0;
font-size:97%;
line-height:1.5em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
The rule names will vary, from template to template. Just find the rules with the float setting, and with text related settings like font-size and line-height, and add the code. This will vary, depending upon whether your sidebar is positioned on the left or right. The solution will be the same though.
Insert the code, save the template, and republish the blog.
(Edit 11/23): There's also some identified, but not completely understood, issue of a 3px padding next to a float element, again apparently only in IE V6 and previous.
>> Top
Comments
I voted for you today on BLOG VILLAGE.
The latter cases can't be resolved with a simple switch setting - the containers have to be properly sized to fit inside each other.
You gotta take it one layer at a time, though.
Layered Diagnostics
Only the top few sidebar links in my Thurs 3 column Minima would work in IE6. Everything works fine in FF and the blog looks fine in both IE & FF.
Adding your red code under my sidebar float code areas brought more links to life but still not all of them. Interestingly the last working links in both columns are at the same screen level across. They also stop working in the middle of a "ul" group of links. I added the red code to the line height & margin/padding related sidebar sections and even in the profile area. No difference except IE now indicates a page error after everything loads.
I also discovered that as the page is loading-- before it says "done", all my sidebar links are live and ok when the page first starts loading. Then the lower 2/3 of them go dead after the page load is done.
Adding your code in the very top content section with the sidebar float align code, made the most progress.
I'm at www.stratoblogster.blogspot.com if you want to view my page source.
Your fix is the only thing I've found anywhere that's helped at all.
I'd be eternally grateful if you might take a moment to check my site. Your code works, but I can't figure out why it's not working all the way...
Thanks so much!!
JP
p.post-footer {
margin:-.25em 0 0;
color:#ccc;
}
The above css code is from the Thur Broeders 3 column Minima. See the dash preceding the .25em? It acts as a minus sign and creates a negative value. Deleting it restored all my dead sidebar links in IE6.
I went to Thur's blog and checked the source code of his download. THE ERROR IS STILL THERE! I emailed Thur yesterday.
I just posted this in Google Groups too. People need to know this because they can migrate this template to beta and continue to use it there unless they want to use the new editing features. ALSO, this error creates dead links in IE7 as well as IE6, so people with this template will continue having IE issues.
Thanks again for the float code, as it also helped by partially restoring my links.
JP
www.stratoblogster.com