I have a text-field and background-image style for the field. Below is the style applied :
.leftPaneContent INPUT {
background-color: #FFFFFF;
background-image: url("../images/icon-search-large.png");
background-position: 4px 3px;
background-repeat: no-repeat;
border: 1px solid #D1D1D1;
height: 14px;
margin: 5px 0 5px 3px;
overflow: hidden;
padding: 2px 10px 4px 23px;
width: 85%;
}
The image is displayed properly in FF even when I type a long value in the text-field. Whereas the image is overwritten in IE for a long value.
The problem can be seen in below image in IE
Is there a fix for this?
text-indent didn't fix the problem in IE. Hence I had to move the image out of text-field and wrap that inside a div :)
Related
Open Layers map overlay popup does not take background color value.
Only one line of text is white.
The rest (2-4 lines) is transparent.
div.ol-popup {
display: -moz-inline-stack;
display: inline-block;
width: fit-content;
height: fit-content;
background: white !important;
background-color: white !important;
-webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 280px;
//https://stackoverflow.com/questions/450903/how-to-make-div-not-larger-than-its-contents
}
//on Click
var element = popup.getElement();
$(element).html(istr); // $(element).text(istr); //
$(element).addClass('ol-popup');
$(element).css('.ol-popup', 'background-color: white !important;');
popup.setPosition(coo);
putting your code up on Codepen and then sharing might help to better understand what the problem is, however from my understanding of your post, I think you want the text to be a certain color and it's not complying.
If that is the case,
add color: white; to you code, and then you might want to set the background color to something else, say background-color: red;
I have a codebox on my blog in which I add HTML / CSS / Javascript codes
My CSS code looks like this:
.post blockquote {
background-image: url("https://dl.dropbox.com/u/76401970/All%20Blogger%20Tricks/Images/blockquote.png");
background-position: 0 0;
background-repeat: no-repeat repeat;
border-color: #DDDDDD #666666 #666666 #DDDDDD;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 1px;
color: #000000;
font-family: Consolas,'Courier New',Monaco,Courier,monospace;
line-height: 18px;
margin: 0 20px;
overflow: hidden;
padding: 10px 20px 10px 45px;
}
Whenever I add a big code (single line). The code gets to the next line but I want the code to be in the same line and a horizontal scroll under the box. I have tried overflow: auto overflow-x: scroll overflow-y: hidden
check this live example on W3SCHOOLS.
as you can see.. you need to specify a width and height.. that is why your code does not work
adding to that, use : white-space: nowrap; so you can make your code in a single line
take a look at this jsfiddle for your code
<div class="row">
some content
<div class="info-box">
some other content
</div>
</div>
.row {
float: left;
margin-bottom: 1.5%;
border: 1px solid #e3e3e3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background-color: rgb(250, 250, 250);
width: 685px;
-webkit-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-moz-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-ms-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
-o-border-box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
box-shadow:rgb(153,153,153) 0px 1px 2px 0px;
}
.row:hover {
background-color: rgb(240, 245, 245);
-moz-box-shadow: inset 0 0 5px #4d4d4d;
-webkit-box-shadow: inset 0 0 5px #4d4d4d;
box-shadow: inset 0 0 5px #4d4d4d;
}
.info-box {
position: relative;
border-left: 1px solid #e3e3e3;
padding: 15px;
width: 170px;
font-size: 0.93em;
color: #363636;
float: left;
}
Alright, I have this info box inside row. Since at .row:hover, I'm creating an inner shadow. The border-left of the info-box seems to show on top of the shadow when you hover on row.
My question is if you can make the shadow on top of the border. Thanks in advance.
Note: z-index doesn't work for me.
Of course it's on top: the child has to appear above the parent, otherwise it'd be hidden by it. To achieve the desired effect, you would have to apply the shadow to an element that came above, ie after, the .info-box. You can achieve this with no additional markup by using the :after pseudo-element.
If you take a look at this fiddle, I've achieved the basic proposition — although you may want to shift the border to the pseudo element or adjust dimensions to get it positioned just right.
Basic guide to what I did:
Gave .row the CSS position: relative so we can place children in relation to it.
Moved everything apart from the background property in the .row:hover rule to a new .row:hover:after rule.
Added content: ' ' to force the pseudo element to display.
Added positioning, height and width, top and left to make the pseudo element cover available width.
EDIT: Felipe points out in the comments that any attempt to click in through to object within .row will be intercepted by the :after element, but suggests you can use pointer events set to pointer-events: none to mitigate the problem (in everything other than IE and Opera). I've updated my example to show this in action.
I'm trying to make a "reply" button on my website which will have a drop down box next to it for specifying additional options. Sort of like this: [Reply][v] I was able to create the "Reply" button ok but I'm having problems with the additional options button: I can't seem to get the image I want to use for it consistently centered across multiple browsers. For instance, firefox moves the image down while chrome has the image up higher. (I added red lines to the picture below to show the spacing inconsistency)
Link to show issue:
Does anyone know how I can get this image properly vertically centered (horizontally it works fine!) within the span or have another suggestion as to how I can make my button? It's also important that the "arrow" button have the same height as the "Reply" button (well their outer borders at least) as some solutions I have tried have caused that to "break". I would also like to keep the arrow button image as part of an element's "background" property so that it can be selected from a png which contains multiple images. (for efficiency reasons so only one image is loaded for all icons on the site) I know I sound picky about this one pixel skew, but the problem seems to get worse depending on the line-height I'm using and really causes it to look bad. Any help would be greatly appreciated. Thank you!!
<div>
<span class="text">Reply</span><span class="options"></span>
</div>
.link1{
display: inline-block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid black;
color: black;
text-decoration: none;
font-size: 12px;
line-height: 20px;
}
.link2{
display: inline-block;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid black;
border-left: none;
color: black;
text-decoration: none;
font-size: 12px;
line-height: 20px;
}
.text{
margin: 0px 5px 0px 5px;
padding: 0px 0px 0px 0px;
font-size: 12px;
}
.options{
margin: 0px 0px 0px 0px;
padding: 0px 5px 0px 12px;
background-image: url("arrow.png");
background-position: 2px 3px;
background-repeat: no-repeat;
overflow: hidden;
}
You can either use different styles/stylesheets for different browsers with the various available methods, or you can set one height, and use position: absolute. I find most of the time, position: absolute; does a good job fixing things across many browsers. for example
position: absolute;
top: 10px;
left: 100px;
this moves the image 10 pixels down, and 100px right (relative to the closest parent element that is not position: fixed;
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 :)