This question already has answers here:
“text-decoration” and the “:after” pseudo-element, revisited
(11 answers)
Closed 8 years ago.
Like all right-thinking people, I hate to click on a link and discover too late that it leads to a browser-crippling PDF or Microsoft Office file. I thought I'd make life a bit easier for people by displaying a little icon next to links that lead to such files. With IE8 finally supporting the :after pseudo-element, I thought the CSS declaration would be fairly simple:
a.file_pdf:after {
content:url('/images/pdf.png');
text-decoration: none;
padding-left: 5px;
}
In IE8, this works fine. In Firefox and Chrome, though, text-decoration: none is ignored, and the underline stretches unattractively across the bottom of the icon. Is there a way to fix this without "cheating" by using an extra <span> tag?
I'm doing it in a different way, using attribute selectors, a background image and a padding (as xandy also suggested):
a[href$=".pdf"] {
padding-right: 21px; /* space for the icon */
background: url(graphics/pdf.png) no-repeat right bottom;
}
This works in IE7 too.
Here's a complete example
In IE7 the PDF icon won't be visible as it does not understand data URIs:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PDF</title>
<style type="text/css">
a:link,
a:visited {
color: #317408;
background: #eee;
}
a[href$=".pdf"] {
padding-right: 21px;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHhSURBVDjLjZPLSxtRFIfVZRdWi0oFBf+BrhRx5dKVYKG4tLhRqlgXPmIVJQiC60JCCZYqFHQh7rrQlUK7aVUUfCBRG5RkJpNkkswrM5NEf73n6gxpHujAB/fOvefjnHM5VQCqCPa1MNoZnU/Qxqhx4woE7ZZlpXO53F0+n0c52Dl8Pt/nQkmhoJOCdUWBsvQJ2u4ODMOAwvapVAqSJHGJKIrw+/2uxAmuJgFdMDUVincSxvEBTNOEpmlIp9OIxWJckMlkoOs6AoHAg6RYYNs2kp4RqOvfuIACVFVFPB4vKYn3pFjAykDSOwVta52vqW6nlEQiwTMRBKGygIh9GEDCMwZH6EgoE+qHLMuVBdbfKwjv3yE6Ogjz/PQ/CZVDPSFRRYE4/RHy1y8wry8RGWGSqyC/nM1meX9IQpQV2JKIUH8vrEgYmeAFwuPDCHa9QehtD26HBhCZnYC8ucGzKSsIL8wgsjiH1PYPxL+vQvm5B/3sBMLyIm7GhhCe90BaWykV/Gp+VR9oqPVe9vfBTsruM1HtBKVPmFIUNusBrV3B4ev6bsbyXlPdkbr/u+StHUkxruBPY+0KY8f38oWX/byvNAdluHNLeOxDB+uyQQfPCWZ3NT69BYJWkjxjnB1o9Fv/ASQ5s+ABz8i2AAAAAElFTkSuQmCC);
background-repeat: no-repeat;
background-position: right bottom;
}
a:hover {
color: #eee;
outline: none;
background-color: #317408;
text-decoration: none;
}
</style>
</head>
<body>
<p>
Here's the PDF
</p>
</body>
</html>
how about using background image?
a.file_pdf {
background: url('/images/pdf.png') no-repeat right;
padding-right: 30px;
...
}
EDIT
Test and runs perfectly on my FF 3.5, should have no issue in most browser since only using traditional image replacement technique.
Related
I have an issue with the rendering of a tag on my page in IE. The problem lies in the following; the tag, in IE does not fill the tag. The picture is the link but in IE the text takes precedence and overrides the image to make the text a link. Chrome and FireFox have no issues and render fine. My question is:
How can I make the image the link in IE and get it to work like it does in Chrome and FireFox?
The following images showcase my problem:
The problem in IE:
How it should render as per Chrome and FireFox:
The code for the section is as follows:
h1#site-name, div#site-name /* The name of the website */
{
margin: 0;
font-size: 2em;
line-height: 1.3em;
height: 115px;
background: url('/sites/default/files/images/ipark2-theme-assets/iPark_title.jpg') no-repeat top right;
margin-left: 212px;
color: transparent;
}
#site-name a:link,
#site-name a:visited
{
color: transparent;
text-decoration: none;
display: block;
height: 100%;
filter: alpha(opacity=50);
font-size:1em;
}
EDIT: addition of html markup:
<div id="logo-title">
<div id="logo"><img src="/sites/all/themes/zen/ipark2/logo.png" alt="Home" id="logo-image" /></div>
<div id="site-name"><strong>
Teaching and Learning Innovation Park
</strong></div>
</div> <!-- /#logo-title -->
</div></div> <!-- /#header-inner, /#header -->
You're applying an ID to two elements (your H1 and your div), make use of classes as at the moment you're just slapping an ID on everything.
I'm not sure if that will solve your issue, but it won't hurt and I know older versions of IE are more strict about recognizing an ID if it's not unique. Since you're targeting your anchor tag through that ID, it just makes me question if it isn't the issue.
I've looked everywhere for a solution to this so I don't really expect it to be simple.
I want to display an icon with an overhead text label. I'd like the text to respond to hover, whether the cursor is positioned over the text OR over the icon image.
The closest example I can find is at this link http://www.sencha.com/forum/showthread.php?122028-Label-with-icon
which gives the following CSS solution:
Label l = new Label("My Text");
l.addStyleName("my-label");
#CSS
.my-label {
background:url(my-icon.png) no-repeat right center;
padding-right:20px;
}
But my CSS skills aren't good enough - I haven't had much success in adapting this to an above-centered label instead of a centered label to the left of the icon image.
Would anyone like to give it a shot for me?
Additional Info:
Here's what I have now - which isn't working, the "display: block; doesn't seem to let me use a background-img attribute ...
CSS:
.blogicon {
width: 70px;
text-align: center;
background-img:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat bottom center;
display: block;
padding-top: 4px;
padding-bottom: 90px;
}
HTML:
/* <h6 class="blogicon">Blog</h6> */
If you want to display the text above the icon, You can change the CSS to be:
.my-label {
background:url(my-icon.png) no-repeat bottom center;
padding-bottom:20px; /* this should be >= the icon's height */
}
It would be better if we could see your HTML, too, or at least a screen shot of what you are picturing, but this should be pretty easy. You can either wrap an <a> around the text and icon and set :hover rules, or you could add the text via the :before pseudo element to the <a>, which can be styled for both hover and non-hover states.
EDIT:
Now that we have a better idea of what you want, here's how you could do it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
.blogicon {
width: 70px;
text-align: center;
backgrond: #f7f7f7;
padding-top: 4px;
}
.blogicon a {
display: block;
background:url("http://dispatchesusa.typepad.com/the_dov_blog/link-images/bookmark.png") no-repeat 50% 100%;
padding-bottom: 90px;
color: blue;
text-decoration: none;
font-weight: bold;
}
.blogicon a:hover, .blogicon a:focus {
color: red;
}
</style>
</head>
<body>
<div class="blogicon">Blog</div>
</body>
</html>
I have taken the liberty to change <h6> to <div>, as this probably is not a true heading. But of course, you can change this back if you want, but it's rare to need an <h6>, so I suspect you are using it for presentational reasons, which is to be avoided. It's easy enough to set the font-weight of the link to bold, as shown.
I want to use an image for the background of a select/dropdown. The following CSS works fine in Firefox and IE, but does not in Chrome:
#main .drop-down-loc { width:506px; height: 30px; border: none;
background-color: Transparent;
background: url(images/text-field.gif) no-repeat 0 0;
padding:4px; line-height: 21px;}
select
{
-webkit-appearance: none;
}
If you need to you can also add an image that contains the arrow as part of the background.
What Arne said - you can't reliably style select boxes and have them look anything like consistent across browsers.
Uniform: https://github.com/pixelmatrix/uniform is a javascript solution which gives you good graphic control over your form elements - it's still Javascript, but it's about as nice as javascript gets for solving this problem.
Generally, it's considered a bad practice to style standard form controls because the output looks so different on each browser. See: http://www.456bereastreet.com/lab/styling-form-controls-revisited/select-single/ for some rendered examples.
That being said, I've had some luck making the background color an RGBA value:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #d00;
}
select {
background: rgba(255,255,255,0.1) url('http://www.google.com/images/srpr/nav_logo6g.png') repeat-x 0 0;
padding:4px;
line-height: 21px;
border: 1px solid #fff;
}
</style>
</head>
<body>
<select>
<option>Foo</option>
<option>Bar</option>
<option>Something longer</option>
</body>
</html>
Google Chrome still renders a gradient on top of the background image in the color that you pass to rgba(r,g,b,0.1) but choosing a color that compliments your image and making the alpha 0.1 reduces the effect of this.
You can use the CSS styles below for all browsers except Firefox 30:
select {
background: url(dropdown_arw.png) no-repeat right center;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
width: 90px;
text-indent: 0.01px;
text-overflow: "";
}
Updated
Here is a solution for Firefox 30. There is a little trick for custom select elements in firefox :-moz-any() CSS pseudo class.
i'm making a splash image div that changes the background with different css class, here's rules i defined:
#splash {
height: 130px;
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
this works fine in firefox and chrome, but the background somehow doesn't show up in ie 6. The weird thing is, it works for the homepage class but not the projectspage class. so ie 6 seems to interpret these almost identical rule differently. i tried clear the cache, didn't help. i'm quite new to css and ie 6 hacks, so am i missing anythings here?
also another problem that's slightly related to this, it seems it doesn't work in firefox when there is space before the class, like "#splash .homepage", but somehow i see other people's websites using the css with a space. what could be the problem?
update:
i tried to reverse the order of the #splash.homepage and #splash.projectspage, then now projectspage works but not the homepage. It seems whatever is immediately followed by #splash is used.
here are some relevant css & htmls:
#splash {
height: 130px;
}
#splash.projectspage { background: #F7EECF url('images/splash_projects.png') no-repeat 0 0 scroll; }
#splash.homepage { background: #F7EECF url('images/splash_home.png') no-repeat 0 0 scroll; }
#splashtext {
padding: 53px;
height: 40px;
width: 450px;
}
#splashtext h2 {
color: #FFFFFF;
font-family: Georgia, "Times New Roman", serif;
font-size: 20px;
font-weight: normal;
font-style: italic;
}
#splashtext p {
color: #FFFFAA;
font-family: Calibri, Arial, san-serif;
font-size: 14px;
font-weight: normal;
margin-top: 10px;
font-style: italic;
}
<!-- splash, this one does not show -->
<div id="splash" class="homepage">
<div id="splashtext">
<h2>some header</h2>
<p>some description</p>
</div>
</div>
<!-- splash, this one shows -->
<div id="splash" class="projectspage">
<div id="splashtext">
<h2>some other header</h2>
<p>some other description</p>
</div>
</div>
IE6 does not support multiple combined selectors to select elements (#id.class or .class.class, etc). IE6 will ONLY recognize the last class/ID in your chain.
Details and example
However, in this case, as long as you only have .homepage and .projectspage on one element on the page, the background image should be showing up on the correct element.
I noticed that you are probably using .homepage and .projectspage to differentiate between two PAGES and the same ELEMENT on those different pages. A good practice is to put the class on the <body> element so you can use it to differentiate each page and their descendants.
<body class="homepage">
<div id="splash">
Then your CSS would be:
body.homepage div#splash { blah }
body.projectspage div#splash { blah }
Added benefit: you can now target any elements on a per page basis, not just the ones that you add ".homepage" or ".projectspage" to.
It's possible you're having an issue with the .png image files. IE6 cannot handle the transparency layer that is part of .png images, it simply renders any pixel with a transparent marker as a grey background.
As for the second part of your question, #splash.background is a significantly different rule than #splash .background. The first one (no space) refers to the element with id splash that also has a background class. The second rule (with a space) refers to any element of class background that is a child of the element with id splash. Subtle, but important difference.
Try taking out the quotes around your URLs in the background specifiers, or changing them to single quotes.
Why are you worried about ie6? Anyway it works in ie7 and ie8.
Are you sure that is not a problem with png? Try with a jpg or gif image.
I would bet that the problem is specifically to do with the IE6 misshandling of .pngs
To test, try replacing these graphics with a gif or jpg and check to see if the selectors are working correctly.
Once you've identified that it is a problem with pngs try using the Supersleight jQuery plugin.
I think using min-height property will sometimes work.
Try the below code.
#splash {
min-height:130px; /* first */
height:auto !important; /* second */
height: 130px; /* third */
}
#splash.homepage {
background: #F7EECF url("images/splash_home.png") no-repeat 0 0 scroll;
}
#splash.projectspage {
background: #F7EECF url("images/splash_projects.png") no-repeat 0 0 scroll;
}
Note: Please use the same order of css in #splash selector.
(I guess your projectspage is under a sub-directory of home-page?)
Try using absolute paths to each image in the CSS (eg. url("/images/splash_projects.png")) - it chould be that IE6 resolves images relative to the containing page instead of the CSS file (depends whether your CSS is inline or in an external file I suppose.)
I've got the same problem, and it's not PNGs.
e.g.
column2menu li { border-bottom : 1px solid;}
column2menu li.goats { border-bottom-color : brown;}
...works in IE6, but...
td#menu { background-repeat:no-repeat;
background-position:bottom right;}
td#menu.goats { background-image :
url(../images/goats.jpg);}
...doesn't.
But I found a solution for ie6 that works so far in FF, i.e.:
.tdgoats { background-repeat:no-repeat;
background-position:bottom right;
background-image : url(../images/goats.jpg);}
...so you use:
...and ie6 is happy
Thsi post looks OK where I'm typing it, but the preview in the blue box is a bit odd.
Somehow lines 2 and 3 got <h1>'d
I have a crazy navigation menu that I have to code. It's kind of tough. Please see the screenshot of the design here:
navigation menu screenshot
As you can see, the background of the "Home" menu item is quite tough! I can't figure out how to make its background "see-through", meaning it cuts through the dark background and shows the patterned green background.
Do you know how to do this using css?
Thanks in advance.
You can use either:
background: transparent;
background: inherit;
But, you'll need to structure your HTML so that the Home, Journal, etc. links are embedded in the box with the background.
For rounded corners, check this out.
Or you can use images with shaped transparency as the background.
#Gary [comment]: inherit grabs the first settings it finds going up the hierarchy. So if you have a middle layer, it's gonna pick up on its settings instead.
Something you might try then is to use:
background-image: url('greencheckers'); /* outer */
background-color: black; /* middle */
background-image: inherit; /* link */
In theory, it should look for the first background-image setting, then. But, I've never used this, so no guarantees.
One way you could do it is the opposite approach you'd normally take. Apply a black background to the other elements, leaving a gap where the highlighted tab is. Kind of a reverse sliding doors.
Create two very long black images: one for the right which has a rounded corner on its left, and one for the left with the corner on the right and position them on either side of the current element. Sadly, I don't think plain CSS will be able to do this, but it looks like you're already using JS.
I'm not sure how feasible this will be, it's just off the top of my head, but it could be an interesting approach.
Another interesting approach to transparent (or translucent) effects is to give two sections either
1) the same background image, or
2) similar background images, with one of them modified with color or blur or whatever
... and make sure that their background-position is the same.
This is demonstrated in Eric Meyer's "Complex Spiral" demo. (Here's another version he made.)
Clarification: this is in Meyer's "Edge" section for a reason - it's not compatible with IE6. (Thanks, Boris.)
You can emulate fixed background position unfortunately not supported by IE6 (see nerdposeur's answer) with careful "manual" positioning using background-position. Position the big image with 0,0 offset. Use the same image for selected tab, but offset it to the left and up by exactly the position of the top left corner of the tab. That will ensure exact matching of the two backgrounds you want.
You seem to have a fixed menu, so it means carefully writing background CSS for your four menu elements, one by one. Of course, if your menu is dynamic, this approach does not work. Here's a demo I quickly cooked up starting with this page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tabbed Navigation</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin: 20px;
padding: 0px;
background: #CACCB4;
font: 16px arial, sans-serif;
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
}
pre {text-indent: 30px}
#tabmenu {
color: #000;
border-bottom: 2px solid black;
margin: 12px 0px 0px 0px;
padding: 0px;
z-index: 1;
padding-left: 10px }
#tabmenu li {
display: inline;
overflow: hidden;
list-style-type: none; }
#tabmenu a, a.active {
color: #DEDECF;
background: #898B5E;
font: bold 1em "Trebuchet MS", Arial, sans-serif;
border: 2px solid black;
padding: 2px 5px 0px 5px;
margin: 0px;
text-decoration: none; }
#tabmenu a.active {
background-image: url('http://www.graphicsarcade.com/backgrounds/strips/background_3.gif');
background-position: -125px -18px;
border-bottom: 3px solid #ABAD85; }
#content {font: 0.9em/1.3em "bitstream vera sans", verdana, sans-serif;
text-align: justify;
background: #ABAD85;
padding: 20px;
border: 2px solid black;
border-top: none;
z-index: 2; }
#content a {
text-decoration: none;
color: #E8E9BE; }
#content a:hover { background: #898B5E; }
</style>
</head>
<body>
<ul id="tabmenu">
<li>Enormous</li>
<li><a class="active" href="tab2.html">Flared</a></li>
<li>Nostrils</li>
</ul>
<div id="content">
<p>If one examines subpatriarchialist material theory, one is faced with a choice: either accept the presemioticist paradigm of reality or conclude that the task of the artist is deconstruction, given that reality is equal to art. It could be said that the subject is contextualised into a Batailleist 'powerful communication' that includes language as a totality. Marx uses the term 'precapitalist semiotic theory' to denote the bridge between narrativity and society.</p>
<p>Any number of desituationisms concerning Sartreist absurdity may be discovered. In a sense, the textual paradigm of consensus states that reality has significance. Baudrillard uses the term 'surrealism' to denote the absurdity, and subsequent rubicon, of substructuralist class. It could be said that la Tournier[4] holds that the works of Pynchon are modernistic. The premise of the textual paradigm of consensus states that the significance of the observer is social comment. However, in Gravity's Rainbow, Pynchon examines textual materialism; in The Crying of Lot 49 he denies subcultural discourse.</p>
<br />
</div>
</body>
</html>
I suggest making a 30 x 1 (Height x Width) image, fill it black and set opacity on it to about 35%... Save as .png (not compatible with < IE7 browsers)
Add that image to your menu background CSS class as follows:
#MainMenu {
display: block;
height: 30px;
background; transparent url("menuBG.png") repeat-x;
}
I know this works because it's what I did for my site. The site isn't complete, but you can check out a screenshot:
http://www.logansarchive.za.net/preview.jpg
HTH