Having a problem with box-decoration-break and overflowing. Here is a fiddle to illustrate my problem: https://jsfiddle.net/n56226na/3/
span {
display: inline;
padding: 7px 20px;
background: #000;
color: #fff;
font-size: 18px;
line-height: 40px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
Basically, I need the text to be boxed, and with padding, according to the design. The problem is on browser resize, the boxes always overflow to the right (and off the page), while the left hand side is padded nicely, due to centre alignment. Here's an image to illustrate my problem:
In an ideal world, the span would be centre aligned, with a black box white text, but wouldn't overflow it's parent div. Not sure if this is even possible. Appreciate any ideas.
I asked a similar question and after some researches and taking inspiration from others users' suggestions, I found possible solution.
First of all, in this page you can find some possible solutions using many different methods.
The best that "actually" (browser support varied during time) is to combine the cited "Fabien Doiron's box-shadow Method" with a little modification to address only specific behaviour of Firefox 32+.
Your updated jsFiddle has the following specific rule:
span {
display: inline;
padding: 7px 0;
background: #000;
color: #fff;
font-size: 18px;
line-height: 40px;
box-decoration-break: clone;
box-shadow: 10px 0 0 #000, -10px 0 0 #000;
}
I added a multiple box-shadow to mimic lateral padding (resetting your original padding declaration).
Anyway, is necessary to add box-decoration-break: clone; to override specific Firefox 32+ behaviour that has box-decoration-break: split; as default.
Please, note that I left only box-decoration-break: clone; because is necessary only for FireFox.
Instead, you (actually) MUST remove analogue specifix Chrome variant, -webkit-box-decoration-break: clone; because it's the responsible of your unwanted horizontal overflow on window resize.
So, due to fact that Chrome needs vendor prefix for this property, declaring it only with standard syntax is a workaround to make it running correctly even in it and also in IE9+
Add a right margin to the parent the same width as the text's padding (20px in your case). That way it will trigger a line break a little sooner, keeping your text from ever seemingly overflowing.
Related
I have some issue which only encounters my iPad Pro 12.9, but not on phones or desktops.
🐞 on : Safari + Chrome + Firefox
input[type=text], input[type=email], input[type=time] {
color: white;
background-color: black;
font-size: 1em;
width: 100%;
border: solid 1px white;
border-radius: 5px;
margin: 10px;
padding: 10px;
}
How do I make my inputs padding look nice on all browsers all devices?
Firstly you need to make sure your inputs aren't being over-ridden from another declaration which often causes the problem you have here, particularly in relation to the line-height and font-size properties. Set your line-height value to line-height: normal on your input elements. Using the input[] selector has a low specificity in the CSS cascade, hence why it could be being over-ridden.
If the above values aren't being over-ridden from a different part of your stylesheet you can use box-sizing:border-box, line-height: normal on your input elements. You'll most likely need to increase the padding value slightly to get the aesthetic look you require.
How about to use all: unset;
To be honest I found out about it just yesterday and not used it yet, but it seems to be widely supported.
Here is a small demo. Though, I used sass.
Screenshot from iPad Pro:
Screenshot from Chrome (on Linux):
You don't really need padding top and bottom within an input, so you can remove it, just use padding: 0 10px
If some browser do not vertically centres the text, you can equal the line-height with the height and that should be fine.
also apply a box-sizing: border-box; rule will probably avoid differences between browsers on how do they render paddings.
I have to add a background-color to a text (a title for example) adding some padding around it.
Applying display:inline-block padding is perfect, but obviously, background will span across entire block width (e.g. 100%).
Design requires to have a separate background strip for each line of text, and this could be achieved using display:inline with a line-height:160%; but this has the drawback of applying padding left only on first row and padding right only on the last.
Here a jsFiddle with two examples. The second one is the most similar to desired behaviour but obviously padding is not correct.
Relevant part of CSS code is:
.inline-block
{
display:inline-block;
padding:5px 20px;
}
.inline
{
display:inline;
padding:5px 20px;
line-height:160%;
}
How to combine advantages of two approaches?
You can utilize the box-shadow CSS call for this purpose. I have completed a fiddle with end result. You can then play around with it to get the exact result you want
CSS:
.highlightme {
background-color: #A8332E;
padding: 0.5rem 0;
-webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;
box-decoration-break: clone;
}
JSFiddle
Taking inspiration by other answers that suggested use of box-decoration:break; property, I investigated on this topic, finding also this page with some possible solutions.
The best that "actually" (browser support varied during time) is to combine the cited "Fabien Doiron's box-shadow Method" with a little modification to address only specific behaviour of Firefox 32+.
The updated jsFiddle has the following specific rule:
.inline
{
display:inline;
padding:5px 20px;
background:blue;
color:white;
line-height:160%;
box-shadow: 10px 0 0 blue, -10px 0 0 blue;
box-decoration-break: clone;
}
Multiple box-shadow is used in all browsers to mimic lateral padding, while is necessary to add box-decoration-break: clone; to override specific Firefox 32+ behaviour that has box-decoration-break: split; as default.
NOTE about cross-compatiblity:
box-decoration-break: clone; is necessary only for FireFox.
Rather in Chrome, is (actually) mandatory to NOT set equivalent -webkit-box-decoration-break: clone; because it adds an unwanted horizontal overflow on window resize. So, due to fact that Chrome needs vendor prefix fro this property, declaring it only with standard syntax is a workaround to make it running correctly even in it and also in IE9+
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
So... I created this weird solution to a weird problem: I needed shadows with straight sides, like a gradient with clean sides instead of a box-shadow.
I used an :after element to attach a gradient to the bottom of the elements that needed it (in the sample, this is commented out). I then tried an inset shadow with negative size and this works the same way. These work perfectly except for one minor detail: I can't use it like a shadow because the elements it covers sometimes aren't clickable.
Sample: http://codepen.io/syren/pen/jlcym
Some things I've ruled out already:
1) Using inset-shadows on the elements underneath: It needs to be applied to the original element or else it won't function like it's shadow when things move. If I could figure out
2) Using a box-shadow with negative spread or size: This works, and I would use this except it doesn't look like how the designer wants it to.
3) Z-index: It's messy because it's a very dynamic page, so I can use it in some places but not in others because seeing as its a shadow, it should be over everything visually at least.
So, to recap, I want it to look exactly the way it does with the clean edges, and I need it to be attached to the element not the surrounding elements and I'd really like it to be a pure CSS solution, like with pseudo-elements.
Any ideas?
http://codepen.io/anon/pen/cuJqG
html:
<nav>
<h1>I'm an Example Header</h1>
</nav>
<section>
<h3>You can't click me because the shadow above is covering me!</h3>
css:
nav{
border-bottom:3px solid #000;
position:relative;
}
h1{
font-family: "Helvetica";
text-transform:uppercase;
margin: 20px 10px 10px;
}
h3{
font-family: Helvetica, sans-serif;
font-weight: 600;
padding:10px;
margin:0;
cursor: pointer;
width: 98.75%;
color: white;
background: #ff0000;
box-shadow: inset 0 20px 40px -20px #000;
}
I am using bootstrap and i find the height of the text field is too small.It's like less than 10px.I am wondering if it is small or i made some mistakes.
I used firebug to inspect the text area.It says the height is 18px,which seems impossible for me...And what i got is the same as i got from here.Text area from bootstrap example.It makes me rather confused...
what i got is
input, textarea, select, .uneditable-input {
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #555555;
display: inline-block;
font-size: 13px;
height: 18px;
line-height: 18px;
margin-bottom: 9px;
padding: 4px;
}
The height says it's 18px, but it's not...
Can somebody help?!
Adding <!DOCTYPE HTML> should fix this. The same question was asked here: Text input rendering issue with Twitter Bootstrap
Incase the top answer didn't help
I had <!DOCTYPE html> already and it wasn't the problem for me. I don't know what is the problem, but
I fixed it with this in my css:
input[type=text], input[type=password], input[type=email], input[type=tel] {
height: 28px !important;
}
It's a workaround and I'm not sure if it has some side effects.
I don't know why if I open a clean new HTML5 page it works but after I add some code I don't know why it happens. So I just open the bootstrap.min.css file and search:type="text" and there there is height property and I change it to min-height for it have to be working.
Yes the total height is 28px because padding & border also add height to that input like this:
height 18px +
4px padding-top +
4px padding-bottom +
1px border-top +
1px border-bottom =
Total 28px height
See my solution here in a similar thread.
Basically, the text file encoding was causing all my trouble. It manifested in such minute differences across browsers that I wasted hours fiddling with CSS thinking that was the cause.