What is the purpose of an empty comment in a clearfix div? I assume this is for some sort of older browser shim; not sure why you would want to go around putting empty comments everywhere though. Seems just one or two CSS rules would be a heck of a lot easier to maintain.
If the website has two divs next to eachother using display: inline-block, the whitespace between those divs will add annoying space in the layout. To combat this, developers use html comments that start right after the closing tag of the left div, and end right before the opening tag of the right div, with no space between the tags.
CSS can (or could at the time) only format elements and pseudo-elements. An element after the float is needed for clearing the float, i.e. for returning to the normal document flow.
The clear declaration is in the "one or two CSS rules", particularly those whose selector contains (or is) .clearfloat. That fixes the height of the box of the float having an otherwise last child element that is not a float. I should look like so:
.clearfloat {
clear: both;
}
More elaborate and hackish workarounds are known, for example:
.clearfloat {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
overflow: hidden;
}
But in some layout engines (particularly MSHTML < 8) the clearing element must have content. Yet we do not want that dummy element to be visible. Hence the (empty) comment.
This is actually pretty common. I wondered about this as well when I was younger. As far as I know, this is to signal to other programmers that the contents of the div were left intentionally empty, and this serves as a completely "blank" content in the div.
In other cases, it may be used to remove whitespace.
Related
I have a div that I would like to keep inline-block but I want to keep any other elements from appearing on the same line as it.
I know that display:block will clear all the elements after it.
I know that adding a BR tag will clear all the elements after it.
But I would rather use a style such as clear:both except that only works for floating elements.
Is there a CSS style that I can use to clear all the elements after it while continuing to use inline-block?
I've seen another similar question here but no one actually answered the question. I'm 100% not interested in alternatives such as using floats. There was one answer using CSS using content after but it does not work (link).
#Container:after {
content:"\a ";
white-space:pre;
}
Here is a link to an example on JSFiddle. I want to add a break after BorderContainer20016.
Let me repeat. I'm 100% not interested in alternatives such as using floats.
I have a div that contains several inline-block children:
The DOM looks like this:
It has the following CSS:
Each child has the following css:
If one unchecks and rechecks the display: block line marked above in the Chrome debugger, the div now looks like this:
Note that there is now space between the labels, and they are more readable. However, the CSS used to render this is presumably identical. Moreover, the div is actually still display: block when the specific selector's display: block is unchecked; it just obtains this from a less specific selector (in my case, the UA stylesheet for div).
I want the div to render the second way - is there a way to make this happen? How is the div supposed to be rendered, and where does the spacing between the display: inline-block elements come from?
UPDATE: This is probably caused by a weird interaction between Chrome's renderer and Meteor's Blaze rendering engine, and won't be seen except on highly dynamic pages.
This is a result of whitespace being evaluated. You can throw:
font-size: 0;
on the parent div and this will go away. Alternatively, adjust your markup to remove space between the list items.
I want to:
Display a series of links, each on a new line
Maintain the links' variable width and text-wrapping ability
Constrain the mouse-hover area of each link to its actual content
Keep the links inside of the content flow
The best solution I can think of is
<div>
Text
</div>
<div>
Text
</div>
, but I don't like adding the non-semantic <div>. I tried using a { float: left; clear: both } , but that took the links out of the content flow. To my knowledge, I can't use a pseudo-selector such as :outer-wrapper. Is there a better solution, or are <div> wrappers the best solution?
*I thought of using <ul><li><a>, but I only have one or two links per page, and it doesn't seem resonable to add <ul><li> in place of <div> just to avoid a <div>
This is largely an opinion-based and philosophy issue, a source of endless and useless debates over “semantic markup”, itself a semantically vague concept. But to turn the question to something more constructive, I would ask what it really matters which markup you use. What does it imply in non-CSS rendering, or when assistive software is used?
From this viewpoint, ul is OK if the default rendering, with bullets, is acceptable. Otherwise, use div, or use br between links. Do not try to use just a with styling, since then the links would by default run together, appearing as inline text with no separator.
Options could be:
(to wrap them on their content)
display:table, to stack them.
display:inline-block or,
float:left to have them on a line.
For the markup, you can wrap <a> into a <nav> tag. and add a role attribut to distinguished it from or for main-navigation.
http://www.w3.org/TR/wai-aria/roles#landmark_roles
Notes: If nav unneccessary any other tag could be used , such as footer or paragraph.
More here : http://www.w3.org/html/wg/drafts/html/master/sections.html#the-nav-element
Thx all
It seems like what you want to put on a page, semantically, is a list of links. So use just that.
ul > li > a { /*whatever you want*/ }
You might consider wrapping the list in a nav, or you could forget the ul altogether and have just
nav > a { display: block; }
Also, don't think all divss are non-semantic. Yes, they don't have a specific meaning, but the spec says they represent their contents. A really great use for a div would be for grouping elements together that have the same theme or function. In your case, I wouldn't have a div that contains just one a, because you'd be right about the div serving as bloat.
I'm digging through some older code on a site that I'm working with, which uses iconize. The way that it seems to work is by adding a class like this...
a[href=$='.pdf']{
padding: 5px 20px 5px 0;
background: transparent url('icon.gif') no-repeat center right;
}
Is there any benefit to doing it that way than the way that I'd have done it? Something like this...
a[href=$='.pdf']:after{
content: url('icon.gif');
vertical-align: sub;
}
Here's a fiddle to demonstrate both of them...
JSFiddle
My question is... What are the benefits, if any, of using pseudo-elements vs. standard padding and background positioning for appending/prepending images to elements?
Just a few initial and later thoughts. I may still think of some more to add.
Padding/Background
Advantage(s):
Works for IE6-7 (i.e. older browsers).
If one wanted to overlap the icon with the text, especially if centered, this would be easier to implement.
Disadvantage(s):
More thought needed to implement (must calculate some factors).
For older browsers, only one background was supported, so if another background was needed, then there was a conflict to be resolved.
If browser is set to not print background images, then a "gap" for the padding will still exist in the printed text, but no image will be there. This could be resolved through print media css.
Pseudo-Elements
Advantage(s):
Easier to implement (no calculations needed).
It can have its own padding, border, opacity, etc. applied if desired, just as if it were a real element.
Related to #2, it can actually be moved outside the element if needed or desired.
Semantically, it is being implemented in a more appropriate manner. The icon is not really a "background," but neither is it an essential part of the html that a content img might be, so the pseudo-element fits the bill for enhancing the presentation, but not causing issues if it is missing (in older browsers).
In CSS3 browsers (and possibly CSS2), usually less code can be used to switch between right or left aligned icons (see "Discussion about code length" below).
Disadvantage(s):
Only one (of each type) allowed per element, so if it is needed for something else on an element, then you can have conflict.
Not supported in older browsers.
Some elements (replaced elements) cannot take pseudo-elements, so this would not even be an option.
Discussion about code length
EHLOVader noted in a comment to the question that part of his concern was extra coding that might be needed for pseudo-elements as opposed to background/padding if one wanted to switch to a left side icon. He gave this codepen example. However, it can be made to be less code to do a pseudo-element. Assuming .iconleft is a class used to put the icon left rather than right, and .iconit the class that sets an icon at all, then the following code concisely makes it happen for CSS3 browsers using the :not() selector (here is the fiddle, using the original .pseudo class of the OP for iconing):
.iconit:not(.iconleft):after,
.iconit.iconleft:before {
content: url('http://www.jasonapollovoss.com/web/wp-content/uploads/2010/09/pdf_icon_small.png');
vertical-align: sub;
}
The same could be done with CSS2 browsers if an iconright class is used to explicitly set an icon to the right, or iconleft to the left (no iconit class needed then):
.iconright:after,
.iconleft:before {
content: url('http://www.jasonapollovoss.com/web/wp-content/uploads/2010/09/pdf_icon_small.png');
vertical-align: sub;
}
What makes pseudo-classes so useful is that they allow you to style content dynamically. In the example above, we are able to describe how links are styled when the user interacts with them. As we’ll see, the new pseudo-classes allow us to dynamically style content based on its position in the document or its state
Read more http://coding.smashingmagazine.com/2011/03/30/how-to-use-css3-pseudo-classes/
<h5>Category</h5><h6>auto</h6>
places Category and auto on separate lines, like this:
Category
auto
How can I place them both on the same line, like this?
Category auto
h(n) elements are 'block' elements, which means they will grow to take all available horizontal space. This also means they will push anything "right" of them down to the next line.
One easy way to accomplish this is to set their display to inline:
<style>
h5, h6 {display:inline;}
</style>
Note that inline-block is not supported in all browsers.
You can also float block elements, but that can become a sticky issue as floating can be fairly complex. Stick with inline for cases like this.
<h5 style="display:inline-block;">Category</h5>
<h6 style="display:inline-block;">auto</h6>
You must change the display mode of the elements. H tags are rendered as BLOCK elements by default. To override this behavior add the following style definitions to your website or CSS
h5,h6 { display: inline; }
You can also decide to let them "float" next to each other you can do that via:
h5,h6 { float: left; }
Please note that floating only works on block elements (so using both styles will perform no float because inline elements cannot float).