Here is the css I wish to improve upon:
img {
border-radius: 7px 90px 7px 7px !important;
#include pie;
.ie8 &{
margin-left: 1px;
border-radius: 7px 90px 7px 7px;
}
.ie9 &{
margin-left: 1px;
border-radius: 7px 90px 7px 7px;
}
.ie10 &{
margin-left: 1px;
border-radius: 7px 90px 7px 7px;
}
.ie11 &{
margin-left: 1px;
border-radius: 7px 90px 7px 7px;
}
}
Is there a way of specifying the style for all IE browser versions? Instead of 1 class for each browser version?
The answers I found so far are:
Hack
Apply 'If' condition in HTML
Refer this link for details - http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Ques:
Is there any other solution apart from the above 2?
Has anyone successfully implemented the hacks? They don't work for me. Either breaks the styling or does nothing!
Thanks!
Neha
Have you tried using a conditional statement to set the <html> tag?
You can apply a class to the entire page with:
<!--[if !IE]><!--><html><!--<![endif]-->
<!--[if IE]><html class="ie"><![endif]-->
Then set your CSS to apply a rule to .ie:
.ie{
img{ /* ie only properties */ }
}
Related
I'm having some problems to add opacity to IE 8 (I would also like this to work in IE7 and IE9 but I've just tested it on IE8).
I have my css as this:
label{
color: #333;
text-decoration: none;
border: solid 1px #bebebe;
width: 138px;
padding: 5px;
text-align: center;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px #333;
box-shadow: 0 8px 6px -6px #333;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #f2f2f2;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#bdbdbd');
background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#bdbdbd));
background: -moz-linear-gradient(top, #f2f2f2, #bdbdbd);
display: inline-block;
margin-bottom: 10px;
position: relative;
outline: none;
}
So all my labels must be the same in all explorers (This is working with no problem) but I wan to add a opacity to some of these labels. I was using:
.aclass{
opacity:0.4;
filter:alpha(opacity=40);
}
But it is not working on IE. I read some articles here, for example:
Opacity CSS not working in IE8 , opacity in IE8 not working
and others but I haven't found the solution for this. I tried adding this:
.aclass{
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
opacity:0.4;
}
Also adding "zoom:1;" to the previous block or " display: block;" but still not working. I haven't found the solution to this, so if anyone could help me I would really appreciate it.
Thanks in advance!
In your gradient filter, you can define #AARRGGBB whereas the AA == alpha values.
From MSDN. You might have better luck doing this than adding unique filters for gradient and alpha.
I am trying to use box-shadow, and border-radius together on a webpage, and it is showing a white image that fills in the space where the radius is. Think of it like when you safe a "transparent" image in photoshop with a drop shadow, to a jpg, or png-8 file.
Here is an image to show you what I mean.
(i cant post images yet, but here is the link)
http://i.imgur.com/jDpIH.png
I am using this as my CSS
.whole
{
width: 1000px;
margin: 0 auto;
-webkit-box-shadow: 0px 3px 5px 2px #000000;
-mox-box-shadow: 0px 3px 5px 2px #000000;
box-shadow: 0px 3px 5px 2px #000000;
}
.top
{
height: 120px;
background-color: #1F1209;
margin-top: 50px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.footer
{
height: 250px;
background-color: #834C24;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
}
So does anyone know if there is a way I can fix this? this is happening in Firefox and IE, by the way. I havent been able to check it out in other browsers though.
I would really prefer not to use a Photoshopped image... As CSS3 should definitely be used.
Any thoughts on this? I would greatly appreciate any help! :)
Thanks for your time folks!
A little tip for you
Use this css3 for shortcuts instead of adding -left -right- top
border-radius:0px 0px 0px 0px;
<!-- [top left] [top right] [bottom right] [bottom left] -->
That would be easier if you do that.
And as for the box-shadow... I don't know why it is like that but I used this code and it works perfectly well.
box-shadow:0px 0px 10px black;
<!-- in case you don't know ... [x coordinate] [y coordinate] [size of shadow] [color] -->
Well, I don't know if these codes will work on IE because I don't use IE browser and my computer will suddenly hang for a bit but... anyways.
I rewrite one of your class css code and I hope it work.
.footer
{
height: 250px;
background-color: #834C24;
border-radius:10px 10px 10px 10px;
box-shadow:0px 0px 50px black;
}
And I think even though you don't put -webkit- and -moz-, Mozilla and Chrome will read that. I hope it works on IE, too.
Anyways... that's it. Hope that'll work.
You probably have a background colour associated with the container.
The border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera, because it is CSS3 property. The syntax is:
border-radius: 1-4 length|% / 1-4 length|%;
Example 1
border-radius:2em;
is equivalent to:
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;
Example 2
border-radius: 2em 1em 4em / 0.5em 3em;
is equivalent to:
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png. I'm trying to make all images stay behind the black image with the log-in screen in front of everything.
CSS
CSS for images
img
{
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index:0;
}
CSS for black background
element.style {
height: 1843px;
left: 0;
position: fixed;
top: 0;
width: 1263px;
z-index: 10000;
}
.modalBackground {
background-color: #000000;
opacity: 0.5;
}
CSS for Log-in Screen
element.style {
display: block;
margin-left: -225px;
margin-top: -212px;
}
.pagepopups .popup {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #333333;
background-color: #006699;
display: none;
left: 50%;
padding: 11px 10px;
position: absolute;
top: 50%;
z-index: 10001;
}
Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.
You failed to make the image fully anonymous (Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.
Testing only in IE7:
Add to .header a single rule: z-index: 10000.
That's it fixed in IE7.
It will probably also be fixed in IE6, but if not, let me know and I'll take a look.
You're lucky you didn't anonymise it properly :)
For once, ff and ie comply. But in this instance chrome doesnt like it.
We have a field, with autosuggest attached, that appears after x amount of letters. Cannot really put a demo on fiddle, as its db driven.
However here is the css
.suggestionsBox {
z-index: 2;
position: absolute;
margin: 70px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
.suggestionList {
margin: 0px;
padding: 0px;
}
.suggestionList li {
list-style: none;
margin: 3px 3px 3px 3px;
padding: 3px;
cursor: pointer;
}
.suggestionList li:hover {
background-color: #ffffcc;
}
And screenpic of ff , ie chrome appearance. Any suggestions, I am usually bloody good with css. But this has me stumped.
As requested here is html for this element:
<div class="field"><label for="propertysuburb">Suburb </label> <input name="propertysuburb" id="inputString" onkeyup="lookup(this.value);" onblur="fill();" size="50" type="text" class="medium" /></div>
<div class="suggestionsBox" id="suggestions" style="display: none;">
<div class="suggestionList" id="autoSuggestionsList">
</div>
</div>
What does the margin for the .suggestionsBox do? As an absolutely positioned element, I believe it will just ignore that.
The issue seems to be that you're not setting any top / bottom / left / right values to your absolutely positioned .suggestionsBox div; this leaves it up to the browser to determine where to put it.
Make sure your .field class has "position: relative;" on it, then add a "top: 20px;" and "right: 0px;" to your .suggestionsBox styles. Just adjust the top / right values if it doesn't line up correctly.
First off, a nitpick.
When using CSS3 with vendor prefixes, ALWAYS use the non-prefixed version last, otherwise you may (potentially) break something:
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
As for your problem: I can't see the CSS for the .field div, but I assume it has a positioning context set as well (probably relative), otherwise the z-index on suggestionBox wouldn't work, and judging by the screenshots, it does. Now, what you haven't set is the actual position. The absolute positioning context should place the box in the top left corner of its parent (obviously, that's why the parent needs a positioning context too). If you need it to start at the parent's bottom, you also need to add top: 100%; to your .suggestionBox properties.
I can't really see anything else that might be wrong here.
To debug something like this, I would slightly modify your back-end code so that the suggestion list remains fixed and open, regardless of typed input. Load the page, then open the developer pane in Chrome, go to the Elements tab, and use the "magnifying glass" icon to inspect the misplaced elements. Play with the styles panel to discover which attributes are causing the incorrect offset (don't forget to try things like absolute vs. fixed position of the element or its parents). Once you have an idea of where things are going wrong, see if the "fix" is benign in other browsers.
This looks like it's most-likely a JavaScript issue. The suggestion list is most likely placed programmatically (given the position: absolute it seems certain), so I'd look to that code.
If it's not a JavaScript issue, the other possibility is that the "position parent" of the absolute element differs. Your CSS shows that the suggestion box is positioned absolutely, but we cannot see from your posted code what establishes the baseline for the position (how its nearest-positioned ancestor is defined).
One thing that can sometimes help with absolute positioning is to use the top style rather than the margin-top to move your absolutely-positioned element down.
Thanks to #mingos and #russelluresti
We have this fixed now:
css:
.suggestionsBox {
z-index: 2;
top: 59px;
right: 524px;
position: absolute;
margin: 69px 0px 0px 146px;
width: 207px;
background-color: #ffffff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border: 1px solid #cccccc;
color: #000;
-webkit-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
-moz-box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
box-shadow:-1px -1px 7px #ccc, 1px 1px 7px #ccc;
}
and field :
.form .field { width: 50%; float: left; position:relative;}
Cheers Guys, perfect. I havent got Safari, but it works in the 3 I was interested in, and seems to be valid code now, which supports proper rules. Many thanks
I have the following CSS:
box-shadow: inset 0px 0px 2px #a00;
Now I am trying to extract that color to make the page colors 'skinnable'. Is there any way of doing this? Simply removing the color, and then using the same key again later overwrites the original rule.
There doesn't seem to be a box-shadow-color, at least Google turns nothing up.
Actually… there is! Sort of. box-shadow defaults to color, just like border does.
According to http://dev.w3.org/.../#the-box-shadow
The color is the color of the shadow. If the color is absent, the used
color is taken from the ‘color’ property.
In practice, you have to change the color property and leave box-shadow without a color:
box-shadow: 1px 2px 3px;
color: #a00;
Support
Safari 6+
Chrome 20+ (at least)
Firefox 13+ (at least)
IE9+ (IE8 doesn't support box-shadow at all)
Demo
div {
box-shadow: 0 0 50px;
transition: 0.3s color;
}
.green {
color: green;
}
.red {
color: red;
}
div:hover {
color: yellow;
}
/*demo style*/
body {
text-align: center;
}
div {
display: inline-block;
background: white;
height: 100px;
width: 100px;
margin: 30px;
border-radius: 50%;
}
<div class="green"></div>
<div class="red"></div>
The bug mentioned in the comment below has since been fixed :)
No:
http://www.w3.org/TR/css3-background/#the-box-shadow
You can verify this in Chrome and Firefox by checking the list of computed styles. Other properties that have shorthand methods (like border-radius) have their variations defined in the spec.
As with most missing "long-hand" CSS properties, CSS variables can solve this problem:
#el {
--box-shadow-color: palegoldenrod;
box-shadow: 1px 2px 3px var(--box-shadow-color);
}
#el:hover {
--box-shadow-color: goldenrod;
}
You can do this with CSS Variable
.box-shadow {
--box-shadow-color: #000; /* Declaring the variable */
width: 30px;
height: 30px;
box-shadow: 1px 1px 25px var(--box-shadow-color); /* Calling the variable */
}
.box-shadow:hover {
--box-shadow-color: #ff0000; /* Changing the value of the variable */
}
You could use a CSS pre-processor to do your skinning. With Sass you can do something similar to this:
_theme1.scss:
$theme-primary-color: #a00;
$theme-secondary-color: #d00;
// etc.
_theme2.scss:
$theme-primary-color: #666;
$theme-secondary-color: #ccc;
// etc.
styles.scss:
// import whichever theme you want to use
#import 'theme2';
-webkit-box-shadow: inset 0px 0px 2px $theme-primary-color;
-moz-box-shadow: inset 0px 0px 2px $theme-primary-color;
If it's not site wide theming but class based theming you need, then you can do this: http://codepen.io/jjenzz/pen/EaAzo
A quick and copy/paste you can use for Chrome and Firefox would be: (change the stuff after the # to change the color)
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-border-radius: 10px;
-moz-box-shadow: 0 0 15px 5px #666;
-webkit-box-shadow: 0 0 15px 05px #666;
Matt Roberts' answer is correct for webkit browsers (safari, chrome, etc), but I thought someone out there might want a quick answer rather than be told to learn to program to make some shadows.