I added a shadow and a background to a button, but the shadow causes the background to be interupted and broken as is described in the following screenshot.
What's strange is that when I remove the box-shadow of the button, the issue disappears.
This is my CSS :
.btnx3{
background: #4687DF;
border: 1px solid #2667BF;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
padding: 5px 10px;
}
I'm using Firefox 29.0.1, But what makes me ask this question is that I have other buttons and I don't have this issue.
I made sure to restart the browser, upgraded to 30.x.x, but the problem persists.
Edit
I tested the same code on JsFiddle, and it works normal : http://jsfiddle.net/nemzL/
This is not a CSS issue, it's apparently a Firefox bug. For some reasons :
There's no problem on chrome, and other browsers.
The problem is solved when you change css properties of other
elements : Like the margin-top or the border of the container, or
remove the shadows etc...
The same button, and the same CSS code works normally in different pages. (If I move the button to another place)
I will ignore this issue, since it's just related to the browser as you can see.
Thank you,
Related
I am currently working on a site which has an design where the main 'welcoming text' contains more than one line (as it is a short introduction about a product). This has an background of a transparant (0.7) white (rgba(255,255,255,0.7) with multiline padding. Yes, multiline padding I am saying. What that means, is that every line of text has top, bottom, left and right padding, background color and also a small transparent space between the lines.
To accomplish this, I used a box-shadow with an horizontal offset to simulate the left and right padding on each line. This does work on all browsers except Internet Explorer. As we want to have site working on all browsers I tried fixing this problem for a while now and I almost have come to the conclusion that this is just an internet explorer issue.
I used Geoff Muskett his example (http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/) and it does work as excepted except IE.
The problem is that when I open the page in IE, the box-shadows seems to be rendered somewhat blurry even though I set the blur to 0 pixels. (or just not added it, both did not work).
Even the code from Geoff his example does not work:
HTML
<h2><span>Could you benefit from having Alfi in your home?</span></h2>
CSS
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
Is there anybody here that knows this issue and knows if there is a solution to this that is not very hacky (not preferred)?
IE 11.0.9600.17905
EDIT
3 August 2015 09:32
I have been investigating this issue this weekend and found some posts of people having exactly the same issue as I am currently having. This seems to be a rendering bug in IE. See: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow
Also in another StackOverflow post, someone by the name of #nickmorss says using the box-shadow to accomplish the multiline padded text is not working in IE11 and FF34+. It could be fixed in FF using box-decoration-break: clone; but this does not work at my side.
I think this is something not fixable in CSS by myself as this may be just a narly bug.
I found this worked in IE11
body{
background-color: blue;
}
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255, 255, 255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
<h2><span>Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow</span></h2>
So I'm thinking that maybe your site is perhaps in quirks mode, or using a different rendering mode other than IE11.
Confirm that you are running in IE11 mode by pressing F12 and going to the emulation tab. Are you in the right document mode. If not you will have to fix your site to ensure it's using the right document mode.
Please note, that in the comments of that blog post it does mention it doesn't work in Firefox, but someone has post code that does.
Not sure if it'll solve it but try declaring your rgba values as rgba(255,255,255,0.7) I've not seen hex values used within rgba before and this may be confusing IE
I'm using the Stylish browser extension to create a custom dark theme for a website. In a recent update, the site owner came up with rounded corners for a lot of things, which is ugly as hell in my opinion, especially with input fields. However, when I try to apply border-radius: 0px !important; using Stylish, the input fields go nuts. It works fine on things like regular divs, but not on any kind of inputs, be it a regular <input type=text>, a <textarea> or even things like a <select>.
This is how a text area looks like without my custom CSS:
This is how it looks like with my custom CSS:
This is how it looks like when I add border-radius: 0px !important; to my CSS:
When border-radius: 0px is applied, all other border properties and background are ignored. Not even the site's native CSS properties are used. The browser just uses the standard look like there were no CSS rules defined for the textarea at all. color still works though.
It's like border-radius was intended to change everything. If I add it only on :hover, the input fields only go crazy on hover. I don't even have to use 0px: The issue happens even when I use the same 6px that the site's native CSS uses.
This is my whole CSS rule:
textarea, input[type="text"], .textbox {
border-color: #282828 !important;
border-width: 3px !important;
border-style: solid !important;
border-radius: 0px !important;
background: #0F0F0F !important;
color: grey !important;
}
What's really weird is the fact that border-radius: 0px causes no problems when added using the Firefox developer tools, so it seems to be a problem with stylish.
What's causing this madness? How can I fix it? Is there a workaround? The only idea I had is to use a custom JS that adds the property ...
Oh my god, removing border-style: solid; fixes everything. I have no clue why, but I am happy now.
I'm editing the Wordpress login page and it is going pretty good so far. I created a separate css file to do so and everything is working as it should except one thing.
I am unable to remove the border and box shadow from the form. I tried this:
#login form {
background: #7554a5;
border: 0px !important;
-moz-box-shadow: 0px !important;
-webkit-box-shadow: 0px !important;
box-shadow: 0px !important;
}
but it doesn't work. I also tried to look in the Wordpress's wp-admin.css to find how the box shadow is applied but I cannot find it. Any help?
Try this. You dont need important. Just put your css after wordpress one.
border: none !important
However you should check in firebug or chrome dev tools in css tab how your css gets overided.
box-shadow: none !important;
did the trick
This is maybe a bit of a simple question to be asking here... I am a newbie so sorry if it is...
I am having problems with a CSS border around the main image on my website, I have got it to work on my blog pages but cannot get the same style work on the royalslider plugin on my homepage. Basically I want it to look exactly the same on the homepage as it does around the image on the blog page.
Working Link:http://alanbrandt.com/blog/copenhagen-wedding-photographer/
Not working: http://alanbrandt.com/
What am I doing wrong?
CSS:
.ab-royalslider {
position: relative;
zoom: 1;
padding: 32px;
-webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
EDIT:
It appears as if we are getting there... Thank you for all your help! I still have a bottom border that is too far away from the image???
I had hoped to achieve this in the Royalslider CSS style sheet for the .abSliderSkin style but I cannot get it to work... :( If anyone has ideas on how I can improve this I would very much appritiate it.
.ab-royalslider - add padding: 42px 0;
#homepage, #stories - remove margin
#new-royalslider-1 - there is inline stile, height should be about 415px; width: 684px;
Try that, although I dont like this structure, it could be done easier and cleaner.
I think you should check your div's first. When i inspected the elements i noticed that the structure is different. And also the width of the area is different. At first link you have a div called header preview. and in the second you dont basically the container is different.
This is my first relply hope it helps you out.
It could be because there is no element of class ab-royalslider in the second link, so you'll have to apply the shadow to other elements. Try using .rsOverflow or .royalSlider.
Well I think you should disable the 'css optimization/combining" in the admin area, so we can pin point what edit you have to do in which file, because right now we are getting an optimized/combined css file so figuring out which file has the fault is really difficult.
You need to do changes in your CSS files:
http://alanbrandt.com/wp-content/cache/minify/000001/ZYxBCoAwDAQ_ZImefEhfkLZRgjGFpCL6esWT4m1nZ9kBctWGuYWp2hpGYM2yFXLI7uDtEPKuBxTUZKilPb3eWxQ-6a9mUjKUbgClPVg9UFy4kIFwgje_8v8GU3xMXFg_cAE.css
on Line number 1390
.rsContent img{
//Remove margin:0px !important and also other styles
}
AND
http://alanbrandt.com/wp-content/cache/minify/000001/ZYxBCoAwDAQ_ZImefEhfkLZRgjGFpCL6esWT4m1nZ9kBctWGuYWp2hpGYM2yFXLI7uDtEPKuBxTUZKilPb3eWxQ-6a9mUjKUbgClPVg9UFy4kIFwgje_8v8GU3xMXFg_cAE.css
on line number 1392
.rsOverflow{
//Remove height:415px !important
}
Try out this will work
I figure out these changes using fire-bug
I'm trying to style the dropdown arrow of a <select> element with CSS only , it works perfectly in Chrome/Safari:
select {
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url('./select-arrow1.png') ;
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
margin: 0;
padding-top: 2px;
padding-bottom: 2px;
width: 200px;
}
Which renders beautifully as seen here
By that logic, the only thing I had to do to make it work in Firefox was to add all -webkit-* stuff as -moz-* :
-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;
It works for 99%, the only problem is that the default dropdown arrow doesn't go away, and stays on top of the background image as seen here
It looks like -moz-appearance: button; does not work for a <select> element. Also -moz-appearance: none; has no effect to remove the default dropdown arrow.
So what is the correct value for -moz-appearance to remove the default dropdown arrow?
Updates:
December 11, 2014: Stop inventing new hacks. After 4 and a half years, -moz-appearance:none is starting to work since Firefox 35. Although moz-appearance:button is still broken, you don't need to use it anyway. Here is a very basic working example.
April 28, 2014: The mentioned css hack worked for a couple of months but since the begining of April 2014 this bug is creeping back into Firefox 31.0.a1 Nightly on all platforms.
Update: this was fixed in Firefox v35. See the full gist for details.
== how to hide the select arrow in Firefox ==
Just figured out how to do it. The trick is to use a mix of -prefix-appearance, text-indent and text-overflow. It is pure CSS and requires no extra markup.
select {
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Long story short, by pushing it a tiny bit to the right, the overflow gets rid of the arrow. Pretty neat, huh?
More details on this gist I just wrote. Tested on Ubuntu, Mac and Windows, all with recent Firefox versions.
This is it guys! FIXED!
Wait and see: https://bugzilla.mozilla.org/show_bug.cgi?id=649849
or workaround
For those wondering:
https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59
First, because the bug has a lot of hostile spam in it, it creates a hostile workplace for anyone who gets assigned to this.
Secondly, the person who has the ability to do this (which includes rewriting ) has been allocated to another project (b2g) for the time being and wont have time until that project get nearer to completion.
Third, even when that person has the time again, there is no guarantee that this will be a priority because, despite webkit having this, it breaks the spec for how is supposed to work (This is what I was told, I do not personally know the spec)
Now see https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)
The page no longer exists and the bug hasn't be fixed but an acceptable workaround came from João Cunha, you guys can thank him for now!
To get rid of the default dropdown arrow use:
-moz-appearance: window;
Try putting opacity:0; your select element will be invisible but the options will be visible when you click on it.
It is worth trying these two options below while we're still waiting for the fix in Firefox 35:
select {
-moz-appearance: scrollbartrack-vertical;
}
Or
select {
-moz-appearance: treeview;
}
They will just hide any arrow background image you have put in to custom style your select element. So you get a bog-standard browser arrow instead of a horrible combination of both the browser arrow and your own custom arrow.
In Mac OS X, -moz-appearance: window; will remove the arrow accrding to the MDN documentation appearance (-moz-appearance, -webkit-appearance).
It was tested on Firefox 13 on Mac OS X v10.8.2 (Mountain Lion). Also see: 649849 - Make -moz-appearance:none on a combobox remove the dropdown button.
While you can't yet get Firefox to remove the dropdown arrow (see MatTheCat's post), you can hide your "stylized" background image from showing in Firefox.
-moz-background-position: -9999px -9999px!important;
This will position it out of frame, leaving you with the default select box arrow – while keeping the stylized version in Webkit.
it is working when adding :
select { width:115% }