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.

- r

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.

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

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

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

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.

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

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.

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

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.

I don't see a problem. Perhaps you can describe it so I know what to look for.

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

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

Try it in Firefox or Opera

That's due to the font you've chosen.

Try removing the font-family

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

Done that, but no difference

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

OK, try this:

  margin: 3px 0 -3px;

cheers,

gary