Is it mandatory to use position property while styling webpages? - html

While applying css I am getting the desired result without the use of the position property i.e:-
position:relative; or
position:absolute; etc...
But, I am a bit worried - is this the right way?
I mean, is applying position property for styling with css considered a good practice?
Thanks

Whether it is best to style the position property depends on your specific situation. If you have need to take elements out of the flow of the page, then you may want to use it.
But no, the position property is definitely not mandatory.
If you have styled your page without using position - and your satisfied that it is fully functional, there's nothing wrong with that.
Read about positioning to properly understand when to and why we change it from the default.

No. For the vast majority of things, position: static (the default) is fine.
Other positioning schemes should be used with a light touch. You can achieve some very powerful effects with them, but for most purposes such things are not needed, and used improperly they can create very fragile layouts.

Going by the CSS tutorial here:
http://www.w3schools.com/css/css_positioning.asp
They are good if you wish to affect the positioning of the image, for example if you need to move it slightly or position it next to another image.
more reading can be found here with examples:
http://quirksmode.org/css/css2/position.html
Personally I always position them, but I do not think it matters

Every element is static positioned by default
You cannot use z-index:property without the position property
You will not get the desired effect for z-index,if you are not specifying any of the position properties(relative,absolute,fixed)
left/right/top/bottom/z-index have no effect on a static positioned element.
NOTE:Just spend a few minutes here too position

Related

User agent stylesheet is overriding my css even though it acknowledges it shouldn't?

