Getting weird squares when using the <h1> tag

rubyonrails-talk
1

Kristen wrote:

Im following the agile 2.ed book. When I put something in the h1 tags, then I get a row of tiny blue squares under the word in the h1 tags. Everything works fine when using h2 or h3. Has anyone else experienced this?

What browser, font, and encoding?

Rails most likely didn't cause them, unless you have a non-ASCII language or a tiny font turned on...

2

Kristen wrote:

1. Tried it in both Firefox and Safari (same result).

The two suspicions here are...

- "greeking", which is text so small it forms dotted lines - a bug in the browser's geometry manager that leaves partly-clipped text

Either way I'd ignore it. But to check for the first, try to copy that text out and paste it into a font-proof text editor. (On Windows I'd use Notepad.) To check for the second, get yet another browser, maybe on another computer, with another OS, etc.

Next, copy your Rails site into another folder and start removing everything that doesn't have anything to do with text. Keep going until you have just sample.html with an <H1> inside!

3

Kristen said the following on 02/04/2007 04:47 PM:

I tried the problematic h1 tag with Opera also and it gave me the same akward tiny blue boxes under the word enclosed in the h1 tag. I also created an empty view with only h1 tags - same problem.

You say   "I get a row of tiny blue squares under the word in the h1 tags"

I read that to mean there is the word        AND there are the blue squares        AND they are under the word

I can reproduce this by having the following, or something like it, in my CSS.

h1 {   ....   border-bottom: 1px dotted #000033;   ... }

Of course if the word isn't visible it may be that the font size is set small.

Either way, take a,look at your CSS.

There is also a plugin for Firefox called 'Web Developer'. It allows you to view (and edit) the CSS that the browser is using (but not actually on the remote site) in the side bar. I often use this to fine tune my development or to see how an effect is being achieved at a site I'm viewing. I recommend using it to see what is actually going on, what CSS and/or style your browser thinks its using.

When I view your site at

using Firefox on a Linux/mandrake box I don't see any small blue squares.