Style Sheet HTML Help, Please

I used a WYSIWYG style sheet HTML program called Antenna to create this web site. http://www.catesword.com

Problem is it may look fine to you, but it doesn't look fine on my laptop or on flat screen monitors. If you don't have one handy here's a screen shot of the what the fonts look like.



I know it looks bold but if you ctrl A the reverse highlight looks fine. Any ideas on why this is happening on certain monitors?

As always, no hurry and thanks for any help.

Cate

 

The fonts in your screenshot look overly bolded to me. They're practically illegible.

However, on your website the fonts look fine. They are definately not too bold or illegible. As a matter of opinion, I think that they actually look really good.

But you already knew all that.

The most obvious thing to do is to check IE->View->Text Size

A little tweak that may help you out when using laptops and flat screens is turning on ClearType. It's off by default because on normal monitors it makes fonts look blurry. (This only applies to Windows XP)

To turn ClearType on:

- Right click on an empty part of the desktop
- Go to Properties on the menu that appears
- Click the Appearance tab and then hit the Effects button
- Check the Use the following method to smooth edges of screen fonts box and choose ClearType from the drop-down menu.

Here's a FAQ from Microsoft on ClearType

I'm out of ideas for now, so I hope that one of these fixed your problem.

 

When you say it "doesn't look fine," what exactly is the text doing on the other monitors? Most times this is browser interpretation, but it can also be a style sheet issue or a combo of both. If you have a style sheet that you're using, drop it in and let's have a look.

::edit:: ack, viewing the browser-translated source code on the page I'd guess that it's a problem with the editor you're using and the fact that it's not flexible enough to adhere to browser standards. I don't like to use those editors, myself, but I've also not seen funkified code like what yours is outputting. It's just shy of what MS Word does to html code.

If you want your code to look the same across browsers and computers, try to simplify everything as much as you can. Checking a site or a book on style sheets will make this very simple for you. You can set your font styles at the top of your page (or in a separate page) and they won't have to be referred to in each paragraph as it looks as though your editor is doing. Repeating styles in the code is the easiest way to create inconsistency.

At the most basic (and the simplest, if you don't want to use style sheets), you can "tag" the paragraphs with hardcoded font tags that will be interpreted the same across most browsers.

HOpe that helps a little bit.

 

I think what she's getting at is LCD Active Matrix monitors [(which include the new flat screen monitors now being sold with PC's) <-- somebody correct me if I'm wrong] are the ONLY type of monitors that mess up the fonts. Other monitors, Trinitron for example, view the fonts as (and I must compliment you) very nice.

Question is, is this a software limitation unforseen by the people who make this Antenna web authoring program (xttp://www.stormdance.freeserve.co.uk) or has Cate stumbled upon an X-File-esk government plot to keep people away from flat screen technology?

I'd suggest the former and contact stormdance tech support unless somebody else has seen this before.

Either way I'd love to hear the answer to this puzzle.

 

This might be it, in fact I'm pretty sure...

Your DIV tag has two elements in it and I think they are the cause. Delete all instances of this two elements or do another roll over effect with you text and I"ll bet it comes out looking great.

Sans quotes, find all instances of "-moz-opacity: 1;" and "filter:alpha(opacity=100);" and delete them.

Let us know if it doesn't work.

 

BOZ!

Thank you! Tried it and it worked. You have made my day.

Cate