I'm trying to put some arrows onto table headers. I did this using the :after CSS pseudoelement.
The issue I'm facing is, this works correctly in all browsers EXCEPT Safari for Windows, where the background image just doesn't appear.
Why does this happen? Is there a way to resolve the issue?
HTML
<div class="test">ABC</div>
CSS
.test:after
{
content:" ";
background:url(http://www.designwalker.com/img/arrow/arrow06.jpg);
padding-left:20px;
background-size:10px 10px;
}
Note: this is just an example, not what it really will look like.
I think you need to specify display: inline-block (or block) and also a height.
.test:after {
content:" ";
background:url(http://www.designwalker.com/img/arrow/arrow06.jpg);
padding-left:20px;
background-size:10px 10px;
height: 30px;
display: inline-block;
}
http://jsbin.com/OrIdozUc/2/edit
Related
I have inserted an icon with an image inside.
In chrome I see the icon
But in IE icon disappear.
Here's my CSS
<div class="infoIcon"></div>
.infoIcon {
content: url('/assets/img/info-sign.png');
background-color: #919191;
width:15px;
border-radius: 8px;
margin-left:10px;
display: inline;
vertical-align: sub
}
you can achieve this using HTML entity.
.infoIcon {
font-size: 40px;
}
<div class="infoIcon">ⓘ</div>
In css "content" applies to ::before & ::after pseudo selectors.
As to why it Chrome is showing the image, Chrome tends to be flexible with css syntax most of the times. IE and FireFox are not showing the image because it is not the right syntax.
Edit:
Example
If you want to keep 'content' You'll have to move your content to
.:before
.icon:before{
content: url('src');
}
However you'll need to scale your image to the right size. (Icon libraries use fonts where they can change the font-size easily)
Second option is continue as you are now but switch to background-image
.info{
background-image:url('icon.svg.png');
background-size: 100% 100%;
width:40px;
height: 40px;
}
I used to create space between DIVs, using this css code:
.area:before {
content: "";
display: block;
height: 110px;
}
This works on all browsers works except on Safari on Mac.
I tried to change the values of the display or overflow but it does not work.
Can anyone advise me?
you could simply use margin-top on the main element itself:
.area {
margin-top: 110px;
}
I am trying to float an li's :after, which includes a background element.
It works in every browser on Mac, and every browser on Win, EXCEPT IE.
I tried changing around parameters like the display and floating, which does not work.
CSS:
ul.nav li a:after {
background: url(images/nav_icon.png) no-repeat;
width: 8px;
height: 5px;
font-weight: 400;
content: "";
display: block;
float: right;
margin: 8px 0 0 6px;
}
Heres what it looks like right:
Heres what IE does:
I am thankful for any help. Only thing i found googling was clearfix tricks for IE7, nothing regarding how that stupid browser interpretes selectors.
Solved using conditional comments which contain display: inline-block and removing the floating for the :after.
I am implementing a design which contains elements which are semantically headers (h3, h4, etc.), are full-width block elements, and are followed by a vertically centered horizontal line which extends the full width of the header a la:
I know I could take care of this by wrapping each header in a <div> and inserting another block-level element after it but would prefer not to pollute my HTML like that. My first inclination was to use a ::after element on the headers, like so:
.line-header::after {
content:'\00a0';
display: inline-block;
float: right;
width: 55%;
margin-top: -12px;
border-bottom: 1px solid gray;
}
However, this requires making the ::after element fixed-width, which obviously doesn't work with different-width headers: http://jsfiddle.net/nbSTf/
Any ideas on how to get a variable-width line which will fill the space to the right of the header, without inserting extra elements into the HTML?
EDIT: Tyriar's answer below (suggesting drawing the line full-width behind the header and setting the background-color to erase the line behind the text) reminded me that this is taking place in front of a repeating background image - so no background tricks are possible unfortunately.
Here's a method you could do it with, unfortunately it relies on an attribute (not necessarily title), this could easily be set programmatically with JavaScript though.
It uses :before and :after pseudo elements, :after is used to draw the line the full width and :before is used to draw white background behind the text of the size of the text. The pseudo-elements need their z-index set correctly to layer in the correct order.
jsFiddle
HTML
<h3 class="line-header" title="Longer Header Looks Good">Longer Header Looks Good</h3>
<h3 class="line-header" title="Short Doesn't">Short Doesn't</h3>
CSS
.line-header {
margin-top: 15px;
position:relative;
}
.line-header:before {
position: absolute;
display:block;
top:0;
left:0;
bottom:0;
content: attr(title);
background-color:#FFF;
color:#FFF;
z-index:-1;
padding-right:.5em;
}
.line-header::after {
position:absolute;
content:'';
display: block;
left:0;
right:0;
top:50%;
background-color:#555;
height:1px;
z-index:-2;
}
Try this for your CSS:
EDIT:
body { background: red; overflow-x: hidden }
.line-header {
margin-top: 15px;
margin-right: 5px;
display: inline;
z-index: 100;
float: left;
clear: left;
}
.line-header::after {
position:absolute;
content:'\00a0';
width: 100%;
margin-top: -12px;
margin-left: 5px;
border-bottom: 1px solid gray;
z-index: 0;
}
I only tested this in Chrome. Here's the Fiddle.
Well, how about doing it in reverse? Draw the lines (in any way you like) then use :after to insert the headers, no additional HTML, but some extra CSS.
HTML
<div id="header1"></div>
<div id="header2"></div>
To Draw the Line, simply border-top-style:solid;.
To Write the headers, :after.
CSS
div
{
position:relative;
border-top-style:solid;
margin-top:20px; /* just for spacing */
}
div:after
{
display:block;
background-color: #FFFFFF;
position:absolute;
top:-10px;
left:0px;
}
#header1:after
{
content:"Hello;"
}
#header2:after
{
content:"Hello Again";
}
You'll get something like this.
For more customization, you can enlarge the font, change the colors, add padding (for more white space), just change top the way it suits you.
I have an object like this:
<div class="myObject">My Object</div>
I want to display a image in front of that <div>'s box, I thought code like this will work:
.myObject {
background-image: url(foo.png);
background-position: 0px -20px;
}
But, unfortunately, this does not work.
How can I accomplish this goal using CSS?
PS: What I want is just to display that image outside that tag's box, don't tell me to do like this:
.myObject {
padding-left: 10px;
background-image: url(foo.png);
background-position: 0px 0px;
}
Thank you.
You can't position a background image on an element outside the box.
To place an image to the left of an element, using pure CSS, the :before pseudo-element can be used:
Demo: http://jsfiddle.net/2HEpn/
.myObject:before {
content: " ";
background-image: url("/favicon.ico"); /* a 16x16 image, for example */
width: 16px;
height: 16px;
display: inline-block; /* pseudo-elements are inline by default */
}
you might need to place it relativly inside the object as i understand from u to the div
#img{
position:absolute;
top:0px;
left:-30px;
}
.myobject{
position:relative;
width:30px;
}