Getting weird squares when using the <h1> tag

Rails
1

Hello,

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?

Thanks in advance!

2

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…

–
Phlip
Redirecting... ← NOT a blog!!!

3

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…

  1. Tried it in both Firefox and Safari (same result).
  2. I didnt specify any special font in the h1 tag, just plain old h1 tag
  3. Im using TextMate 1.5.3 with file encoding set to UTF8

Where would I alter the tiny fonts? In the css file? The only tiny
font im using on that view page is this css class and its not applied in
the h1 tags.

#product-list .list-actions {
font-size: x-small;
text-align: right;
padding-left: 1em;
}

Thank you for your response.

4

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

inside!

–
Phlip
Redirecting... ← NOT a blog!!!

5

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

inside!

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.

NOTE: I do not have a problem like this when using Locomotive
(self-contained ruby on rails platform for mac - rails 1.1.6).

The problem occurs on a system that I setup yesterday using this
article:

I do have the latest version of rails (not edge rails).

These are my system stats atm:
Ruby version 1.8.4 (powerpc-darwin8.8.0)
RubyGems version 0.9.0
Rails version 1.2.1
Active Record version 1.15.1
Action Pack version 1.13.1
Action Web Service version 1.2.1
Action Mailer version 1.3.1
Active Support version 1.4.0
Application root /Users/kristen/Documents/ruby_rails/depot
Environment development
Database adapter mysql
Database schema version 3

…and im following the example in the 2. ed agile book (ch 6)

Im thinking that it has to do something with my current version of rails
or LightHTPD. Maybe they are outdated?

Thanks for your input so far.

6

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

Thats exactly what it was. Thank you so much.

This is what my CSS was saying:

h1 {
font: 150% sans-serif;
color: #226;
border-bottom: 3px dotted #77d;
}

Thanks to everyone who helped!

7

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 D.’.
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.

–
Last night I played a blank tape at full blast.
The mime next door went nuts!