Modifying text styles for

[sneakyburt]

1) Script Title: simpleGallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...suppliment.htm

3) Describe problem: Trying to make my image descriptions (alternating below the image gallery, as described in "Creating Custom Controls by Calling navigate()" on DD. Working perfectly, but I need to have some text in italics in the description panel, which is called by the var vacationtext. How do I modify the text so that it calls different css elements? I've tried implementing simple italics (em /em) html tags within the text itself, but doesn't work...

[sneakyburt]

Link to page: http://seanmccuedesign.com/resource/...index-new.html

Thanks again!

[jscheuer1]

In the resource/HTML/grey/css/style.css file, line 10:

address, caption, cite, code, dfn, em, strong, th, var 		{ font-style:normal;font-weight:normal; }

This sets the em tag to normal, not italic. If you remove em from that definition, you may then use the em tag to show italics.

Alternatively you could leave it in there and make a separate rule:

#myvacation em {font-style: italic;}

Since it keys off of the container id it might be able to go anywhere. But after line 10 would probably be wise.

[traq]

... I've tried implementing simple italics (em /em) html tags within the text itself, but doesn't work...

<em> is not an "italics" tag. you might consider simply using the <i> element.

a really good explanation.

So, why does your text need to be italicized? If it's simply typographical (no stress emphasis: if you were speaking, your voice wouldn't crack), then using <i> is perfectly appropriate.

( <em>if</em> you're using <i>HTML5</i>. )

[jscheuer1]

So, why does your text need to be italicized?

If you look at the page, it's taxonomic nomenclature (say that ten times fast). The i tag might work given the current style of the page. But there are some odd resets. Best thing to do would be to create a selector as indicated in my previous post. Perhaps a class would be good for that, instead of the child selector I posted. But in any case it should be something that could be changed in one place to affect all instances.

[sneakyburt]

Thanks! That sure did it. And you also answered traq's question perfectly. Two for two! To note the Latin/Scientific name of an organism properly, the two part name of the species must be italicized. Thanks again.

[jscheuer1]

traq's point is still valid though. He was just asking if semantically you need to emphasize the scientific name, or if merely italicizing its presentation is sufficient. I think one could go either way on that one. I favor emphasis, as that's how it's most often spoken, at least to my recollection.

This really only comes into play for screen readers and other software for special user needs/preferences where italics are either not shown or are irrelevant in some way.

[sneakyburt]

Ahh. I understand. Well I have a second question regarding this feature - - the #myvacation{ css element only effects the heading of each image in the gallery... I'd like to change the size of the text description of each image, but can't find what determines this size?

[jscheuer1]

Elements' styles which are not implicitly inherited and that are defined elsewhere will take precedence unless specifically redefined for when they appear in the myvacation division. Here's what's in a typical description:

<div id="myvacation">
<strong>Spider Tool</strong>
<p>Western lynx spider; <em>Oxyopes scalaris</em> (Oxyopidae); male adult shown here; male body length, when mature, ranges from 4.7-6.1 mm; many leg spines are perpendicular to the leg.</p>
</div>

From what you're saying and from looking at the page again, the p font size is defined elsewhere as 12px, while the strong font size is not so inherits the 14px for myvacation. The em font-size isn't defined elsewhere so inherits the p's font size because it's located inside the p.

You can make a selector and rule set like:

#myvacation, #myvacation * {
	font: verdana, arial, helvetica, sans-serif;
	text-align: left;
	line-height: 17px;
	font-size: 20px;
	color: #000;
}

That will take them all in. Or you can select separately (like if you want different colors, font-sizes, etc. for each):

#myvacation strong {

#myvacation p {

#myvacation em {