I've scoured the internet (and Stack Overflow) searching for a solution to this simple problem, but to no avail.
The user agent stylesheet is telling me that it's being overridden by my styles, but is still applying it's own. Take a look:
Original code snippet:
Here, it shows clearly that the original display:block; is being overridden, as it should be.
,
Yet here, under the computed tab, it is still applying display:block. The container is set to display:table.
I isolated the effected elements in scratch html/css files, and there is no problems with overriding the user agent stylesheet there, as can be seen here:
.
What on earth could be causing this? Thanks in advance.
Also, !important doesn't work.
Edit: All of the screenshots decided to embed themselves overnight so it looked like a total mess, which is fun. Rather than delete this question out of embarrassment, I just cleaned that up real fast, although it's still pretty convoluted-looking but whatever.
Looking at your screenshot of the element's computed styles, I notice that its float is set to left. Floating an element tends to blockify it, and in the case of a table-row, that does indeed turn it into a block and ultimately detach it from its table container, as a table-row cannot normally be floated. This is not a case of the UA stylesheet overriding your styles, but how the display and float properties interact.
In order for a table layout to work you cannot float any of its internal table elements, including row groups, rows, and cells. (You can float the table itself.) As I am not familiar with your layout I won't be able to suggest a proper and complete answer to your question, but the key here is to remove the float declaration from that element. Since this declaration doesn't appear in your own styles it must be elsewhere — look for it among the rest of the element's styles. If necessary, override it using float: none.
(There may of course be other factors causing this blockification that as others have mentioned require a proper reproduction of your problem to diagnose, but this is what I could glean from just the screenshots you've provided and is a very common and likely cause.)

Benefits/Drawbacks of using pseudo elements (:after, :before) vs. padding/background positioning?

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/

What are the downsides to using "clear:both" to clear floating divs?

It seems that the community here agrees that the old "clearfix" hack has now been depreciated and superseded by overflow:hidden. Unfortunately there are situations where even using this method causes problems. (For example: This would look like this if it worked correctly.)
The main problem with using the old fashioned <div class="clear"> seems to be that it creates a div element for sole purpose of altering the presentation -- which seems to be muddying the ideal of pure semantic markup with presentation.
Other than that, though, it appears to work well with all browsers and in all situations (which cannot be said for "clearfix" or overflow:hidden).
Are there any other drawbacks to using clear:both? Is it really that bad to use? Or is it just personal preference?
It's fine. Not as nice as a pure CSS method, no, but there are times when overflow:hidden / auto just won't work well (for example, when you want an absolutely positioned element to 'pop' out of its container).
Yes, it adds a maintainability cost, and yes, it's theoretically suboptimal for SEO, but it's hardly a cardinal sin.
There are side effects
clear: both has a side effect that if there are any other floats present in the same block formatting context, the clear: both element will be forced below them. Sometimes this is what you want. Sometimes it isn't. This jsbin demonstrates a case where it will eat your lunch:
The trick is in controlling which floats a cleared element should interact with. You do this with block formatting contexts, an insulated rectangle inside of which all floats and cleared elements interact. Floats and cleared elements outside of a block formatting context cannot interact with floats or cleared elements inside.
This is one important drawback to keep in mind when using clear: both. Is it really that bad to use? No. You just have to be aware of how floats and clears interact and how to prevent them from doing so when you need to. In many situations these issues don't come up, so choosing a method for clearing floats can be a matter of personal preference. But some situations demand a deeper consideration of how floating and clearing works. Every clearing method has side effects, so you have to pick the right one for your situation. There are detailed answers at Which method of 'clearfix' is best?
clear:both simply means that there are no floats allowed to the left or right. An alternate method does exist, but it isn't safe for older browsers.
.element:after { content:""; clear:both; }
I'm pretty sure clear: is standard, floats are just tricky if you do not fully understand them (it took me a while).
The reason the white space exists is that floated elements do not actually 'exist', in the sense that they give no definitive dimensions for the container to wrap around. You can use clear:left clear:right or clear:both on an item after the float and it will create a hard line, the same as using the <div class="clear"></div> method.
Personally, I use the tried-and-true hack and add pseudo elements for when it's (hopefully) supported all around.

How to apply skinning on PrimeFaces Component(ToolTip)

I am using Prime Faces tool tip. I want to know can i change the look and feel of the prime Faces tooltip by applying css or skinning. Like make bigger box and change the color and font of the Tooltip etc.
I am using Prime Faces 2.2
Thanks
You can change the style by adding CSS to style or styleClass attributes.
Also, I strongly recommend to upgrade to 3.0.M4 or 3.0.RC1-Snapshot!
EDIT:
I've found this piece, regarding tooltips styling: http://code.google.com/p/primefaces/source/browse/examples/trunk/prime-showcase/src/main/webapp/ui/tooltipStyling.xhtml?r=1434
As you can see there, you can apply some styling by using some css classes.
Also this is the migration guide for 3.0.M4(RC1): http://wiki.primefaces.org/display/General/Migration+Guide+to+3.0
I know this is old, but you can also go the way of overriding certain CSS properties by using style definitions with higher precedence in your general CSS file. I described this in more detail here. Colors, borders and paddings are no problem, however, the position is rather tricky as PrimeFaces places the tooltips as divs outside the normal structure and the apparently uses some computed absolute positioning to place them.

Placing HTML Pseudo elements

My css looks like this;
p:not(.dummy):after
{
content: url(../../irhiddenchars/img/afterimage_9x9.gif);
}
I wish to take a taller (height) gif, but my lineheigth is increased when the css gets applied (even though there seems to be enough space for a bigger picture, line-height for a p-tag is 18px). Is it possible to place the pseudo element containing the gif somehow a little bit higher on the page?
Is there any other solution?
Try setting the margin and padding to 0. The p elements (among others) have a implicit standard mark-up determined by the browser.
I'm still wondering however why you use the :after pseudo-class instead of nesting an img. Any specific reason for that?
Edit: Wow, this question is 2 months old, why did it appear on the recent questions page?
I solved it dropping the image after approach (i had an image showing a Pilcrow symbol). Instead i use the Pilcrow character (which gets rendered according to the fontsize choosen):
body.hiddenchars p:after
{
content: '\00b6';
}
use jQuery, not only to insert the content but you can then give it a class and style it to position exactly where you want it.