What do I need to fix on this musician's site? Font-size disaster!

**randomharp** · 07-27-2006, 08:18 PM

Please help review this site, which uses valid xhtml + css, and a nifty sylesheet switcher (so you can change themes - click on the pictures to the right).

http://www.harpjas.com/main.php
http://harpjas.com/old_site/index_old.html (client's old site)

I previously had the font-size set to 10px, until this guy on another HTML help board yelled at me and insisted I set it to 100% to allow the visitor's browser to determine the size. Which makes sense... except 100% looks freakishly large unless you have some sort of preferences set. (personally, I'm on a 1024x768 screen)

Any recommendations? thanks!

**waffles** · 10:30 PM

Set your font size in em's and stop taking what people say design wise as the absolute truth, including me.

With pixels your text will shrink and grow based on the resolution. With em's or %'s the text will stay the same relative size as everything else.

Also, your navigation is hidden behind the picture and the concert schedule is leaving it's box. At least it is when I'm using Firefox at 1280x1024.

**vangogh** · 07-27-2006, 10:39 PM

I agree with Waffles. Using em or % will allow IE users to resize the font size, but don't feel like you have to use 100% or take as an absolute what anyone, especially anyone on a forum says. We all have opinions here and on other forums, but I've seen quite a few bad opinions mixed in with the good ones.

I'm also seeing the same thing with the menu behind the image. Also using Firefox.

**waffles** · 07-27-2006, 10:50 PM

Alright, I pulled out Opera and IE (feel special) for you too. I've got nothing else going on right now.

Everything looks as it should in IE, although I don't like how the navigation hangs over the white border on the image. Opera looks just like Firefox in about every way.

If you don't have one of these browesers, I would go get one. You'll get people swearing by both, but for testing purposes it's not a huge deal. I'd actually suggest both.

IE fixes bad coding, which is what you have with your navigation. Probably something simple. And normally I'd say to validate the code, but yours validates. So I have no idea what it is.

Really, the past way to go is to code for FF/Opera and tweak for IE. IE is the most forgiving of the three major browsers, which doesn't make it too good if that's the only thing you test in.

**LadynRed** · 07-28-2006, 04:48 PM

IE doesn't 'fix' bad coding, it just ignores sloppy coding.

100% font size = the default size of 16px. Using percentages is a good idea, but you might want to specify maybe 90% instead of 100 .90x 16 = 14 (roughly), so use your calculator to get the % you want.

The UL for your top nav that's hanging over your white border - the problem is the absolute positioning. I don't see the necessity of absolutely positioning it in the first place. You can put the nav inside #top, float it right and adjust the top margin to get it just where it should be.

I also noticed that the layout breaks if I shrink my browser window to less than the 820w you have set. Putting a fixed-width wrapper around the whole thing would stop that from happening.

Nice site, nicely done

**randomharp** · 07-28-2006, 08:59 PM

Waffles, thank you for taking the time to check it in multiple browsers... and LadynRed, your comment about needing the fixed-width "container" was spot-on. I'd actually put that into the css from the very start, but I discovered that an extra "</div>" was accidentally closing it out too early!

I am using ems for the text now, so I hope nobody has to squint. I have yet to try the margin-top idea to get the navigation ul to stop hanging over the white border... will get to that shortly.

The last thing I CANNOT seem to figure out, no matter how much I stare at the code, is why on earth the list items automatically have this really wide padding over to the left (an example, see the "concert calendar" area of Julie Ann Smith :: Concert Harpist and Julie Ann Smith :: Concert Harpist ).

I am not specifying any padding or margins for these lists, so I don't know what's up. I just want the text to appear like it does in the other sections (Julie Ann Smith :: Concert Harpist ) !! any ideas on this?

Thank you so much for all of your replies!

**vangogh** · 07-28-2006, 09:28 PM

That indentation on the lists is built in. It's just the default so if you don't want it you need to specifically take it out. There's one catch though. Firefox and IE see things a little differently. I forget which does which, but one has that extra space on the padding and the other on the margin. So when working with lists it's usually a good idea to set margin:0 and padding:0 right from the start for both and then add back in whatever you want, if you want. You'll only need to add back to either the padding or margin once you've set both to 0;

**LadynRed** · 07-29-2006, 07:29 PM

FF uses padding, IE uses margin

You definitely do need to zero out padding and margin on your UL and LI's to start with, then add it back the way you want it.

**occ07** · 07-29-2006, 07:56 PM

I think the site looks awsome, the only thing I would change is move the header image all the way to the top, and place the link navigation right below the header.

**classeium.com** · 07-30-2006, 03:55 AM

I think that you should loose the shadow around the containing object and smoothen the ronding edges, just a thought.

**senitorn** · 07-30-2006, 08:03 AM

I don't like how the gallery loads all the images when i only want to view one... Just my opinion(which is nearly always wrong)