I have an image over a table that has been style with CSS. When I have my image on the table without a href it is fine, once I apply an href the transparency is no longer working. Any way around this?
Table css
table.list_data {
background-color:#F3F3F3;
border:1px outset #A1A1A1;
border-collapse:collapse;
border-spacing:2px;
font-family:'MS Shell Dlg';
font-size:13px;
font-style:normal;
font-variant:normal;
font-weight:normal;
width:100%;
}
Happens in Chrome and FF, haven't tried IE but I expect the same.
html.....
<td><img alt="Add A job" src="images/add.png"/></td></tr><tr><td>joe bloggs</td>
try adding the following:
a{
background: transparent !important;
}
a img{
background: transparent !important;
}
This is not a terribly good idea to do in a production site. This indicates that there is something wrong with your css code. Try looking through the css and find whatever is causing your anchor tags to have a non-transparent background.
If you want to assure that you have transparent PNGs no matter how the code is, use TweakPNG.
http://entropymine.com/jason/tweakpng/
Related
I want to create horizontal line as shown in below image using css. but unable to create so, i have never seen such line before using css.
Can anyone who are export in css can help me with this?
I know basic like this
Update
Note: Actually, i have to put this in my email template, so i am avoiding images. Just pure css
The only CSS I can think of, is a stretched (transformed) dotted border:
div {
border-bottom: 1px dotted black;
transform: scale(1,10);
}
<div></div>
If it's for an email (see comments section):
use <img src="bars_300x10.png" style="display:block; width:300px; height:10px;">
with an image exactly cut as the expected email design.
Using simply a 3x1 px background base64 .gif:
hr{
border:0;
background: url('data:image/gif;base64,R0lGODlhAwABAIAAAAAAAP///yH5BAAAAAAALAAAAAADAAEAAAICRFIAOw==');
height:10px;
}
<hr>
One posibility that gives you absolute control about the results is a gradient
div {
width: 300px;
height: 40px;
background: linear-gradient(to right, black 0px, black 5px, white 5px, white 30px);
background-size: 30px 100%;
}
fiddle
You can adjust the size of the pattern, the width of the black strip, the color ...
I commented but, seems like it would work to use vertical pipes (|) and then to control their size/color/spacing using css font techniques. I'll post some examples. It's not clear to me if using pure css is a requirement for you or not.
span {display:block;}
.a { color:blue; font-size:2em; letter-spacing:.2em; }
.b { color:red; font-size:1em; letter-spacing:2px; }
.c { color:green; font-size:8px; letter-spacing:1px; }
<span class="a">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="b">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
<span class="c">||||||||||||||||||||||||||||||||||||||||||||||||||||||||||</span>
Another option, if you don't need much variance in the appearance would be to create a single bar "image", then set it as the background-image of a <div/>, and finally apply repeat-x on it.
I'm currently working on a schoolproject and I've been trying out some css-transitions. I'm using the transition property to light up the nav-links in the nav but when the page loads the color of the font and the size change size and color before they quickly transition into the styles I've specified in the css. Do you have any clue what could've caused this? I'm having the same issue with some of the other elements on the page too.
I've tried using the transition on the color property only transition:color,0.5s; but then the text turns blue/purpelish for some reason. I've also tried the webkit-prefix but that didn't really help. If I take away the transitions the problem stops.
Help would be greatly appreciated!
Here's the css for the nav
.main-head a{
text-decoration: none;
font-weight:bold;
font-size:3em;
margin:0.5em;
color:#636363;
transition:0.5s;
}
.main-head a:hover {
transition:0.5s;
color:#eee;
/*border-bottom:3px solid #eee;
border-top:3px solid #eee;*/
}
And here the page if you want to check it out for yourselves. Pay attention at the top when loading the page and you'll notice the weirdness.
http://albmar13.ddi.hh.se/Laboration%201/index.php
I wonder if it is possible in pure css to have a stencil effect:
A block with a background color, and color "transparent" that would reveal the background of the parent block.
For example, I have a parent block with a gradient or pattern as background, and I want to overlay a block with a black background where the text content would leave see the gradient of the parent block.
I haven't found a way to get this to work, but maybe someone has an idea or a tip?
EDIT
Sorry, I should not be precise enough.
Here is a picture of the desired result:
May be you can use CSS3 background-clip. write like this:
HTML
<p>T</p>
CSS
p{
font-size:50px;
font-family:impact;
background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
position:relative;
width:80px;
height:80px;
text-align:center;
padding-top:10px;
}
p:after{
content:'';
position:absolute;
background:rgba(0,0,0,0.8);
width:80px;
height:80px;
border-radius:100%;
top:0;
left:0;
z-index:-1;
}
body{
background: url(http://lorempixel.com/output/technics-h-c-1414-1431-2.jpg);
}
Check this http://jsfiddle.net/rD6wq/6/
Something using an embedded font, such as http://www.google.com/webfonts/specimen/Allerta+Stencil may be close to what you want. By changing the background and text colours, you should get what you are looking for
#element_id {
opacity:0.4;
filter:alpha(opacity=40);
}
this will set the opacity of the div or whatever you apply it too 40% of its original opacity (which is usually 100% unless you apply this to .png or .gif images with reduced opacity already)
As far as I know, you can use SVG for that, but it won't be trivial.
This (and this) might be the closest implementation of what you need. The problem is that it doesn't work the same in every browser, though you may try deeper research.
Upd: Lea Verou has presented a simple and elegant solution in her article: Text masking — The standards way
You can play with the CSS3 text-shadow property.
p{ text-shadow:0px 0px 2px #000 }
See my example here.
Detailed info about the property here.
(before I start I should say yes, I have done all the stupidity checks, yes the link is in my history and has been visited etc)
I'm using Chrome version 6.0.472.63, although it's important that this works on all browsers.
It works on Firefox, IE and Opera.
Basically all i'm trying to do is change the background image of a link if the link has been visited.
I've done alot of trial and error testing so bear with me for multiple examples.
This is what I had originally
.forum_box .title a {
background-image:url(../images/f_unread.png);
background-position:10px center;
background-repeat:no-repeat;
background-color:transparent;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background-image:url(../images/f_read.png);
}
Works in every browser except Chrome. Next I tried just making it a colour rather than image.
.forum_box .title a:visited {
background-color:red;
}
Same again, however I changed the link to #fff instead of transparent and the visited link changed red, so apparently the bg colour only works if you set a bg colour for the parent.
.forum_box .title a {
background-image:url(../images/f_unread.png);
background-position:10px center;
background-repeat:no-repeat;
background-color:#fff;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background-color:red;
}
However it still doesn't solve my image problem. So in one final attempt I tried this in the hope that for some reason Chrome would only work when the same properties where present in both.
.forum_box .title a {
background:#fff url(../images/f_unread.png) no-repeat 10px center;
color:#2D4054;
font-size:14px;
padding:10px 12px 10px 44px;
text-decoration:none;
display:block;
font-weight:bold;
}
.forum_box .title a:visited {
background:#fff url(../images/f_read.png) no-repeat 10px center;
}
That didn't work either and again continued to work on Firefix, Opera and IE. So I come here to Stack Overflow very confused.
Any help would be greatly appreciated!
UPDATE:
I've attempted a jQuery solution, although it still doesn't work. Despite having :visited links and I can confirm their visited state by changing the font color to red. jQuery('a:visited').length returns 0.
Same problem here.
Changing background-position in a CSS Sprite on a:visited is working for me in Firefox 3.6 but not in Chrome 6.
But probably soon it will stop working in Firefox too. (maybe for FF 4?)
It's a privacy problem, and you can read here a Mozilla article about it (March 2010) http://hacks.mozilla.org/2010/03/privacy-related-changes-coming-to-css-vistited/
And the bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=147777#c160
I think only possible solution is to use creatively the background-color instead of images.
It's probably a security issue.
Check this post on the mozilla security blog.
I can certainly imagine how they would do it.
Chrome appears to have disabled css for :visited ( except for color ).
This would be to prevent the history sniffing exploit.
See http://www.azarask.in/blog/post/socialhistoryjs/
You might need your single quotes around your img url...
Browsers are funny about when they do care about quotes and when they don't....
This is done for security reasons, as it was possible to load a lot of different images and detect which links the user had visited, any property sending an specific request, or loading a specific resource, depending on what the user has visited is technically seen as a security issue, as it can leak personal interests of the user.
https://blog.jeremiahgrossman.com/2006/08/i-know-where-youve-been.html
I ve applied a background to my page like this,
body
{
background:#FFFFFF url('images/color.png') repeat top left;
color:#666666;
font-family:Arial,Helvetica,sans-serif;
font-size:80%;
font-style:normal;
font-variant:normal;
font-weight:normal;
white-space:nowrap;
margin:0 auto;
height:100%;
}
This seems to work in IE7,firefox and chrome but certainly not in IE6.
IE6 hates pngs..:) leave alone rendering them in background..! you will need some sort of PNGFix for this.. I usually use this
ie6 doesnt render pngs well. maybe you should just use a gif or jpg?
why would you use a transparent png for that? Using a gif would be a much better solution