I am facing an issue with IE browser (all versions till IE 10). Issue
Text in input box is overlapping its background image. I cant put this image in parent div as its a dynamic input box and having lot of other functionality. and i cant increase the width of textbox than 100px and value is about 50 characters.
pls help.
CSS
.some {
background:url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png) no-repeat right center;
padding:1px 15px 1px 1px;
border:1px solid #ccc;
width:100px;
color:red;
overflow:hidden;}
HTML
<input type="text" class="some" value="I am a messy input box" />
Try this demo with IE8: http://jsfiddle.net/74u4w/2/
If it works, just add the border to the image and you will have a fix
.some {
background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
background-position: 105px -6px;
background-repeat: no-repeat;
padding: 1px 1px 1px 1px;
border: 1px solid #ccc;
border-right: 25px solid transparent;
width: 100px;
color: red;
overflow: hidden;
}
If not, then the last resort is a small javascript that appends an img/div after your input. (which can be done dynamically)
With an absolute position set, it will not affect the flow. This css sample shows how it could look:
.some {
padding: 1px 1px 1px 1px;
border: 1px solid #ccc;
width: 80px; /* narrowed to fit img */
color: red;
overflow: hidden;
}
.someimg {
background-image: url(http://cmsresources.windowsphone.com/windowsphone/en-us/How-to/wp8/inline/hardware-icon-search-button.png);
background-position: center center;
background-repeat: no-repeat;
position: absolute;
overflow: hidden;
left: ?px; /* needs to be calculated based on each input */
top: ?px; /* needs to be calculated based on each input */
width: 20px;
height: 20px;
}
Decrease input field width and add padding from right
DEMO FIDDLE
Related
I'm experimenting with css and I'm trying to add a dynamic pseudo-class in my selector. Here is the HTML-markup snippet.
<div id="child">
<input type="text" id="text"/>
</div>
and it's corresponding css-style
input[type="text"]{
width: 150px;
height: 25px;
}
input[type="text"]:hover, input[type="text"]:focus{
border: 1px solid grey;
}
#child{
padding: 5px;
border: 20px solid;
background: aqua;
height: 50px;
margin: 10px;
}
Here is the JSFIDDLE example. So when the mouse hovers over the text element the size of the text element is reduced as follows:
Would anyone know why this reduction in size is occurring?
Now in your code what is happening is that you have set the input fields width and height to 150px and 25px respectively.Now when you add 1px border to it it will reduce the inside(white) portion of the input field to maintain the width and height as mentioned(150px and 25px). To solve this you can add 2px to both width and height on hover.Fiddle :
http://jsfiddle.net/z78BN/6
input[type="text"]:hover, input[type="text"]:focus{
width: 152px;
height: 27px;
border: 1px solid grey;
}
That is because of two things outline and pseudo 3d default border of input.
Add
input[type="text"]{
border: 1px solid aqua;
}
input[type="text"]:focus{
outline:none;
}
I have an image with a hover event. The only problem is it does not scale to a smaller size or to mobile screens. I've spent much time researching and haven't found anything. I thought 100% width should have done the trick. I must be missing something.
Codepen link.
Please help before my brain splits.
Also, criticism welcome.
Check with this one:
body, html {
width:100%;
height:100%;
}
.myButtonLink {
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test3.jpg") no-repeat scroll 0 0 transparent;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
display: block;
height: 100%;
text-indent: -99999px;
width: 100%;
background-size: 100%;
}
.myButtonLink:hover {
background: url("https://dl.dropbox.com/u/5869656/Caroline%20Ziv/Home-test5.jpg") no-repeat scroll 0 0 transparent;
border: 10px solid #FFFFFF;
box-shadow: 1px 1px 2px #E6E6E6;
background-size: 100%;
}
Also apply below css to the page you have loaded in iframe.
body, html {
width:100%;
height:100%;
}
Hope it will help
Do the following:
Apply max-width: 100%; to the img
Remove text-indent: -9999px;
Remove the background image on the div
I am trying to set up a custom toolbar for a textarea, I have the following
html:
<div id="main">
<div id="toolbar"></div>
<textarea></textarea>
</div>
css:
#main {
background-color: #ddd;
height: 400px;
width: 400px;
position: relative;
}
#toolbar {
background-color: #444;
height: 40px;
color: white;
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0;
}
It works exactly as I expected in Chrome, but in firefox / ie the text area is not consuming all the available space in the div.
How do I set it up so the toolbar takes up 40px at the top of the div, and the textarea consumes all the rest of the height.
I am sizing this stuff dynamically so can not use a "px" height or width for the textarea.
Codepen here: http://codepen.io/anon/pen/pDgvq
Better Suggestion
Set the textarea's width and height to 100%. Then, give it a 40px top-border that is transparent (color doesn't really matter, actually). Be sure to set box-sizing to border-box. Now position the relative toolbar on a higher z-index - voila.
Pen: http://codepen.io/anon/pen/nFfam
Oldie
Rather than moving the textarea down, move the toolbar up:
#main {
background-color: #ddd;
height: 200px; width: 400px;
position: relative;
top: 40px;
}
#toolbar {
background-color: #444;
height: 40px; width: 100%;
position: absolute;
top: -40px;
}
textarea {
width: 100%; height: 100%;
box-sizing: border-box;
}
Pen: http://codepen.io/anon/pen/mEGyp
Both Firefox and IE9+ support the calc() CSS function (you're out of luck with IE8 though; not sure what you're supporting).
I've added these lines to the textarea's CSS in your pen (updated version):
width: calc(100% - 2px);
height: calc(100% - 41px);
padding: 0;
The padding is just for normalization; you can choose whatever suits your needs, but be sure to adjust the pixel values in calc() accordingly. The 2px for width are to compensate the left and right border; the 41px for height are 40 for the toolbar and 1 for the bottom border.
Add width:-moz-available; height:100%;resize: none; to textarea
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
margin: 0;
position: absolute;
top: 40px;
bottom: 0;
left: 0;
right: 0; width:-moz-available; height:100%;
resize: none;
}
UPDATED DEMO
Another Method
You can add a div around textarea and give position:absolute to the div
HTML
<div id="main">
<div id="toolbar"></div>
<div id="container">
<textarea></textarea>
</div>
</div>
CSS
#container{
position:absolute;
bottom:0px;
top:40px;
width:100%
}
textarea {
outline: none;
border: none;
border-left: 1px solid #777;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
resize: none; height:100%; width:99.5%
}
DEMO 2
You can use height and width for textarea in % also apply top to the toolbar div in %
e.g. If top is 10% give 90% height to textarea.
I hope this is your desired result: Demo
#main {
background-color: #ddd;
width: 400px; height: 200px;
padding: 0;
}
div #toolbar {
background: #444;
width: 100%; height: 40px;
}
textarea {
margin: 0;
width: 100%; height: 100%;
}
I'm using the following code for the 2 borders of different colors, and space between the borders. I'm using the property outline-offset for the space between the borders. However it is not supported in IE (not even IE9).
Is there any alternate solution which works in the IE as well, without adding another div in the html.
HTML:
<div class="box"></div>
CSS:
.box{
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
outline:2px solid red;
outline-offset: 2px;
}
The height and width is not fixed, i have just used for the example.
JSFiddle:
http://jsfiddle.net/xyXKa/
Here are two solutions. The first is IE8+ compatible, utilizing pseudoelements. View it on JSFiddle here.
HTML:
<div class="box"></div>
CSS:
.box {
position: relative;
width: 100px;
height: 100px;
margin: 100px;
border: 2px solid green;
}
.box:after {
content: "";
position: absolute;
top: -6px;
left: -6px;
display: block;
width: 108px;
height: 108px;
border: 2px solid red;
}
The second idea I have is a non-semantic solution, but gives you IE6+ support. View it on JSFiddle here.
HTML:
<div class="outer-box"><div class="inner-box"></div></div>
CSS:
.outer-box {
width: 104px;
height: 104px;
margin: 100px;
border: 2px solid red;
padding: 2px;
}
.inner-box {
width: 100px;
height: 100px;
border: 2px solid green;
}
Oh woops, I just saw that you requested leaving just a single div. Well, that first solution fits those requirements!
Some more solutions. I've used them successfully:
1.
.box {
outline:2px solid green;
border:2px solid transparent;
box-shadow: 0 0 0 2px red inset;
}
Restriction of this solution: "outline" property ignores "border-radius" one.
2.
.box {
border: 2px solid green;
box-shadow: 0 0 0 2px #fff inset, 0 0 0 4px red inset;
}
Restriction of this solution: space between red and green borders can't be transparent because red box-shadow will be visible through it. So, any solid color needed, I've set #fff.
My issues with other solutions toward this end:
"outline-offset" is not compatible with IE; pseudoelements method requires absolute positioning and pixel ratios (no good for my responsive design); inset box-shadow does not display over an image.
Here is the fix I used to responsively frame images in an IE compatible way:
.container img {
border:2px solid white;
outline:4px solid red;
background-color: green;
padding: 2px;
}
"outline" defines the outer border, "border" defines the space in between, while the inner border is actually the background color with padding determining its width.
In cases where you're styling the ::focus pseudo-class, you won't have the luxury of using ::after or ::before pseudo-class as those methods are only effective on container elements (see W3C spec. for more information).
A cross-browser solution to give-off that offsetting effect is to use box-sizing, border, and padding.
You simply negate and alternate the padding and border width values.
Default / base styles:
input[type="text"] {
...
padding:10px;
border:1px solid grey;
}
Pseudo-class styles:
input[type="text"]:focus {
padding:8px;
border:3px solid red;
}
http://jsfiddle.net/XjsWZ/
I'm trying to get the white box itself to have rounded corners in addition to its transparent gray border using CSS3. Is this possible?
html:
<div class="outer"><div class="inner"></div></div>
css:
.outer{
width: 300px;
height: 300px;
border: solid 10px;
border-radius: 5px;
border-color: rgba(0, 0, 0, 0.5);
}
.inner{
border-radius 5px;
}
Bonus question:
What's with those black squares in the corners on Chrome?
EDIT: I found a discussion of the black squares: Weird border opacity behavior in Webkit?
http://jsfiddle.net/XjsWZ/3/ maybe?
** edit **
I prefer JamWaffles':
.outer{
width: 290px;
height: 290px;
border: solid 10px;
border-radius: 15px;
border-color: rgba(0, 0, 0, 0.5);
background-clip:padding-box;
background-color:white;
padding: 5px;
}
Or if you want different looking corners there's a variant of Jedidiah's:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 10px; /*if you reduce this below 9 you will get black squares in the corners, as of Chrome 14.0.835.163 m*/
}
.inner{
border-radius: 5px;
background-color: white;
height: 100%;
}
JamWaffles answer is cleaner but if you did want to achieve this with the nested div tags and a translucent border you could set a background colour on the outer div to match the border colour, you would also need to set background-clip: padding-box; so that the border and background do not overlap.
Example:
http://jsfiddle.net/XjsWZ/7/
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display:block;
width: 100%;
height: 100%;
}
html:
<div class="outer"><div class="inner"></div></div>
This will change the look of the box a bit, but if the border radius is greater than the width of the border, you'll get inner rounded corners too.
Example here. I've removed the inner div as it's not needed for the example, as I have made the assumption you're nesting only to achieve the rounded effect.
In relation to the black squares in the corners, I don't get any at all with Chromium 12. You could try using a normal hex colour instead of an RGBA one. For your current colour, it's #808080, although I do appreciate the need for translucency; this is for a Facebox-style popup?
http://jsfiddle.net/XjsWZ/10/
It seems like this would be a good solution although it technically doesn't use a border, it maintains the correct alpha value while getting rid of the black squares in webkit:
css:
.outer{
width: 300px;
height: 300px;
background-clip:padding-box;
background-color: rgba(0,0,0,0.5);
border: solid 10px rgba(0,0,0,0.5);
border-radius: 5px;
}
.inner{
border-radius: 5px;
background-color: white;
display: block;
width: 280px;
height: 280px;
position: relative;
top: 10px;
left: 10px;
}
html:
<div class="outer"><div class="inner"></div></div>