text-image proportion issue...

[edoggio]

hi all, im putting together a music blog, and i was wondering if you might be able to help me with a problem i've been having involving the proportional relationship between the body text and the images on my main page.

the body text i have set at 10pt - ie, over the main div, font-size: 10pt;. for the images i have set the margin, padding and border to zero, nothing else. now, for the most part, this works fine and things are well-controlled. on my desktop, and on most other computers, desktops and laptops alike, everything is fine and consistent across the major browsers. however, on my laptop (windows media center 2005) i experience a problem on firefox (the other browsers still work fine) where the text is larger than it should be relative to the images. if i Ctrl - twice, to zoom out and reduce the text size, the text reaches the correct size, but the images are now too small, because they too zoom out. is this down to browser settings? why can i not achieve the relationship i want between the two? is there any way to prevent this sort of proportionality issue via design?

note: my laptop firefox is fully updated. also, i applied the css full reset stylesheet (available through yahoo), and it did not change anything.

ps. i know this may be somewhat of a minor issue, but i want to run a tight ship. i dont want people to show up at the site, and have text running off the bottom of the page because of the way they have their browser configured.

 

[smoovo]

First i would say post your URL that we can see your page and scripts. Second, i think you might want to use width and height sizes for your images, this will fix your issue.

 

[edoggio]

thanks for the quick reply. the url is www.chunkandchange.com, the blogging software is textpattern - the main page there is where ive been troubleshooting the problem, the 'every triumph, every victory' post extends beyond the bottom bar when i view it on my laptop in firefox. in the css you'll see there is an 0.9em font-size and 1.6em line-height specification for the text as well - you can ignore that though, i still have the problem when i remove those specifications. i just now specified image widths and heights in the html, but it doesn't appear to have solved the problem. the text still starts out inexplicably larger relative to the images. from the looks of it, i would say the images are appearing correctly, and the issue is with the text appearing a couple sizes too large. any thoughts?

 

[smoovo]

It's hard to say, i see it well on my PC, but try to add "font-size:100%;" instead of the "font-size:10pt;" to your body tag in your CSS, i think this is your bug now, also this will reset your font size and will allow all browsers to act the same on any machine.

 

[edoggio]

smoovo, many thanks - you nailed the problem. 100% was a little big, something in the 80% range will work - but yes, the proportionality issue is gone.

if you don't mind - what exactly is the 100% referring back to?

 

[smoovo]

I'm glad that i could help.

By default, browsers are using 1em font size (=16px), so 100% is 1em. So why don't we use 1em instead?! IE is the answer! If we want it to work on any browser and any machine we are using it in percent.