The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

IExpl problem with xhtml valid page

In Safari and Firefox (OS X) the page shows up fine, i.e. picture to the left, and to the right of it some text. Windows IE is another story however: once the text to the right becomes taller than the image, the content below lines up with the picture. I checked and the page does validate as xhtml 1.0 Transitional.

I'm not sure which version of IE your friend is running as I've checked it in IE5.01 and IE5.5 and neither of them display the problem you describe.

You do have a problem with your font size a bit as the td isn't inheriting your .item styles so you'll need to add something like this to get it to display the same as other browsers but other than that IE5.01 and IE5.5 look fine.

Code:

.item td {
font-size: 11px;
color: #666;
}

However, I would question why you even need to use tables and you certainly shouldn't be using absolute font sizes as IE6 and lower won't allow your users to resize their text so that's something else you should definitely look into fixing.

I'm not sure which version of IE your friend is running as I've checked it in IE5.01 and IE5.5 and neither of them display the problem you describe.

Weird -- I'll have to find out about that.

Originally Posted by csswiz

You do have a problem with your font size a bit as the td isn't inheriting your .item styles so you'll need to add something like this to get it to display the same as other browsers but other than that IE5.01 and IE5.5 look fine.

Got it, thanks.

Originally Posted by csswiz

However, I would question why you even need to use tables and you certainly shouldn't be using absolute font sizes as IE6 and lower won't allow your users to resize their text so that's something else you should definitely look into fixing.

About the table usage: you're absolutely right about that one. It was a bit of an emergency fix because I had initially coded the .item css to hold only an image and a tiny bit of text next to it that never gets to be taller than the image. Then of course up came the about page...
As for the fixed font size: perhaps I should look into using em, yes. I'm one of those controlfreaks who hates to leave any of the visual aspects of a site to the user - bad habit I know...

Could it possibly be IE5.2 on the Mac? I don't have access to that but from experience I know that it's the one browser that causes the most problems for me.

If you use the following HTML instead of the table

HTML Code:

<div class="item clearleft"><img src="images_folio/about-me.png" alt="me"><div id="aboutcontent"><h1>About Me</h1><h2>Studies</h2>
I have a bachelor's degree in graphic arts.
<h2>Interests</h2><p style="margin-top: 0pt;">I love design, illustration and drawing, whether
for commercial purposes or not. My admiration for people like Robert Crumb,
Manara and Moebius is limitless.</p><p>When I'm not playing around with pen and ink, you'll probably find me
at my Mac, toying around with software or working on one of my personal
sites.</p><p>Aside from that I'm something of a music freak. Favorites include Frank
Zappa, Neil Young, Rufus Wainwright, Elliott Smith, Johnny Cash, Steely
Dan and Sufjan Stevens. I used to play guitar in a now obsolete band called
“Moonbug” which is where the domain name comes from.</p><h2>Skills</h2>
I am proficient in the following areas:
<ul><li>xhtml</li><li>php and mysql</li><li>apache webserver</li><li>Adobe Photoshop</li><li>Adobe Illustrator</li><li>Adobe Indesign</li><li>Quark XPress</li><li>Apple OS X</li></ul><h2>Languages</h2>
Dutch is my maternal language. I'm fluent (reading and writing) in English
and French, and have notions of Spanish and German.
<h2>Random facts</h2>
Some useless information for your perusal...
<ul><li>I am currently 35 years old.</li><li>I am married to a lovely Argentine girl.</li><li>My cat's name is Zappa.</li><li>My previous cat's name was Chopin.</li><li>I've traveled to England, Ireland, France, Spain, Germany, Argentina
and Brazil.</li><li>Italy and the United States are on my wishlist.</li></ul></div>

then that should remove the table and also allow your users to resize the font size in earlier versions of IE. You might have to tweak the percentages of some of your elements as they weren't on this page so couldn't see what they were doing but it shouldn't take you two minutes just to change these through trial and error till you get the sizes you want.

Allowing your users to resuze the text isn't just leaving the visual aspect to your users, it's about ensuring that your users can actually read the text on your site. Font sizes you specify maybe too small for somebody with poor eyesight so by allowing you users to resize the font, you are making your site more accessible and isn't a hard thing to build in from the start by simply using % or em's to specify your font size

Hey, thanks much for the code! Turns out I linked to the wrong page btw (doh): I meant to refer to http://portfolio.moonbug.org/contact.php -- on that page the form to the right didn't display right. Your code fixed it.
Oh, and the browser in question was IE 6...