CSS spacing issues Oct25 '04

Today’s browser support for CSS is getting better, but still needs a lot of work. You just never know what to expect when you use CSS for layout purposes.

Recently, I have been developing a site that is starting to give me headaches. I must be tripping up on a few CSS properties, because the site looks different in almost every browser.

The only browser that gets it right is Netscape:

Netscape 7, Windows 98

Perfect!

Netscape 6, Mac OS X

Perfect again!

Oooh, that’s a beautiful thing to see – the page looking exactly the way I intended.

Unfortunately, if you open up this page with any other browser, you will notice some major spacing issues:

Safari 1.2, Mac OS X

Woops. Where is the rest it? About a mile down the page.

Firefox 0.91, Mac OS X

Ummm, OK.

Internet Explorer 6, Windows 98

Plenty of white space here!

Internet Explorer 5.2, Mac OS X

Need I say more?

Opera 7.5, Mac OS X

As you can see, the spacing issues are horrendous.

And, if only one browser gets it right, then I still have a lot of work to do.

A look under the hood

To assist viewers better, I want to show the XHTML and CSS that I am using to attempt to create the effect.

XHTML

CSS

My thoughts

I set an explicit width for the image on the left, which is 200 pixels. Then, boxesright has a left margin of 220 pixels, which allows it be placed on the RIGHT of the image, with a small 20 pixel gap between the image and the list.

Other than that, there is nothing else that can be messing it up, but obviously something is.

The entire structure is enclosed in the content div, which, as you can see, has a left margin of 280 pixels. Could that be messing it up?

Categories: CSS

Add Feedback (view all)

Leave feedback

Feedback

Input format: The editor controls below will assist with Markdown syntax.

Status

Sub-status

Your info Name: Email (will not show on page):

Follow new comments via email? (You can turn this off any time)

Do you want your comments emailed to yourself?

Home Page (optional):

matthom is published and produced by Matt Thommes - an independent publishing enthusiast, mobile blogger, content creator, informative writer, web developer from Chicago. Never one to conform, Matt intends to promote the effect the web has on our lives, in an effort to intensify, instruct, and clarify all that is happening around us.

Contact Matt

Similar Entries

Swap banner image with CSS and PHP (658 recent visits)
CSS class, or HTML tag? (10 recent visits)
CSS font-size dialogue! (97 recent visits)
Misleading CSS link declarations (8 recent visits)
CSS print style sheet (6 recent visits)
CSS adjacent sibling selectors and IE 6 (307 recent visits)