I have a textbox(A GWT-widget), that uses a png-background image to create rounded corners.
This works great in all browsers except ie(ie7 & ie8), where it repeats the image(even though I've used no-repeat), making the textbox look really ugly. Anyone encountered this problem before?
#sprite .textBoxVerySmall
{
gwt-image: 'textBoxVerySmall';
border:0 none;
float:left;
overflow:hidden;
width:42px;
text-align:center;
background-repeat:no-repeat;
overflow:hidden;
position:relative;
}
With Jquery UI it's as simple as adding the class "ui-corner-all" to the element you want to round. No images to mess with, clean, and gracefully degrades on the "Evil browsers"
And, as a bonus, comes with amazing Calendar, Tab, Modal, and Tooltip widgets, just to name a few.
I had the same problem. The reason was malformed html. I had not terminated div and block elements inside inline elements. When corrected, background were fine.
Check your html validity.
Related
I'm having trouble with a specific browser/device which I need to serve for my website.
Essentially, I have anchor tags which display a hidden element when clicked. This works as intended on everything (Firefox/Chrome/IE on PC, Android FF/Chrome/Browser) except iOS. When clicking the "View Bio" link, the text should transition in and be displayed. When doing this on iOS a grey box hovers over the element (so I assume it knows there is something there), however it does not show the hidden element.
After doing some research I can see that there may be an issue with the way iOS deals with "onclick" or something to that effect. I have tried to implement a few different things (mainly java-based) though they haven't worked. They may not actually be what I need to do, as this implementation is purely HTML/CSS based, but I've tried everything I've come across. Most of the fixes involved generally don't involve hidden elements, and are more often simple "scroll to point" implementations. It's likely the same thing.
As far as I can tell, there is some sort of bug or dislike of anchor tags with iOS, from the articles/existing help pages I have read. It may not be applicable, but according to some users iOS does not serve "onclick" or "click", and rather uses some form of "touch".
Is there a workaround to this? It shouldn't matter if it's a little messy, so long as it serves iOS users as intended. If there's a way to listen for a "click" and treat this as a "touched" for iOS that would probably be the simplest solution. I'm no expert, so I could be well off the mark.
My code:
<div class="dimg">
<img src="images/profile_1.png" alt="director1" height="200" width="200" class="img-responsive" style="border:2px solid #535353;">
</div>
View Bio
<div id="desk" class="trans">
<p>This is the text to be displayed when the anchor is clicked</p>
CSS:
.showme {
text-decoration:none;
color:#535353;
letter-spacing:1px;
}
.showme:focus + #desk {
opacity:1;
visibility:visible;
position:relative;
}
#desk {
visibility:hidden;
opacity:0;
position:absolute;
border-radius:10px;
margin-top:10px;
text-align:left;
}
There is a problem with CSS :focus on iOS Safari.
The answers from this question seem to work. You need to add tabindex="1" to your link:
View Bio
https://jsfiddle.net/1kqxopzs/
This css style is working perfectly on all browsers when the site is on LOCALHOST.
but when I uploaded the site to a live server, It also works on all browsers except IE.
The background-image don't show.
.button {
font-family:Arial, Helvetica, sans-serif;
display:inline-block;
position:relative;
background:url(../images/button-bg.gif) 0 0 repeat-x #3b3d3e;
border:1px solid #3b3d3e;
font-size:11px;
color:#fff;
font-weight:bold;
text-decoration:none;
padding:1px 9px;
margin-right:7px;
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
behavior:url(js/PIE.htc);
}
NOTE: as you can see I use the color #3b3d3e with the background, and when the page loads I see this color for a part of a second, and then it disappears.
what is wrong with this?
I believe background should be written out in this order:
background: color position size repeat origin clip attachment image;
Maybe IE is the only browser that cares?
If that doesn't work maybe try adding each background value you need seperately:
background-color, background-position, background-size, background-repeat, background-origin, background-clip, background-attachment, and background-image.
Also as a side note you might want to try commenting out the last line in the css "behavior:url(js/PIE.htc)". I know sometimes these things like to conflict with other properties. I have never used PIE myself, but its worth a shot commenting out.
Color first:
background: #3b3d3e url(../images/button-bg.gif) 0 0 repeat-x;
Try adding zoom:1 to .button
This triggers the hasLayout property on IE7.
Detailed explanation here:
On having Layout
I think I got it fixed but still don't know what is the reason...
I removed the
behavior:url(js/PIE.htc);
from it, and it worked perfectly...
I'm pretty sure that the file PIE.htc is there but I don't know what is wrong.
anyone??
I haven't tried this on my site yet, because the server has been down but it might be worth looking into Modernizr http://modernizr.com/
I had a hard time getting background images to show moving from local to my server, and what I ended up having to do was use the full path of the image.
If it is infact a browser confliction problem, this should help solve it.
Also, have you tried commenting out behavior:url(js/PIE.htc);?
This could be what's giving it fits.
When i put a background-image in my CSS, I type it like so:
background-image: url("path/to/image.img"); background-repeat:no-repeat;
background-color:#color;
I see you tried this, and I'm trying to think of several options, would working with the Z-index affect what you are trying to do?
Give Modernizr a look over
It may be a relative path issue between localhost and server environment. See the detailed explanation on the CSS 3 PIE known issues page.
http://css3pie.com/documentation/known-issues/#relative-paths
Was PIE working at all? — Were there rounded corners on the button on IE 7?
This may be helpful too.
http://css3pie.com/documentation/known-issues/#z-index
I think I asked about the opposite problem a while ago (allow mouse event to pass through a transparent area on an image - I ended up using an imagemap for that) but anyway:
I need a mask element for when a dialog comes up. In the past I've used:
position:fixed;
left:0;top:0;right:0;bottom:0;
background:#000000;
opacity:0;
filter:alpha(opacity=0);
And it works, but it's kind of a "hack".
I've not been able to get an element with background:transparent to intercept mouse events. Is this intentional? Is there any way around this other than the above? Or is the above the best solution for this problem?
The issue with background:transparent appears to be specific to IE (tested in IE7/8/9). It's not an issue in other browsers.
It's also specific to HTML form elements. For instance, it works fine in IE for text inside a paragraph tag but not for a button tag. Most likely it's a rendering bug in IE, rather than the result of a deliberate engineering decision by Microsoft. There used to be a similar issue in IE6 with select boxes not layering correctly with position:absolute.
It'd be safer to use opacity than background:transparent in this case. It may feel less like a hack if you change the opacity of the mask to make it partially transparent instead of fully transparent.
In this website: http://www.blackblot.co.il/kb/ I can't make the anchor ( tags) to show tooltips in IE.
It works in chrome and Firefox.
what makes it even harder to understand, is it not happenening in all the tags, but only these in the content section.
for example, the links on the left side are showing the titles, but the links in the content, altough has it, won't show it.
I checked for CSS manipulation, or js code, but nothing really stops it from showing the titles.
really need help here. Thanks
I checked out the source code and found out that the anchors didn't have titles. Did you try putting titles in those anchors? That should work in my opinion.
OK
I found the solution. which is not a real solution - but it something in IE was absolutely wrong.
it is clearly a bug in IE. Anyway, if someone have the same problem.
I have dicided to take off the css and see if I see the tooltips without any css. And then I saw it.
So I had to debug 500 lines of poorly written CSS. Among these 500 line there were 3 declarations that caused this bug. I found that when I use F12 (developer's tools of IE) the positioning of the element was not in it's actual position on the page. Please see image attached.
So I tried to figure out which css declaration causing this. For some reason 3 declaration of 3 div's padding had to be removed in order for this to work.
the CSS lines are as follow, the commented code is the bad guy:
ul,ol,dl,p,h1,h2,h3,h4,h5,h6{margin-top:10px; margin-bottom:10px; /* padding-top:0; padding-bottom:0; */}
div.post,div.page{display:block; margin:0 0 0px 0; border-bottom:solid 1px #eee; /* padding:20px */}
div.post-bodycopy p{margin:1em 0; /* padding:0; */ display:block; font-size: 13px;}
Okay so this is sort of a double question so I'll split it into two.
First part
In modern browsers the main bold labels sit above their corresponding form elements, and align to the left as is expected. However in ie7, they randomly site 10-15px inset. I went through the developer tools and could find nothing to fix it. I've made sure all my margins and padding is reset so I don't really understand =S
Here's the page demo - link
Maybe some of you ie bug fixing genius's know what the problem is? =D
Second part
Again with labels, this time the in-line ones resident next to the check boxes and radio buttons. In modern browsers again, the side beside the form elements as expected, but not so in ie7 where they take a new line. I've tried floating, changing margins and everything but to no effect in sitting it in-line with the div.checker or div.radio that is created by the uniform Jquery plugin.
Here's the page demo - link
Sorry for troubling you with my ie7 problems, I know they arent the most fun to solve. Hopefully someone has the patience to help.
Matt
Part 1:
ol,ul{
list-style-type:circle; list-style-position:inside;
}
If you change that to this:
ol,ul{
list-style-type:circle;
}
Or just remove the definition entirely, that seems to do it for me.
I think that's a reasonable thing to do, as I don't see anything actually using the bullet lists.
Edit for Part 2:
IE doesn't like this:
input{
background:#FFFFFF url(../images/input_bg.png) repeat-x;
border:1px solid #CCCCCC;
margin-bottom:20px;
-moz-border-radius:3px;
padding:7px;
-webkit-border-radius:2px;
}
If you remove the margin-bottom:20px; from that, your radio button won't be messed up.
Sorry I'm not really providing IE7 specific solutions, but at least you've got the spots that need fixing.
here's a point to where the problem lies
http://www.alistapart.com/articles/beyonddoctype
here's some points about doctype right here in SO
Which doctype do you use when writing webpages?
:)