CSS - First Letter Not In Span

I read somewhere that we can format the first letter of each paragraph separately from the rest of it by CSS. Is possible and how?

I'm attempting to display a first-letter style to my h1 tags, which has until now been a simple task.
Everything was working fine until I made my h1 style display inline to remove the autyomatic line-break. Now my first letter style doesn't work. This happens on both Firefox and IE.

code is thus:
h1
{
font-size:13pt;
color:#2E3192;
font-family:verdana, arial, sans-serif;
font-weight:bold;
display:inline;
}

h1:first-letter
{
font-style:italic;
color:#CC6600;
}

Can anyone shed any light on this problem?

I want to do something like: Submit but i dont know how to do it?

i tried doing input value ="<span style="AK">S</span>ubmit" />
but it doesnt work....

Do you guys know if there is any way to change the style of only the first letter in a paragraph? For example:

"The duck is dead and it can't come back to life."

The letter T would get an effect such as switch of baseline, color, bgcolor and indentation. How is this possible without having to add a class to that particular first letter all the time. I am using this in a weblog system so it would need to be added in a template. Any help? Thanks!

Due to letter-spacing double break won't work in IE. And triple break works as it is double break.

How to solve this problem?

Hi,

Tried using Pseudo Elements to set style property for first character (first-letter) and first line (first-line) inside an element.

Every thing works fine when we set such styles on div or table elements, but failed on anchor tags

Working on
Code:

<style>
div:first-letter{font-weight: bold;}
</style>

<div>
Pseudo Div<br>
Line Two<br>
Line Three<br>
</div>

Failed On
Code:

<style>
a:first-letter{font-weight: bold;}
</style>

<a href="">
Pseudo Div<br>
Line Two<br>
Line Three<br>
</a> 

Can anyone give me the solution for this.

Thanks in advance!

Hi,
Code:

<tr><td colspan="2" height="5"></td></tr>		
<tr><td width="30%" align="right">City</td><td>This is supposed to be some content</td></tr>

How do I imitate structure of the table above.

In the example below the text between <span> if too long ends up on new line below <label>
How do I make sure that it stay on right side?
Code:

<div><label>City</label><span>This is supposed to be some content when too long appears below span not below label</span></div>

Thank you.

Hi,

I am currently trying to produce a website using CSS style sheets.

I have used 'span' to position and align blocks of text on the page. All looks well, but when I try and validate the page I get an error message that says the <p> and <ol> tags cannot be used within <span> tags.

Can anyone suggest anyway round this?

Many thanks x

hi,

i have a chunk of dynamic text coming in. it can have html links in it. so something like:

'blah blah blah <a href="site">link text</a> blah blah'

im trying to stylize the dynamic text with CSS. i can get the font size and everything to work but i can't get the link text to behave like i want it to.

here's what i have:

PHP Code:
//the css class
.articleDesc
{
    font-family: verdana, arial, geneva, sans serif;
    font-size: 12px;
    font-weight: none;
    text-decoration: none;
    color: #000000;
}

//trying to make all links red, doesn't work
a.articleDesc
{
    color: #FF0000;
}

//php
print '<span class="articleDesc">' . $dynText . '</span>'; 





the links just come out default, ie. blue and purple...

anyone know what's wrong here?

I am trying to make tooltips, using PHP code inside <span>.

Is there possibility to control the position in <style>, to avoid possibility for the box (tooltip), not to be completely visible, I mean, when the word that has to be described is at the right bottom of the window, box will change it's position and will be placed at the upper and left position. The box would have to be placed at the position it can have to be readable.

I'm wondering is is it possible to have a <div> tag where a left <span> can stick to the left and a right <span> to stick to the right. What I'm looking for is ....

============================================
=[blah blah] (lot of spaces here) [blah blah]=
============================================

Code:

   div.divTop
   {
     margin: 0px;
     padding: 8px 0px;
     width: 600px;
     color: #000000;
     font-weight: normal;
     font-family: verdana;
     font-size: 10pt;
     font-style: normal;
     text-indent: 20px;
   }
   span.spanTitle1
   {
     font-size: 16pt;
   }
   span.spanTitle2
   {
     font-size: 10pt;
   }
[code]
[code]
   <div class="divTop">
     <span class="spanTitle1">blah blah1</span>
     <span class="spanTitle2">blah blah2<img src="....."></span>
   </div>

Edit: Can't make the ASCII text work here.....

Hello,

Well this is a very simple question ... how can Iset the width of a span from CSS?

Basically I tried setting the span with from CSS however the span size remained wrapped to the text inside rather then taking the width I desire.

I check some interent forums, and found out that if I set the float:left the width is taken, but my span is no longer is place!

is there a way to set the span width without having to set thr float:left option?

thanks and regards,
Sim085

I'm a novice with CSS and HTML so the following may seem elementary to most of you. I'm a retail vitamin store owner with a website, (URL address blocked: See forum rules) . We do very well with our store front and are getting better and better with our online discount vitamin store.

Our web master has programmed our site so we can easily insert new products. This is done in the <body>. Recently I've wanted to add some spice with color and formatting .

At first I was doing this with something like <FONT FACE="Verdana, Helvetica, Arial" size="4" color="006600">. But now as I get into CSS and double checking all code with W3.org, it doesn't like this approach.

Now I'm trying <span id="enzymatic" class="prod_description"> in the <body> with
span#enzymatic p {
color: green;
}
span#enzymatic h4{
color: blue;
}
etc. in a CSS definition file.

It all works well, but W3.org still doesn't like where I've inserted the code. If you go to our page:

(URL address blocked: See forum rules)=country-life-seniority-multivitamin

You will get among other "errors" the following message:

<h4>Seniority &trade; Multi-Vitamin Capsules </h4>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Any hints as to what basic rules I'm breaking? Be kind.

Many thanks,

healthyphil

I am creating a page where I will list OS names, and when I mouse over the name
I would like to display the versions in the database for the corresponding name.

The problem I am having is that I'm trying to use span to display the versions but I keep
getting a document.all.menu1.style is null or not an object.

Here is my code. I don't seewhere it's not working since I got this code from a tutorial and the
tutorial code works just fine.

<STYLE TYPE="text/css">
#menu1 { display : none }

A:link {color:black; text-decoration:none}
A:hover {color:blue; text-decoration:underline}
</STYLE>

<td bgcolor="#DCEBEB">
<SPAN onMouseOver="document.all.menu1.style.display = 'block'" onMouseOut="document.all.menu1.style.display = 'block'">
<img src="../../images/plus.gif">AIX<br>
</SPAN>
<SPAN ID="menu1" onClick="document.all.menu1.style.display = 'none'">
<img src="../../images/minus.gif"><a href="http://www.test.com">Testing 1</a><br>
<img src="../../images/minus.gif"><a href="http://www.yahoo.com">Testing 2</a><br>
<img src="../../images/minus.gif"><a href="http://www.cnn.com">Testing 3</a>
</SPAN></td>