I Have tried this
select
{
border:0;
}
<select>
<otpion value='male'>Male</option>
<otpion value='female'>Female</option>
</select>
its not working in IE6, IE7
See this question and its answers, here on stackoverflow.
(Short answer: It can't be done. There might be complicated workarounds, though.)
As far as I know, this is not possible in IE6/7 as the elements in question are controlled by the OS, not the browser. That's why they look different in Windows compared to Mac. Some browsers let you style them to some degree with straight CSS, but definitely not all.
But fear not, if you're willing to dig into some extra code, you can use something like this demo. It uses the jQuery UI, which is helpful for many, many other things as well.
Another example would be this here and this one too, along with the popular jScrollpane.
Hope some of that helps. :)
The following worked for me, in both FF and IE9:
outline:0;
Select boxes, like most form elements are "native objects" in IE. Meaning, the look and feel is largely dictated by the OS. Assuming you remembered to wrap the CSS above in a style tag then if the code doesn't work it probably can't be done.
select { filter:
progid:DXImageTransform.Microsoft.dropshadow(OffX=-1,
OffY=0,color=#525252)
progid:DXImageTransform.Microsoft.dropshadow(OffX=1,
OffY=0,color=#525252)
progid:DXImageTransform.Microsoft.dropshadow(OffX=0,
OffY=-1,color=#525252)
progid:DXImageTransform.Microsoft.dropshadow(OffX=0,
OffY=1,color=#525252); }
Related
Problem:
Thanks for taking the time to read this. I'm having a problem which I need to solve as simple as possible. There's a website I'm re-developing, but since I updated to IE8, I've totaly forgotten about IE7, but ofcourse, there are still people using it.
I need to know what specific things I should change for this site to display the same way as it does in IE8. But I don't know where to start. Is there anyone with experience in this, who can give me a guideline? Are there scripts for doing so?
URL: http://www.testsite.c-tz.nl/
If you view this with IE8 it looks perfect.
But if you view it with IE7, things are not where they supposed to be, very ugly.
As the other said, your question is to broad. You'll need to break it down in smaller problems - which will possibly help you solve it yourself along the way.
One thing I did notice: IE has problems with display: inline-block on elements, which were orignally block elements. Either use span (only possible if it doesn't contain block elements), or use another method to places blocks side by side such as float.
BTW, you have far too many divs in your HTML. It's not necessary to wrap every img, every ul, etc. in it's own div. Usually any styles you apply to the div can just as well be applied you the "wrapped" element directly.
This is not a cool idea... But you can try when you are sick with very old browsers like ie6 or ie5 ...
1.use javascript to detect the browser and version..
2.later use the similar way to redirect the visitor to download the IE 8..
<script>
if(''+browserName+''+fullVersion+'' == "Microsoft Internet Explorer6.0" )
{
alert("You're using an Old Browser.Update the browser to view the website.(or) Try Latest Google Chrome , Firefox , Safari, Opera")
window.location = "http://www.microsoft.com/download/en/details.aspx?id=43"
}
//document.write(''+browserName+''+fullVersion+'');
</script>
Filters like
img {filter:flipV;}
I'm guessing are pretty old, I just was asked by a colleague why they weren't working for him in FF. I assume they were an IE only thing that died out a while back?
Yes, it is IE-only. They didn't die-out, they were just a bad idea to begin with.
They were the only way to do some things in IE, for example PNG transparency in IE6...so they're still around. Web developers everywhere are hoping they die :)
Even in the latest jQuery UI files you can find it being used for Alpha transparency: http://dev.jqueryui.com/browser/trunk/themes/base/jquery.ui.theme.css
By no means are they gone...unfortunately. At this point, I'm hoping they don't stick something like this into IE9 and call it a "feature"...
You may find this article interesting. While filter is IE only, there is a Firefox equivalent (opacity) which is part of the CSS3 recommendation.
They are pretty old and work only in IE. Bad, don't use them unless you are targetting only IE (not good again). There are some things in CSS3 not supported by IE, you can sometimes use these filters to get around things.
For example, box shadow effect can be easily done with CSS3 but IE again does not support that, you can use these filters for IE and normal CSS3 for other browsers to create a cross-browser solution.
can anyone help with this.... http://www.apolloensemble.co.uk ....looks like the problem is the menu bar but I'm fairly new to this and am not sure. Its fine in FF and IE (7 & 8). Tried various cross-browser issue checks but can't find anything that looks significant. Thanks!
From SpryMenuBar.js:
Copyright (c) 2006.
Look like they didn't take into account that Safari has been improved the last few years. I see several browser checks and browser-specific hacks which aren't applicable anymore nowadays. The web keeps changed, the techniques get improved quickly. This all can just be done with only CSS.
Contact the original authors for an update. If in vain, create one yourself with help of CSS (great Google keywords: "css suckerfish menu") or maybe with jQuery.
You should specify the padding of the menu ul. It has a -webkit padding of somesort. if you can edit the css change the following:
ul#MenuBar1 {
padding: 0;
}
I've found some references to bugs or issues in IE's interpretation of CSS, but the information seems rather scattered. I'd like to have a pointer to a comprehensive overview, if such an overview exists.
edit: it's already something that Microsoft is willing to list IE's CSS problems (thanks mouviciel->sanchothefat), but they're not going to offer workarounds, obviously. So workarounds would be nice too.
Thanks
Check out Quirks Mode. It is a great resource for CSS compatibility across browsers.
I find the best policy to avoid pain is to follow these rules:
Build in a more-compliant and developer-friendly browser like firefox first, test thoroughly in IE (and safari/chrome(webkit) and opera) later
Use a strict doctype- avoid quirks mode, since quirks are by definition not standard
Use a reset style sheet
Use a javascript framework like jQuery or Prototype - they can hide some javascript and DOM incompatibilities.
Use good semantic layout- it's more likely to degrade nicely for a mis-behaving browser
Accept that it won't be perfect and don't sweat the really small variances
Follow those rules I don't have as many problems in the first place.
Me, I use the "Internet Explorer Exposed". Very in-depth resource.
I find myself constantly referring to this page:
http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
You may find some answers by consulting this SO question.
For dropdownlists:
<select>
<option value="1">1</option>
...
<option value="N">N</option>
</select>
CSS border styles do not work:
If you'll try:
select
{
border: solid 1px #0000ff;
}
nothing will happen.
Also a submit button will expand its width proportionally to the button text, until you give it the style:
input[type="submit"]
{
overflow:visible;
}
As well as many other funny things. :)
I swear by PositionIsEverything.
They maintain a list of bugs/oddities in most browsers. Check out their exhaustive list of Internet Explorer bugs, I hope you find it comprehensive enough.
quirksmode has already been posted, but I'll add On having layout, which explains one of the principles underlying many of IE's oddities.
I have been working on a webpage. It is the first I have actually tried to design using an image and then use proper CSS layout rather than tables.
http://www.roccocammisola.com/proj/brunel/bgimage.html
I have been having issues with the shadows on either side of the main content area. Of course these are only an issue in IE. As you can see the shadow has been cut down to about 10% of its actual height.
With my relative inexperience how do I look for relevant fixes to this issue.
Any help would be very much appreciated.
FireBug, the most crucial tool for debugging CSS, amongst other things.
get it here
IE Web Developer Toolbar
It's not as good as firebug in general, but it helps when you have an IE-specific problem.
In addition to Firebug, making sure your HTML is valid is an invaluable tool and can minimize CSS headaches. Sometimes your CSS may not work right because there are mistakes in the HTML. The different browsers have different ways of dealing with improperly written HTML which can sometimes make it seem like there's a cross-browser CSS issue. The validator can help you find mistakes in your markup.
http://validator.w3.org/
+1 for FireBug
In this particular case, I'd just suggest a new approach for your shadows. Currently, you have them as items. You typically want to use CSS background images for things like this.
.mainShadowRight {
*/ your other stuff */
url('images/mainShadowRight.gif');
}
Your .mainShadowRight CSS class specifies a min-height (which IE6 doesn't understand, and IE7 doesn't always 100% get correctly)
and as DLarsen pointed out, it appears you are missing the background-image: url(); bit.
Thanks for all your answers, seems to have done the trick.
I think I spazzed out with the upload as I should definitley have had the bg-image stuff there.
That IE web developer toolbar looks pretty good too as I have firebug and web developer bar for FF.
Another hot recommendation for debugging CSS - CSS Viewer.
It's a Firefox add-on that allows you to hover over elements in a web page and see their exact style. Often you figure out that the final style was not what you meant, possibly due to some inheritance of styles.