CSS - How To Bold/style The First Letter Of Name On Button?

The section of my site that this effects is a login area, so I can't provide a link... I can post some code if I need to...

I have a div with this class applied to it.
Code:

.minidaysofweek div{
  width:13.6%;
  float:left;
  font-weight:bold;
}

It was working fine here, but when I put it in my site template, the bold doesn't work. So I added color:blue; just for testing, and it changed the color... what would keep the font-weight from being applied?

The minititle class isn't bolding either like it should...
<edit>FF and IE effected</edit>

Hi everybody

I'm sure many of you have come across the problem where your links jump when you increase font size or bold your text when you hover over them. The reason obviously being that the anchor is pushed bigger because the text content increases in size, thus pushing all following links around.

I've solved this problem before for links on top of each other by defining a line height. My problem is specifically for links next to each other.

I have solved this by placing each anchor inside a div and specifying a specific width for each. Although this works, it is not overly elegant.

I was wondering if someone out there has a better solution to this?

Thanks in advance.

I am just wondering if there is a way to simply extend a style rule from one previously defined. For instance, if I have this rule:
Code:

 .textarea-box {
	color: #990000;
	background-color: #fff;
	width: 375px;
	height: 200px;
	border: #000 solid 1px;
	} 

...if I want another text area rule to be the same except for one difference, the height should be 80px, do I have to write the rule out again with a new name, incorporating the new height, or is there some nifty way to just change the height in the new rule?
Thanks for help with this.
j9

Why can't I get this to work on the first letter -

#maincontent {
float: right;
top: 100px;
width:638px;
margin-left:132px;
height:500px;
clear:right;
position: absolute;
background-repeat: no-repeat;
border: 0px solid purple;
text-align:left;
padding-top:0px;
}

#maincontent H1{
display:block;
width:auto;
border: 0px solid purple;
text-align:center;
margin-top:20px;
margin-bottom:40px;
color:#000066;
font-size:16px;

}

#maincontent P{
width:80%;
margin-left:10%;
margin-right:10%;
display:block;
background-repeat: no-repeat;
border: 0px solid purple;
text-align:justify;
padding-top:0px;
color:#08207B;
}

#maincontent P img{

border: 2px solid #08207B;
float:left;
margin-right:5px;
margin-bottom:0px;

}

#maincontent P:First-Letter{
color:red;
font-size:24px;
}


Everything else works fine...

Hi everyone. I would like to change the first letter of an h2 tag thats NOT in a span in the following chunk of code

Code:

<h2>
	<span class="subtleHeader">Saskatoon, Regina and Edmonton's</span><br>
	WEB DESIGN EXPERTS
</h2>

So in this example I want to change the W. yes I can change the dom, but I'm very very lazy and have this DOM structure in many places and was wondering if there was a css way to do it.

Thanks

I have a menu bar made up of <a href> elements that have a hover style of: PHP Code:
#mainMenu a:hover {
    color:#000000;
    background-color: #66c74c;
    padding: 1px 4px 1px 4px;
    margin: 1px 1px 1px 1px;
} 



This will provide a green colored rollover visual as the user moves their mouse over the menu bar.

I just added some JS today that will highlight the clicked (selected) menu so there is visual feedback of the section the user is in. For some reason, after setting the background color of the <a href> and color attributes, the HOVER: no longer functions. Here is the code to do the hilite where I pass the ID of the <a href> menu selection in the variable "menu": PHP Code:
//--- Simplify setup by creating an array of the menus and hilight ID's ---
    var menus = ["menu1","menu2","menu3","menu4","menu5",
                "menu6","menu7","menu8","menu9","menu10"];
    
    function J_hiliteMenu(menu) {
        //--- first make sure all the menu are hidden and unhilited ---
        for(i=0; i < menus.length; i++) {
            if (menus[i] == menu) theIndex = i; // Hold on to the chosen index position
            var obj = document.getElementById(menus[i]);
            if (obj == null) continue;             // if menu is not available skip it
            obj.style.color = "#ffffff";
            obj.style.backgroundColor = "#234fd7";
        }
        //--- hilite the menu we're interested in ---
        var obj = document.getElementById(menu);
        obj.style.color = "#000000";
        obj.style.backgroundColor = "#f8f400";
    } 



Prior to hiliting the menu I un-hilite all the menus (since we may be switching from another). I think this is where the problem is. Maybe I need to redefine the rollover "hover" attribute for all elements during the un-hilite loop? Does anyone know how to set a HOVER: attribute using JavaScript?

Thanks!

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 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 look after a website whose stylesheet includes the instruction

p, ul, li {
font-size: 12px;
letter-spacing: 0.15em;
padding-bottom: 1em;
}

This is interpreted as intended by IE and FF. However, Google Chrome appears to ignore the instruction. I'm not allowed to post a URL here, but if you search Google for "Stile Antico", you'll find the site as the first result, and then click on "The Group" for a page with plenty of body text.

I've experimented for different values of the letter-spacing property, with mixed results; at 0.2em, Chrome gets it right (but this is aesthetically not good for me). I suspect there may be an issue with rounding/decimal places - but even so, that wouldn't explain why Chrome ignores 0.15em, rather than rounding it to the nearest usable value.

Can anyone shed any light? I can't find a good workaround; I want to keep things expressed in relative units if possible.

Thanks in advance for any help

Andrew

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?

i know that IE doesnt support the :hover being added to anything but links, is this the same with :active?
was just wondering whether i could have a style change when the user clicks on a form button

basically if i add a border around a button in FF i can click the button however the effect of "pressing" a button is lost.. IE mainatain this! is there a solution or will i have to live with it?

I was reading a tutorial were they always style both <tr> & <td> with the same thing... Is this needed? Or do you just need to style <tr>?

Code:

table.navigation tbody tr.odd {
	background: #252525;
	color: #fff;
	}
table.navigation tbody tr.odd td {
	background: #252525;
	color: #fff;
	}