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
Related
I don't understand because sometimes a simple color line doesn't appears with Chrome.
My line is defined with CSS code :
/* line warning */
.line_warning {
background-color:#ff9900;
color:white;
margin-top:5px;
margin-bottom:5px;
height: 1px;
}
Apparently, I have this problem only with chrome (I use Bootstrap).
Thank you in advance if you have any idea to resolve it.
A quick solution would be to create your line with a border rather than a background colour...
.line_warning {
height:0px;
border-top:1px solid #ff9900;
margin-top:5px;
margin-bottom:5px;
}
Interested to know if anyone can explain why this is happening, as it seems a issue in Firefox too.
UPDATE: I looked further into this, and found that adding a margin to your body fixes it.
body {
margin:0px;
}
This seems to be what normalize.css use - I have no idea why it works, though. Seems like a bug.
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.
Edit: Found out that this happens even though Cufon isn't even applied!
Edit2: My bad, looks like Cufon is creating the slowless afterall.
However, removing the line where I replace the menuwrapper font style with Cufon still results in sluggish behaviour. So it doesn't seem like it's got anything to do with applying cufon to the lists themselves.
Hi, I'm using Cufon to "embed" a custom font to my site. And this font is used on the main menu and I've encountered a bug or something where setting the height, padding or anything of the li:hover makes IE go sluggish. I don't know why this happens but the problem dissapears when I remove the property from the li:hover. It works fine in Firefox though.
So my question is, is there another way of getting around this?
What I'm basically trying to do is to position the li:hover because it has a background to it. And I want to skew it a few pixels towards the bottom.
My CSS looks like this:
#menuwrapper {
float:right;
margin-top:10px;
height: 65px;
}
.menuwrapper li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;
padding-left: 23px;
padding-right: 23px;
height:23px;
}
.menuwrapper a{
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none;
}
.menuwrapper li:hover {
background-image: url(img/MenuHover.png);
padding-bottom:6px;
}
Could not understand what you mean exactly but as you said you want to get it a bit lower at the bottom, then you can do that with margin-top css property.
margin-top:10px; /* down it by 10 pixels */
Just have to lay this one dead I guess. Getting nowhere with it as it is now.
I'm still relatively new to CSS, but after lots of Stack Overflow reading, I have figured out how to add "headers" to a panel. Yay, go me. But the problem I'm running into is that one of my panels in particular won't render properly in Firefox. I've been doing all development work in Chrome, and I just now noticed this issue. The weird part is, I'm able to add my "header" (might be better to call it a div wrapper?) to other panels and they look fine - it's just 1 panel that is giving me issues I can't figure out why. To see what I mean, look at http://www.mobiuspc.com in both Firefox and Chrome. The difficult panel in question is title "System Construction Area" - the teal colored border in Firefox sprays itself everywhere, whereas in Chrome it displays properly.
Here is the CSS to the difficult panel:
.dropareaparent
{
height:528px;
width:690px;
margin-left:332px;
margin-top:-540px;
background-color:teal;
text-align:center;
color:White;
}
.droparea
{
height:500px;
width:680px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
float:left;
}
Here is the CSS to a different panel that is working great in both browsers:
.primarystatdivparent
{
height:428px;
width:266px;
margin-top:-530px;
margin-left:1045px;
background-color:teal;
text-align:center;
color:White;
}
.primarystatdiv
{
height:400px;
width:256px;
margin-left:2px;
padding:3px;
color:Black;
background-color:White;
text-align:left;
}
Other than my absolute positioning (still learning how to float things), to me the CSS between the problematic panel and the perfect panel appear to be the same?
For reference, IE looks fine as well (other than slow Javascript execution).
It seems a bit over-complicated. If - for example - you float your filterboxareaparent left, there is no need for large negative margin on dropboxareaparent.
I'd try to position the elements in a more logical way so the results will be more consistent across different browsers.
You need a negative margin-top for .droparea as well.
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/