|"Resetting" style on part of page|
how to reset the style on part of page
Do you know if there's a way of resetting the style on a part of a web page? More specific: I have a page with a linked in style sheet like so:
<LINK href="../Styles/Standard.css" type="text/css" rel="stylesheet">
On one part of the page, I don't want the content to be formatted with this style at all (the reason for this is that I have a rich text editor embedded which is currently being affected by the style).
Any help would be highly appreciated!
Surround the part of the page you with to have unaffected with <span> tags and style it different or nostyle. Only the part page within the Span will be affected, and normal styles will resume after the tag.
Maybe a declaration like this: <span class="nostyle">
position:relative; top: 0px; left: 0px;
or whatever, etc.,
Rhys: will that validate? I've had a few issues with span tags and validation lately, why I ask...
|will that validate? I've had a few issues with span tags and validation lately |
It will validate as long as there are no block level elements nested inside the span. Since <span> is an inline element, specs say it cannot contain any block level elements, so this...
..validates while this...
...do not, the first because it nests a paragraph (block level) inside a span (inline), the second because it improperly nests the span.
cEM: yah, I got that.... problem lieth with trying to span tag an img tag.... is img considered block level?
|Inline-level elements are those elements of the source document that do not form new blocks of content; ... (e.g., ... inline images, etc.). |
Ellipses and bold are mine. The above is a quote from the 2.1 specs. Whether there is such a thing as a block image, I don't know, but I assume most images are inline, in that they are held inside of block boxes and appear inline with text. I assume this means that the default for images is inline, changeable with display: block, of course.
It turns out I wasn't 100% correct in my last post. For one thing, CSS2.1 specs don't explicitly say that inline boxes can't contain block boxes. What it does say is that when it happens, the block box splits the inline box in half.
I played around with this in the validator, using an HTML 4.01 STRICT doctype, with one line where a <p> contained a <span> and one where a <span> contained a <p>. Obviously, the first one passed fine.
The second came back with two errors...one was that a <p> element is not allowed inside a <span>. I think it might actually be HTML specs that don't allow this, not CSS. The other was that the <span> tag was not allowed in it's context either...in other words, that a <span> tag is not allowed to be outside of a block box..or to put it another way, inline elements must be contained by block level elements.
That said, and getting back to your question about <img> and <span>, you're talking about two inline elements. If you've got an image in a span, but the span itself is not inside a block box, that's probably the validator's problem.
Any help? Reading W3 specs sometimes feels like watching the movie "My Big Fat Greek Wedding" then trying to read Homer in the original Greek...
Okay. You "validated" my (admittedly suspect, because I'm such a css newbie) experience. I just went back and tried to validate my original stuff and still no go. I'm told I need any one of a whole list of of block type elements first....
Oh well. Just meant I had to do it all with div tags instead....
You can link more than 1 CSS file to a page, PLUS use an inpage CSS. Define new classes and use them. Override clashes with the!important; command. I have used multiple different styles on my links, all in 1 page using this method.
Oh, just validate each CSS independently ;)
i use 3 CSS files for each page. 1 formats text, 1 formats layouts, and another formats links.