Dropcap dilemma

[badchamp]

Here's a thing. Playing about with dropcaps on one of my CSS web pages. Think I've got the code OK but when I ftp the page, then refresh the web page, the dropcaps just flash up and then disppear almost immediately! The text is wrapped around the space whenre they should be, there's just no dropcaps.

A new one on me, although to be honest that's not saying much!

Any ideas???

Thanks
Jeff

 

[lhatkins]

you have another property overiding it, also the order is important, are you using block or inline element
css file
.dcap
{
float: left;
width: 42px;
font-size: 62px;
line-height: 51px;
font-weight: normal;
color:#444444;
font-family: georgia, times;
}
-------------
html
<span class="dcap">D</span>rop cap.
should do the trick.

 

[badchamp]

Lee.
Thanks.

I'm using php, content defines the general page format.

This is what I've got. Not sure what properties might be overiding it.

<div class="content">
<STYLE TYPE="text/css">
<!-- .dropcap {font:bold 400%; float: left; margin: 5px;} --> </style>
<span class="dropcap">A</span>s you can see,

Full source sode at http://www.hawksbc.co.uk/news.php

 

[lhatkins]

that is working fine in ie6 and firefox1.04, nice one. i would add the width and line height properties from my example just to tidy it up.
what browser and version are you using?
you are using a hack to import your css file, this is ok, but means ie4 ,nn4 will not see your css file.
the syntax for loading a basic css file is
<link href="basic.css" rel="stylesheet" type="text/css">
and for importing and advanced css file that you don't want nn4 for ie4 to load is
<style type="text/css">
<!--
@import url(advanced.css);
-->
</style>

hope this helps.

 

[badchamp]

Lee,

IE 6 !! but it still doesn't appear !

I'll have a go at the syntax you mentioned later.

Thanks
Jeff

 

[lhatkins]

how bizare, it now fails with my ie6 too now. grrrr, ok,

i have noticed a problem with the main html, you have
</body>
</html>
too early in the code, this should only be at the end of the doc, may not fix the prob but good to get it tidy.
run the html and css though the w3c validators, this will help to remove any syntax problems
http://validator.w3.org/

 

[lhatkins]

I saved a local copy to work on hope that is ok, will delete when i've found the prob.
the problem is with your background image, i don't know why yet but the drop cap is going behind it.

 

[lhatkins]

add
position:relative;
to your dropcap css class
sorted.

 

[badchamp]

Sorted indeed.

Lee you're an absolute star :beer:

Out of interest (as i've only been at this css lark about 3 weeks) how did you figure it out? Might help me in the future.

Cheers and best wishes for your recovery !
Jeff

 

[lhatkins]

Sorted indeed.

Lee you're an absolute star :beer:

Out of interest (as i've only been at this css lark about 3 weeks) how did you figure it out? Might help me in the future.

Cheers and best wishes for your recovery !
Jeff

just through experience really, if you float an element you need to specify its position.
a goood book, one i use, is the site point, design without tables, very good book with lots of real world examples.

http://www.sitepoint.com/books/css1/

thanks for you best wishes, i'll be stuck in for a while so if i can be of further help let me know. be paicent though, still a bit slow on the old keyboard at the mo.