I need a way to make an entire DL element clickable with only one anchor tag, that validates as XHTML. As in:
<a>
<dl>
<dt>Data term</dt>
<dd>Data definition</dd>
</dl>
</a>
This currently doesn't validate as XHTML as the anchor tag cannot contain the DL. The only way I can get it to validate is if I make two anchor tags and place them inside DT and DD. As in:
<dl>
<dt><a>Data term</a></dt>
<dd><a>Data definition</a></dt>
</dl>
I'm trying to avoid this, as it would result in two href attributes requiring maintenance, introducing the possibility they could become out of sync.
Suggestions?
You cannot do this and still validate. You will have to make a choice:
Use non-valid markup
Use inner anchors
Use JavaScript
I recommend #2 as it is valid and will work for clients without JS.
Two years passed but someone may stumble upon this.
New list of solutions:
Use non-valid markup
Use inner anchors
Use JavaScript
Use HTML5 doctype instead, it validates nested elements into <a> tags
Related
Given the following html
Full html can be found here: http://pastebin.com/B3JASXwx
and using the Dom Crawler code
$pd->filter('.content > ul > li')->each(function(Crawler $node, $i){})
when looping over the results, it's stopping at the first <script> tag nested under the <ul> element, and instead only returning 9 elements, instead of all 14 <li> elements.
Is this a bug, or by design, and is there any for me to get all <li> items without resorting to a preg_match?
I've implemented stripping out all .* tags before feeding the HTML to the Symfony DOM parser, that seems to have cured the issue I was having.
Given the tags themselves contained DOM modifying code, I'm guessing that the Symfony parser was incorrectly reading the DOM tags inside the tags as valid tags, and not javascript modifications.
TL;DR - before passing your raw html into Symfony, make sure you strip out all tags
Due to mod rights on a site, I can only add css (no js etc...). When users input text in a comment box, it saves it and then displays it as a <p>. is there any way through css i can search for a specific word in the <p> tag and remove/censor it?
Thanks
There is no practical solution for that ( You may be able to select elements based on the value and hide them in CSS3 but it wouldn't be cross-browser friendly, if at all possible ). I'm afraid you'll have to use JS/server-side for a real solution.
On the hacky side of things and for IE only, you may be able to use an expression and display:none elements which contain certain strings in their nodeValue, it wouldn't work for modern browsers.
If parent element in this case input field has class or id you can hide elements inside like this
textarea#mytextarea p
display:none;
}
Once upon a time, there was a pseudo-class :contains() in the wonderful spec of CSS3 selectors ... but it disappeared early and afaik well before any implementation.
A JS solution has one problem: search bots and any user without JS (or displaying the source code) will see the f***ing original text :)
Sometimes, I found too many people like to insert a <span> tag in a <button> tag. Sometimes, they place two <span> tags. I want to know, why do they do this?
CSS is supposed to allow separation between content and style. Unluckily, when you need a complex design you often need to alter your HTML markup so you can apply the necessary CSS rules.
I've seen this with <div>. That's done for styling (double borders), but it's also done to handle IE bugs (box-border model bug).
Is there an app out there that will take a .css file and output a demo page of it?
Like take all the span/div/a elements and display what they would look like in an html page?
... without an associated (X)HTML file?
If what you need to do involves CSS with no knowledge of its associated (X)HTML document's structure or classes or ids... then isn't it simple enough to just write up a small page and preview it in a browser?
Not to offend, but personally I think previewing CSS without an (X)HTML document is a little strange. A few reasons:
If you start with CSS you may try to make your HTML cater to your CSS when it should be the other way around.
Starting with the CSS and then writing your page feels like a good way to end up with messy HTML, and if I have to choose between (messy HTML and clean CSS) or (clean HTML and messy CSS) I personally would choose the clean HTML every time.
You also mention targeting <div> and <span>. This is a personal opinion, but I feel pretty strongly that people shouldn't target <div> and <span> without class or id attributes. Since <div> and <span> don't have semantic meaning, I just can't imagine why you'd need to style them unless you were either CSS resetting or fullfilling a requirement, and is your customer more likely to ask for "all employee names should be underlined" or "spans should be underlined"?
... but once you're targeting class and id, you need your HTML document to go with your CSS.
While this will not autogenerate anything from your css, this is an excellent XHTML test page that includes all of the standard tags, page, and form elements you are likely to have used. Apply your style sheet to this page and you will be 80% of the way there. Then just add areas for your custom classes, etc. http://snipplr.com/view/8121/html-test-page-for-css-style-guide
TopStyle does that with an internal view. It is an excellent tool.
http://www.topstyle4.com/
Try rendur: http://rendur.com/
I agree with Richard that you shouldn't expect much if you're styling raw div and span elements. :)
I know others have asked about using class and id in CSS files, such as
Div: Class vs Id
So I'm aware of the semantic and syntactic differences between class and id: that id should be used for elements that are used only once and class should be used for elements that share attributes in common.
But this isn't a hard-and-fast rule, is it? What's the harm in using an id for more than one element? Or using a class for only one? After all, isn't "one element" just a set (class) with only one thing in it?
Will the browser's CSS interpreter throw an error if I break the rules? I haven't seen it happen.
So why do we have both id and class? Why not just one one or the other and call it good?
duplicate IDs are not allowed; though your browser may or may not care, the notion makes no sense - how can it be an ID if there are duplicates? ;-)
CSS won't complain if you do it but Javascript sure will if you want to grab one element by its id.
The real answer is that there is a semantic difference between an identifier for one and only one object and an identifier that can apply to multiple objects. While you can break the rules it is best not to.
There is also one other distinction between the two, an (X)HTML element allows more than one class to be applied like this:
<div class="foo bar"></div>
You can't do that with ids.
In answer to the question 'why do we use both classes and ids for CSS, when you're allowed to have a single instance of a class?', look at it this way.
We don't need IDs for CSS. We could just use single instances of classes.
But we need IDs for JavaScript. So, why not use them in CSS too?
Imagine a world in which IDs were there, but only used for JavaScript.
You'd have to code like this:
<div id="wrapper" class="wrapper">
<div id="nav" class="nav">
</div>
</div>
and so on.
CSS is not the problem (you just define styles in there), but the document validity.
An id is meant to uniquely identify an element (for whatever purposes you will be using it) so when you have two elements with the same ID no good things will come.
Remember, the "id" attribute is not meant specifically for CSS styling (not as a class, at least), but for other things - specially JavaScript!
I for one wouldn't use "document.getElementById()" if i didn't know what i was going to get in return...
If you have only one element in a given class you're not doing any harm. The difference is only semantic in this case, as all you are doing is simulating an id. However, if you have more than one element with the same id, you'll have problems with page validation, CSS positioning, and Javascript references to that id. It's best to use id and class attributes as they were intended, for the greatest flexibility in styling your page. Remember, you can have an element with a unique id and have it belong to one or more classes at the same time.
IDs are usefull for elements you know will be unique to each page.
For instance:
a menu (#menu)
the central column where you'll put your main content (#content)
the right column where you put external links (#external-links)
You will probably need very specific rules for these elements (precise, non-relative width & position).
Now each of these elements will contain several instances of a certain type of object:
menu will contain .menu-items
central will contain .articles
external-links will contain .external-link
This subelements are not unique but their layout properties are... thus the use of classes.
And each of these subelements probably have subclasses (like .featured-article) or even some may have an ID (#current-menu-item).
Of course, you can always use classes inplace of IDs but I think using IDs makes it clear about which elements are unique and which are not. Beside, I prefer to have less space-separated names in my class attributes for them to be reasonably readable.
There are many things to say about it. You already know about the semantic meaning of id an class, so I just talk about one case - excluding javascript - when to use an id makes difference: you can refer to elements with an id to navigate inside the page with anchors or from external links: you can link a specific element of an html document with <a href="http://www.site.com/home.html#news> if you want to go directly to the element with id="news". Obviously, you can't to it with classes, because classes are not unique. So, for this and other reasons, is important to have an attribute that identifies an element inside a document.