17 replies [Last post]
kevinrhart
Offline
Regular
Last seen: 14 years 34 weeks ago
Joined: 2006-02-26
Posts: 16
Points: 0

I can't get drop caps to align correctly in Firefox although the're fine in IE. Here's the code I'm using:
CSS
p.dropcap:first-letter
{
font-size:300%;
font:bold;
float:left;
color:#FF0000;
}

HTML
<p class="dropcap">Blah blah

Thanks,
Kevin

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 32 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Drop Caps work in IE but not in Firefox or Opera

Hi Kevin,

A link to the page would be helpful to see the issue you speak of...although you do need to change 'font:bold;' to 'font-weight:bold;'

The problem could be the float, doctype, or the <p> not closed, etc...which is why a link or all the CSS and HTML is helpful. Laughing out loud

- r

drhowarddrfine
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Drop Caps work in IE but not in Firefox or Opera

It has to do with the line-height of the p itself. Set it to the same size as the first letter and see if that fixes it. p{line-height:300%} Firefox is doing this correctly. IE is not.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

kevinrhart
Offline
Regular
Last seen: 14 years 34 weeks ago
Joined: 2006-02-26
Posts: 16
Points: 0

Drop Caps work in IE but not in Firefox or Opera

Hi,
Here's the address.
http://www.hartshouse.utvinternet.com/history.html
Maybe you can figure out the drop caps not working in Firefox.
Thanks
Kevin

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 30 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Drop Caps work in IE but not in Firefox or Opera

Step 1: Read the stickies (it's common forum courtesy Evil )

Step 2. Remove

<?xml version="1.0" encoding="utf-8"?>

(which you would notice, had you read the sticky).

And it works fine for me - Firefox 1.5.0.1, WinXP

Verschwindende wrote:
  • CSS doesn't make pies

drhowarddrfine
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Drop Caps work in IE but not in Firefox or Opera

kevinrhart wrote:
Hi,
Here's the address.
http://www.hartshouse.utvinternet.com/history.html
Maybe you can figure out the drop caps not working in Firefox.
Thanks
Kevin
Not only do they work in FF, your page does not display them correctly in IE. In addition, I showed you how to fix your example. And then Piney has a point, too.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 32 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

Drop Caps work in IE but not in Firefox or Opera

Kevin,

Not that we are trying to be harsh, but after you follow the advice of the Dr. and TPH, you need to validate your html. You have an extra </head> tag above your <style> tag and you are missing a </div> closing tag towards the end of your code along with a few other errors.

http://validator.w3.org/check?verbose=1&uri=http%3A//www.hartshouse.utvinternet.com/history.html

- r

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 26 weeks 3 days ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

Drop Caps work in IE but not in Firefox or Opera

Can I add something that I was reminded about when I asked for help? That is to Validate your code. I have found errors in your html and css.

You have a lot of upper case in both of these where it should be all lower case for the code. Fix all of these and then try again.

In a test validate of your xhtml I got 15 errors.

Quote:
1. Error Line 12 column 22: document type does not allow element "style" here.

<style type="text/css">

2. Error Line 121 column 6: end tag for element "head" which is not open.

</head>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

3. Error Line 131 column 8: there is no attribute "HREF".

<A HREF="#.html" class="nav">Home</A>

4. Error Line 131 column 24: there is no attribute "class".

<A HREF="#.html" class="nav">Home</A>

5. Error Line 131 column 29: element "A" undefined.

<A HREF="#.html" class="nav">Home</A>

6. Error Line 132 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Countryman</A>

* by using upper-case tags in XHTML (in XHTML attributes and elements must be all lower-case.

7. Error Line 133 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Clock & Key</A>

8. Warning Line 133 column 40: character "&" is the first character of a delimiter but occurred as data.

<A HREF="#.html" class="nav">The Clock & Key</A>

9. Error Line 134 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Kings Arms</A>

10. Error Line 135 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Rambling Miner</A>

11. Error Line 136 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Station House</A>

12. Error Line 137 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Stonemasons</A>

13. Error Line 138 column 29: element "A" undefined.

<A HREF="#.html" class="nav">Tuckingmill Hotel</A>

14. Error Line 139 column 29: element "A" undefined.

<A HREF="#.html" class="nav">The Waterfront </A>

15. Error Line 140 column 29: element "A" undefined.

<A HREF="#.html" class="nav">Links</A>

16. Error Line 255 column 6: end tag for "div" omitted, but OMITTAG NO was specified.

</body>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

17. Info Line 127 column 0: start tag was here.

<div id="Vline">

I have cut out a lot of the output so run the test yourself to see the hints.

Please let us know how you get on after fixing these errors.

kevinrhart
Offline
Regular
Last seen: 14 years 34 weeks ago
Joined: 2006-02-26
Posts: 16
Points: 0

Another try

Hi,
Thanks for the info I shall be more vigulent in future.
Back to my problem,I've taken away the iffy navigation and validated the remaining page with 100% success but have still resoved the issue of the drop caps.The new link is :
http://www.hartshouse.utvinternet.com/historyminus.html
Have a look now and see if you can find the prob. Meanwhile I shall keep on researching.

Anonymous
Anonymous's picture
Guru

Re: Another try

kevinrhart wrote:
Have a look now and see if you can find the prob. Meanwhile I shall keep on researching.
I don't see a problem. Perhaps you can describe it so I know what to look for.

kevinrhart
Offline
Regular
Last seen: 14 years 34 weeks ago
Joined: 2006-02-26
Posts: 16
Points: 0

Drop Caps work in IE but not in Firefox or Opera

The drop cap is not positioned correctly ie with the top of the first letter of the paragraph

drhowarddrfine
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Drop Caps work in IE but not in Firefox or Opera

But it is. Unless you mean that 1px difference and that would be due to font family differences.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

kevinrhart
Offline
Regular
Last seen: 14 years 34 weeks ago
Joined: 2006-02-26
Posts: 16
Points: 0

Drop Caps work in IE but not in Firefox or Opera

Try it in Firefox or Opera

Anonymous
Anonymous's picture
Guru

Drop Caps work in IE but not in Firefox or Opera

kevinrhart wrote:
The drop cap is not positioned correctly ie with the top of the first letter of the paragraph
That's due to the font you've chosen.

Try removing the font-family

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Drop Caps work in IE but not in Firefox or Opera

kevinrhart wrote:
Try it in Firefox or Opera
I think you will find that very few of the denizens of this forum open anything in IE without the threat of a cattle prod.

Do this:

p {
    border: 1px solid blue;
    }

p.dropcap:first-letter {
    border: 1px solid red;
    }

You will see that the drop-cap is properly aligned with the paragraph in Firefox.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

kevinrhart
Offline
Regular
Last seen: 14 years 34 weeks ago
Joined: 2006-02-26
Posts: 16
Points: 0

Drop Caps work in IE but not in Firefox or Opera

Done that, but no difference

drhowarddrfine
Offline
Leader
Last seen: 10 years 46 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

Drop Caps work in IE but not in Firefox or Opera

It's not a fix. It's a way to show you, by outline, that there is nothing wrong.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 26 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

Drop Caps work in IE but not in Firefox or Opera

OK, try this:

  margin: 3px 0 -3px;

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.