Home Fixed a couple of CSS bugs

Fixed a couple of CSS bugs

This is a boring post about fixing a couple of tedious Internet Explorer CSS
bugs. But I want to record it for my own records and for future Google
searchers.

1) The IE Italics bug – in the past I used italics whenever I quoted somebody. However on certain CSS designs, italics breaks the width settings of my page
for IE users (90-95% of the population). In my design, it stuffed up the
right-hand vertical line. Looked bad.

I found a comprehensive
explanation and fix
for this bug. It worked. Incidentally, positioniseverything.net
is a fantastic resource for CSS designers. It covers a lot of other bugs and
workarounds – and best of all it provides practical examples to back up the
theory.

2) The second bug I never discovered a name for. But here’s a description of
it: my main content text is is in the middle column and aligned to the left.
However the alignment got nudged a couple of pixels to the right at the point
where the content in the left-hand floating menu column stopped and the main
content continued on down the page. So the bug was only noticeable when the menu content was shorter than the middle column content. Anyways I fixed it by giving the body tag and all div
tags below it height = 100%. I got this tip from a designer at work,
who’d fixed the same bug on a project website. Here’s his explanation
(much better than I could word it):

“Because there is no initial height measurement for the html page you
can’t dynamically force divs past their contained content to the bottom. The
inclusion of the ‘height: 100%;’ in the body tag gives the [content] div a
measurement to calculate its height from. So if I give the [content] div a
height of 100% it will fill to the bottom of the page (or any px measurement I
care to have). Then give the sidenav div a height of 100% so it will fill to the
bottom of the [content] div.”

Note this also seems to have fixed some jerky scrolling issues in the Mozilla browser.

So that’s my latest round of CSS bug-swatting. Do let me know if you spot
other bugs. I haven’t even tested the old browsers (smack on the hand with a
ruler!), but frankly because this is a personal website I’m mainly concerned with
Web Standards-compliant browsers.

About ReadWrite’s Editorial Process

The ReadWrite Editorial policy involves closely monitoring the tech industry for major developments, new product launches, AI breakthroughs, video game releases and other newsworthy events. Editors assign relevant stories to staff writers or freelance contributors with expertise in each particular topic area. Before publication, articles go through a rigorous round of editing for accuracy, clarity, and to ensure adherence to ReadWrite's style guidelines.

Get the biggest tech headlines of the day delivered to your inbox

    By signing up, you agree to our Terms and Privacy Policy. Unsubscribe anytime.

    Tech News

    Explore the latest in tech with our Tech News. We cut through the noise for concise, relevant updates, keeping you informed about the rapidly evolving tech landscape with curated content that separates signal from noise.

    In-Depth Tech Stories

    Explore tech impact in In-Depth Stories. Narrative data journalism offers comprehensive analyses, revealing stories behind data. Understand industry trends for a deeper perspective on tech's intricate relationships with society.

    Expert Reviews

    Empower decisions with Expert Reviews, merging industry expertise and insightful analysis. Delve into tech intricacies, get the best deals, and stay ahead with our trustworthy guide to navigating the ever-changing tech market.