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
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
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.
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
Drop Caps work in IE but not in Firefox or Opera
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
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
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
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.
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.
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.
Re: Another try
Have a look now and see if you can find the prob. Meanwhile I shall keep on researching.
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
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.
Drop Caps work in IE but not in Firefox or Opera
Try it in Firefox or Opera
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
Try removing the font-family
Drop Caps work in IE but not in Firefox or Opera
Try it in Firefox or Opera
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
Drop Caps work in IE but not in Firefox or Opera
Done that, but no difference
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.
Drop Caps work in IE but not in Firefox or Opera
OK, try this:
margin: 3px 0 -3px;
cheers,
gary