I'd like to change this:
<a href='foo'>
<div> Moo </div>
</a>
to be standards compliant (you're not supposed to have block elements in inline elements). Wiring javascript to the divs just for navigation seems like a hack and degrades accessibility.. In this case, my requirements are for 2 sets of borders on my fixed-dimension links, so the above non-compliant code works perfectly after applying styles.
Also, is "a { display:block; }" a legal way to circumvent the validation?
Why not use a <span> rather than a <div> and set display:block on both elements?
Additionally, to answer your latter question: I don't believe adding display:block; to your anchor will make it pass validation. The validator checks to see if you're following (X)HTML rules, not how to present the page to the user.
You may want to consider putting the div outside the a if it is only for display purposes, unless it's important that the outer border be clickable. Either this:
<div class="dbl_border_links">Blah text</div>
or this:
<a class="dbl_border_links" href="blah"><span>Blah text</span></a>
will work and you can use something like this:
<style>
.dbl_border_links, .dbl_border_links>* {
display: block;
border: 1px solid;
padding: 1px;
}
.dbl_border_links {
border-color: red;
}
.dbl_border_links > * {
border-color: blue;
}
</style>
to specify the styles. Personally I'd go with the div containing the a but either approach works.
I normally consider the <a > tag to be a special case for this purpose. You ought to be able to apply that to just about anything- it is after kind of the whole point of hypertext (<tr > comes to mind a good example). But if you have to pass a validator somewhere I understand.
Could you use a javascript onclick handler for the div, and eliminate the anchor entirely?
Firstly, there is certainly nothing wrong with giving an anchor display:block; I'd say it's one of the more common things people do with CSS and is perfectly standards compliant. Secondly, there are a number of ways to achieve a double border on an HTML element. For one thing, check out the "outline" property:
http://webdesign.about.com/od/advancedcss/a/outline_style.htm
Admittedly, this will only work in the more modern browsers but should degrade gracefully as the outline doesn't take up any space in the page. If the contents of the link is to be an image you can simply give the <a> a little padding and a background colour as well as a normal border (in another colour) to create the impression of a double border. Or give the image a border of its own. Of course you can also do something along the lines of your original idea, though nesting your HTML the other way around, and simply assigning a different border to each element. Or you can use an inline element inside the link (like a <span> or an <em> or something) which you also set to display:block; (yes, this is also valid!). Happy coding!
If I understand correctly your intentions, you should place, as already mentioned, the div outside the anchor, and, to get the same presentation, make the anchor width:100%;height:100%. Cross Browser milage may vary.
Also, you could dump the div altogether and give the anchor display:block;
What are you exactly trying to do?
Related
I learned that nesting anchor tags is not standards compliant HTML.
From W3:
Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.
Since the DTD defines the LINK element to be empty, LINK elements may not be nested either.
It would seem like alternatives such as those suggested in the selected answer in this question would have more of a chance of creating unexpected behavior than simply nesting the anchors would!
It also seems like overkill to make onclick event handlers just to redirect the page in JS. Not to mention using a script solution would cause problems for users browsing with scripts disabled.
EDIT
What is interesting was that I was working on a fiddle to demonstrate and I had overlooked that chrome was actually restructuring the DOM as such:
<div id="container">
<div class="parent">
Parent Element
<a href="http://google.com">
<div class="child">Child Element</div>
</a>
<a href="http://bing.com">
<div class="child">Other Child</div>
</a>
</div>
</div>
I overlooked this because I saw the hover working and had my mouse on the text. Knowing this now doesn't necessarily change my question, but it sure does illustrate that it doesn't even work the way I thought.
Keep in mind that an anchor isn't just a link, it's also something to which one can link. (Though the former use is far more common than the latter.) Quoting W3C (old, but relevant):
An anchor is a piece of text which marks the beginning and/or the end of a hypertext link.
To that end, don't think of an anchor as a link. Think of it as a point in the document which connects to (and/or from) another point (in the same document or another document, it makes no difference). Two points in some non-physical space which are connected by a non-physical thread.
Given that, anchors shouldn't contain a lot of content. If it contains a lot of content, it ceases to become a "point" and starts to become an "area." For example, imagine an anchor which when rendered takes up more space than the browser can display at once. If something links to that anchor, where should it go? The beginning? Middle? End? (Intuitively you might think the beginning, but you get the idea.)
Furthermore, anchors definitely shouldn't contain other anchors. The non-physical connections between the non-physical points can become ambiguous. Does the child anchor connect to the other point, or does the parent anchor connect to the other point? This probably doesn't result in being a big deal in most cases, since the vast majority of anchors today are one-way links from the anchor to another document. But the purpose of the anchor is more than just a one-way link to another document, so the definition continues to embody that purpose.
The spec for <a> has a content model of:
Transparent, but there must be no interactive content descendant.
So the spec is actually more complicated than you say. This also applies to <button> -- essentially you can't have working links inside of links or buttons inside of buttons.
Unfortunately I don't have a strong answer to your question why -- I can only speculate. One clear reason is the ambiguity that it causes (e.g. which anchor should be followed when the inner one is clicked?)
This creates not only functional ambiguity, but also semantic ambiguity. The content of the <a> is a label for its hyperlink. So does this mean that the inner hyperlink is part of the label for the content of the outer link?
While the other good people of the community gave excellent answer, I would like to contribute by giving an example of how to mimic nested anchor tags without actually nesting them in the markup, by making them appear visually as if one is inside another's area:
.parent{
position: relative;
width: 300px;
height: 150px;
border: 1px solid salmon;
}
.parent .main-link{
display: block;
margin-bottom: 2em;
}
/*
expands the clickable area of the main link
to fill the parent container, because it's the nearest
ancestor with "position:relative"
*/
.parent .main-link::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parent a:hover{
color: green;
}
/* bring other links "forward" to make them clickable */
.parent .secondary-link{
position: relative;
z-index: 1;
}
<div class='parent'>
<a href='#111' class='main-link'>main link, full area</a>
<a href='#222'class='secondary-link'>secondary link</a>
</div>
Anchor nesting is not recommended by standards (although all browsers I tested it on seem to lead to the innermost click target) because of ambiguity.
It is not logic to say that a big part should lead to a certain page and in this part a small section should lead somewhere else. I still have to see any use case for this kind of behaviour. With the evolution of available scripting languages, this kind of iteration or heritage can work (javascript click events on divs for exemple), but never will a code want to direct to a certain URL and then to another (parent anchors' href).
Edit: Looking at the question you referenced in yours, stacking 2 anchors that point to the exact same href is completely useless. Just remove the nested one and everything is gonna be good. If it is because you did a CSS rule like a a{color:red;} use a span! Or even a div with display:inline but please, pretty please, an anchor should go somewhere, should not be used just for styling purpose or something.
Okay, this is a gross oversimplification, but I have a javascript application to help people develop webpages. It has its interface superimposed over the page that is being developed, and it all works fine, apart from one thing.
If the div class used in the interface is used by the webpage that is being developed, the interface' embedded stylesheet overrides the properties of the webpage!
This happens on jsfiddle, the embedded css is takes precedence over the external css.
JSfIDDLE
external css:
.color {
color: green;
}
Index.html:
<style>
.color {
color: blue;
}
</style>
<div class="color"> Text to be coloured </div>
When run, the text is blue. If someone could make the text turn green, I think it would demonstrate how to overcome the problem.
Obviously, one way to fix this would be to change the interface classes and rules to something like this:
<style>
.color_interface {
color: blue;
}
</style>
<div class="color_interface"> Text to be coloured </div>
And make them unique, but the project has hundreds of css rules, and I'm just wondering if there's a better way, and a safer way (there's still a small chance someone has a rule "color_interface") to do nullify css rules, so they won't contaminate the page.
I'm thinking the only way to do it is probably a 'reset' stylesheet concerning my rules, setting them all back to their defaults. Is there a way to do this dynamically with jquery, maybe?
What you're witnessing is CSS by design. Specifically, specificity.
If your goal is to release some kind of library that can be used publicly and you want to avoid naming conflicts, I think a fair practice is to simply namespace your selectors, e.g., .starkers-color { color: blue; }. That won't necessarily avoid specificity issues, but it should prevent against having your selectors overridden by implementors.
If you inspect the JSFiddle page you'll see that the reason for it not working is that your inline style definition is placed in the body where it has no effect.
The CSS rules you specify is instead placed as an inline style in the head element.
To your problem:
Again, referring to JSFiddle, would it be possible to load the page in development inside an iframe? This would mean you get the separation you require.
This is because the order of the CSS when rendering. Your include is at the top of the page but your style tags are below that, meaning your style tags will alway take precedence over you include at the top. You could try adding an important to you css includes but this is majorly hacky and could create a whole load of new issues.
I need to display a company name so that the "main" part of the name appears on one line and is huge and the secondary part of the name is centered below it and smaller. Since it's not a slogan or "subtitle", I feel like it should all be in the same h1 element and, ideally, be transformed through pure CSS (meaning no spans or ems if it can be avoided.
Example:
<h1>Big Bill's Custom Auto Parts</h1>
should appear as:
Big Bill's
Custom Auto Parts
Is there a pure CSS way of doing this (even a pseudo-class not fully supported yet)?
Not possible, it seems to make more sense that you have two different headers and can be styled accordingly.
How would you possibly specify where changes happen without adding a <span> within the <h1>?
Is it permissible to include a new line in the heading itself? If so you can use the first-line selector like this:
HTML
<h1>Foo bar
baz</h1>
CSS
h1 {
font-size:1em;
white-space:pre;
}
h1:first-line {
font-size:3em;
}
The shortest solution to this without using extra headers is the use of a span element:
<h1><span>Big Bill's</span> Custom Auto Parts</h1>
CSS:
h1.span {
/* styling rules */
}
If you're fine with breaking the line with a <br/>, then you might accomplish this using the ::first-line pseudo-element.
You said you want to do it in pure CSS way, separating content and presentation. No addtional spans, no br. I understand it, but if you think about your problem, you want to create presentation rule based on content. Is that making sense? Isn't that mixing content with presentation you want to avoid?
I tried other stuff in this thread, but this finally worked.
<h3>Tutorials <span style="font-size:14px;">(2 of them)</span></h3>
So instead doing it using css:
<style type="text/css">
a:visited {
color: red;
}
</style>
Could it be done using inline code. Something like this doesn't work:
<a href="http://google.com" style='a:visited:color:red'>Google.com</a>
You can't do this, the specification (CSS2 here) covers it briefly here:
Neither pseudo-elements nor pseudo-classes appear in the document source or document tree.
:visited along with the others modifiers are all pseudo-classes, and there was never a standard syntax setup to do what you're trying. Honestly this is the first time I've ever seen it requested, so I don't think it'll be added to the specification anytime soon...sorry that answer sucks, but it is what it is :)
Just to add one motivation to achieve this inline style for the various a href states:
in some page it could appear text with link in one are where the background is different from the overall background.
The main CSS for the "a" gives them one color that is not good on that particular and singular area.
For this reason, to give the user the idea that the link is a link, you need to color that link differently from the others.
For me it worked to set some style="color: #5070BB;" inside the <a href=".." tag, but maybe that neither the a:visited nor the a:hover colors are good for that background and it would be useful to set them inline.
Yes, it is definitely a singular and lonely situation, but that is a real case.
Ciao!
Sure you can....
<a href="https://www.yahoo.com/" target="_blank"style="text-decoration: none; border-bottom: 1px solid pink;color:pink !important;">
some link
</a>
jfiddle
No, that's not how inline styles work. It is in the specification, however browsers don't seem to support it.
No. Pseduoclasses (e.g :first-child, :hover) are used as selectors based on behavior and relation to other DOM elements. Inline styles contain rules. Even if at some point browsers do support this, it'll feel weird.
As far as I know, it isn't supported ... but to add some clarification for the reason for wanting to do this, since it would definitely be the sub-optimal way to do it on a regular web page, the reason would be to use in HTML email, which, except for certain good email clients, does not support regular style sheets, so it's necessary to define all styles inline to ensure good support across email clients (Gmail and Outlook (ugh) come to mind.)
Of course, it's possible to use some other program that lets you import a stylesheet and automatically convert it to inline styles, which is much easier to manage (that's what I do), but you're still using inline styles in the end-analysis.
Is there an "invisible" tag in HTML (4) that I can use to make CSS distinctions
tag.myclass tag.mysubclass h1 { }
without having any visual impact on the HTML rendered?
My background is that I have areas in a form that belong to different groups. As I am opening those in lightboxes (long story involving DOM operations and such, not really important) I don't want to rely on the usual div class=x or span class=y to style the subsequent elements, as I would have to reset margins here, paddings there, and so on.
A layout-neutral wrapping tag would be just what I need in such situations.
No, there is not.
(And that's because such an element wouldn't really fit into the rest of HTML. The only reason DIV and SPAN affect the surrounding area is because they're block and inline elements, respectively. What would an 'invisible' element be? If you need something that's completely independent, absolutely (or relatively) position it and give it a higher z-index.)
If you want to group elements use a div or a span tag as a wrapper element. Apply your id or class to this, and style it accordingly.
EDIT
There isn't an 'invisible' tag - but margins and padding can be easily reset 'margin: 0; padding: 0;'
While all browsers give default styling to many HTML tags, at it's core HTML only describes data, it doesn't format it.
What you're probably looking for is a DIV tag, because no browser gives any default styling to that tag.
I think you want a <fieldset>.
I'd say a span tag is as neutral as they come. I don't think there's any browser that applies a margin nor a padding and it just wraps around it's contents.
I suspect you can use <object> tag without usual attributes for that purpose, but I haven't tested it thoroughly yet. It's even in HTML5 (unlike FONT tag).
The right answer is use a div tag and define a class for it. Here is an example:
<h2 style="font-size: 14px">Project 1 - Project 2
<div class="username">{% if request.user.is_authenticated%} Welcome {{request.user.username}} {% endif %}</div>
</h2>
then in your css file you can have a class like this:
.username {
color:white;
float:right;
padding-right: 100px;
}
voila!! It all belongs to h2 tag but the user name has a different css applied.
You can add display: none; to it. That won't display it (obviously).