I've got a problem with the AutoCompleteExtender inside the AJAX Control Toolkit which I just can't seem to get to the bottom of. The control sits inside an asp:Panel linked to a ModalPopupExtender from the toolkit. Everything works beautifully in the latest generations of IE9, FF and Opera but glitches in Safari and Chrome (assuming it's WebKit related).
The glitch is that the drop down from the autocomplete is falling behind the modal popup rather than in front of it (names blurred for privacy reasons):
Looking at things in Firebug, here's the drop down rendered in an unordered list:
<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">
The autoCompleteList class looks like this:
.autoCompleteList
{
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
}
And the resulting div for the modal popup looks like this:
<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">
With the following modalPopup CSS class:
.modalPopup
{
background-color: White;
padding: 10px;
width: 462px;
}
My assumption is that the lower z-index on the list is causing it to fall behind the div but then again, it plays nice in the non-WebKit browsers. The z-indexes are also inline styles so they're obviously coming straight from the controls. Am I missing something here? Any suggestions? (other than ditching WebForms and AJAX and employing jQuery)
Seeing as you suspect it's the z-index causing the problem, what happens if you try and override the inline styles that are spat out by the Ajax Control Toolkit using !important?
.autoCompleteList {
list-style: none outside none;
border: 1px solid buttonshadow;
cursor: default;
padding: 0px;
margin: 0px;
z-index:2000 !important;
}
.modalPopup {
background-color: White;
padding: 10px;
width: 462px;
z-index:1000 !important;
}
I know it's a bit of a hack but if you haven't tried it yet it might be worth a shot?
Ian, I was having a similar problem with a modal popup and several callout extenders. The callout was always under the popup. I lowered the z-index of the modal with the !important and poof. Started working. Thanks much for the suggestion.
I have came across same problem.
My code was running pretty fine in mozilla. but it was not working on Safari and Chrome.
Now I set "z-index:12000 !important;" to autocomplete class, because modal popup has 10051 z-index value.
Related
I am experiencing an issue which puzzles me a bit.
My reference for this issue is Chrome 32 on Mac and Safari on iOS 7.0.4.
In the following example, Chrome renders the text in the .background and textarea elements perfect and on top of each other, this is what I want. Safari on iOS though, offsets the text in the textarea with 3 pixel-units. This happens although padding, border and margin are set to the same values on both elements.
When I am debugging in Safari's developer tools, both through my iPhone device and the iOS simulator, the elements themselves align perfectly when outlining the elements metrics.
Markup
<div class="container">
<div class="background">This is a test</div>
<textarea>This is a test</textarea>
</div>
CSS
.container {
border: 1px solid #cdcdcd;
background: #f0f0f0;
width: 400px;
height: 50px;
position: relative;
margin: 24px 0;
}
.background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #f00;
}
textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
background: transparent;
border: 0;
position: relative;
z-index: 2;
}
Demo: http://jsfiddle.net/Y8S5E/2/
Can anyone offer a solution or some theories to research into, for this issue?
Edit
It appears that this is an issue with the textarea's shadow DOM node. Does anyone have some reference to how the padding of this element is defined? Percentage value or hard 3px value? Any way to remove this padding?
Unfortunately I don't think you can't style inside of the Shadow DOM in iOS. Some elements expose pseudo attributes which you can hook on to. For instance, <input type="range"> exposes a -webkit-slider-runnable-track pseudo element.
http://codepen.io/robdodson/pen/FwlGz
You can see this in the dev tools.
But I don't think textarea exposes such a thing.
I just discovered this strange problem on an <a> element. I wanted to make a css only button with a "pushed down" animation.
More or less something like this:
.button:active {
position: relative;
top: 10px;
}
The problem is that link doesn't seem to work if you do the mousedown below the text and release when the text has moven below the pointer (the animation runs correctly but onclick or href don't work). You can see the "bug" or whatever it is in this fiddle:
http://jsfiddle.net/H9RgD/
I already tried different things, like using padding to create the animation but it still doesn't work. I can confirm it doesn't in Chrome 22 (latest version as of today). Why does this happen? How can I get around this problem to animate a css only button?
Cannot answer "why" (I think it may be a bug). It seems like I recall encountering a similar issue before with Chrome, and came up with a similar workaround as I offer here. Somehow, adding the "overlay" of the pseudo-element causes the whole to become "clickable." In your case, I noticed that if I clicked toward the top of the div, it also did not register, but when I added the top adjustment to the :before in the :active state, that seemed to be resolved also.
This fiddle seems to have a working solution. HTML is the same as your fiddle (except I added the content to the alert):
HTML
<div class="tabs-container">
<div onclick="alert('here')">Click below the text</div>
</div>
CSS
.tabs-container div{
display: inline-block;
background: whitesmoke;
padding-bottom: 5px;
font-size: 25px;
border-bottom: 5px solid grey;
position: relative;
}
.tabs-container div:active{
top: 10px;
border-bottom: 0;
}
.tabs-container div:before {
position: absolute;
content: '';
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.tabs-container div:active:before {
top: -10px;
}
I'm trying to theme a search form with button and I have problem with text positioning in the button. Chrome and Opera are showing the button properly, but Firefox is not.
HTML:
<button type="submit"><span>Search</span></button>
CSS:
button {
border: 0;
background: red;
padding: 0;
width: 200px;
height: 50px;
position: relative;
}
button span {
position: absolute;
top: 0;
left: 0;
}
In Opera and Chrome the span is at the top left corner. In Firefox the padding at top and left and the top position begins in the middle of the button height.
What am I doing wrong?
Live demo: http://doctype.n-joy.sk/button/
Thanks
That's a strange one. Looks like Firefox is keeping some kind of proprietary padding inside of button element. The workaround I was able to implement was a FF-only piece of CSS with a rather ugly negative margin for the span... A quick fix really, maybe others can follow with something better.
button {
background: red;
border: 0;
padding: 0;
margin: 0;
}
button span {
display: block;
background: blue;
width: 200px;
height: 50px;
}
// FF only:
#-moz-document url-prefix() {
button span {
margin: -1px -3px;
}
}
It looks like you did everything correctly, but there is some dark magic emerging from the default styles of Firefox, and from some undocumented, hidden (pseudo-)elements attached to buttons.
I haven't yet found the rule which would help you with this button issue, but you may try to scan the default styles yourself. If you type in Firefox's address bar: resource://gre-resources/forms.css, then you will see one of its default stylesheets.
Some of suspicious selectors (just wild guesses) are: *|*::-moz-button-content or input > .anonymous-div. The second one does not seem to be defined for button, but who knows where else the magic lies?
In any case, I suppose, you might report it as a bug.
Found this in Twitter Boostrap reset.less file.
It corrects this behavior.
button,
input {
*overflow: visible; // Inner spacing ie IE6/7
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet
}
button::-moz-focus-inner,
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4
padding: 0;
border: 0;
}
Note that comments are in less... not CSS so you have to replace // by /* ... */
I have an annoying display issue in IE (7/8). I have some tabs that serve as navigation, the tabs have the top and bottom sections cut off for some reason in spite of my efforts to make the box bigger.
In Chrome and Firefox this all displays correctly as you can see in the images below. Note I have artificially moved the tabs into an empty area of the page so its easier to see whats going on.
How it looks in IE:
How it looks in Chrome
Now obviously IE doesn't render the rounded corners, that's fine (unless someone knows something I dont) but as you can see the height of the links in IE are smaller than Chrome and actually clip the top border off.
HTML
The HTML is simply <a> elements within a <div> like so
<div id="topnavcontainer">
<a href='/web/link1.html' class='current'>Link 1</a>
<a href='/web/link2.html'>Link 2</a>
<a href='/web/link3.html'>Link 3</a>
</div>
CSS
#topnavcontainer {
display: block;
color: #fff;
font-size: 14px;
position: absolute;
right: 0;
bottom: 0;
height: 40px;
}
#topnavcontainer a {
color: #555;
text-decoration: none;
padding: 5px 12px;
font-weight: 800;
overflow: visible;
background-color: transparent;
border: 0;
line-height: normal;
bottom: 0;
height: 40px;
}
As you can see I have tried to overcome the problem by specifying normal line-height as well as making the overflow visible. I have also tried making the links and containing div much higher than they should be just in case there was a weird height issue. Nothing seems to solve it.
Set the link to "display: inline-block;". As for IE6/7, do "display: inline; zoom: 1;" instead.
I've seen this problem happen before on block elements. The "inline-block" solution seemed to fix it.
Try adding float:left;
It's possible that your padding isnt even working.
if this solution doesnt work,
make a different CSS for IE and set a different height for IE.
also, try to put a button on your website asking your visitors to download Firefox or Chrome...
it will make the internet better! :D
Chrome and Safari are displaying a border around the image, but I don't want one. There is no border in Mozilla. I've looked through the CSS and HTML, and I can't find anything that is fixing it.
Here is the code:
<tr>
<td class="near">
<a href="../index.html"class="near_place">
<img class="related_photo" />
<h4 class="nearby"> adfadfad </h4>
<span class="related_info">asdfadfadfaf</span>
</a>
...
CSS:
a.near_place {
border: none;
background: #fff;
display: block;
}
a.near_place:hover{
background-color: #F5F5F5;
}
h4.nearby {
height: auto;
width: inherit;
margin-top: -2px;
margin-bottom: 3px;
font-size: 12px;
font-weight: normal;
color: #000;
display: inline;
}
img.related_photo {
width: 80px;
height: 60px;
border: none;
margin-right: 3px;
float: left;
overflow: hidden;
}
span.related_info {
width: inherit;
height: 48px;
font-size: 11px;
color: #666;
display: block;
}
td.near {
width: 25%;
height: 70px;
background: #FFF;
}
Sorry, I copied some old code before. Here is the code that is giving me trouble
Thanks in advance
Now I don't know if this is a bug with Chrome or not but the grey border appears when it can't find the image, the image url is broken or as in your case the src isn't there. If you give the image a proper URL and the browser finds it then the border goes away. If the image is to not have a src then you will need to remove the height and width.
sarcastyx is right, but if you want a workarround you can set the width and height to 0 and a padding to make space for your image.
If you want a icon of 36x36, you can set width and height to 0 and pading:18px
I know it is an old question. But another solution is to set the src to a 1x1 transparent pixel
<img class="related_photo"
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
This works for me.
.related_photo {
content: '';
}
This may happen when the image is planted dynamically by css (e.g. by http://webcodertools.com/imagetobase64converter) in order to avoid extra HTTP requests. In this case we don't want to have a default image because of performance issues. I've solved it by switching from an img tag to a div tag.
img[src=""]{
content: "";
}
Lazy image solution (img loading="lazy")
If you are using lazy image loading you may notice this thin thin border before the image has loaded more than if you didn't.
You're more likely to see this for a horizontal scrolling gallery than a normal vertical scrolling webpage.
Why?
Lazy loading unfortunately only works on the vertical axis. I'm assuming this is because there's a high likelihood that you're going to scroll down, but not left to right. The whole point of lazy loading is to reduce images 'below the fold' from consuming unnecessary bandwidth.
Soution 1:
Detect when the user has scrolled (eg. using intersection observer) and then set loading="eager" on each image you want to immediately load.
I haven't actually tested this, and it's possible some browser's won't immediately load images - but it should be fine.
Solution 2:
Detect when the image has finished loading loaded and then fade it in.
img.setAttribute('imageLoaded', 'false');
img.onload = () =>
{
img.setAttribute('imageLoaded', 'true');
};
Then with css hide the image until it's loaded, after which it fades in nicely:
img
{
opacity: 1;
transition: opacity .5s;
}
img[imageLoaded='false']
{
opacity: 0; // hide image including gray outline
}
Also this behavior is subject to change, the browser may be clever enough to detect a horizontal scrolling element in future - but right now Chrome and Safari both seem to have a zero pixel window for looking for horizontal lazy images.
img.related_photo {
width: 80px;
height: 60px;
**border: solid thin #DFDFDF;** //just remove this line
margin-right: 3px;
float: left;
overflow: hidden;
}
Inside img.related_photo, you need to change border: solid thin #DFDFDF; to border: 0.
I have fixed this issue with:
<img src="img/1.jpg" style="height:150px; position: absolute; right: 15px;">
The right: 15px is where you want the image to be shown, but you can place it where you want.
I just added src="trans.png", trans.png is just a 100x100 transparent background png from photoshop.
Worked like a charm no borders
To summarise the answers given already: your options to remove the grey border from an img:not([src]), but still display an image using background-image in Chrome/Safari are:
Use a different tag that doesn't have this behaviour. (Thanks #Druvision) Eg: div or span. Sad face: it's not quite as semantic.
Use padding to define the dimensions. (Thanks #Gonzalo)Eg padding: 16px 10px 1px; replaces width:20px; height:17px; Sad face: dimensions and intentions aren't as obvious in the CSS, especially if it's not an even square like #Gonalo's example.