CSS cross browser compatibility with Select element - html

I have a form select element with the following CSS:
border:solid 0 #000;
background: transparent url("../images/input_fld.png") no-repeat;
height:42px;
width:275px;
padding-left:10px;
padding-right:0px;
font-family: monospace;
This generates the select box like this:
Webkit
Moz
IE
How can I fix this?
I tried adding this for IE:
<!--[if IE]>
<style>
form select {padding-bottom:10px;}
</style>
<![endif]-->
And while this does fix the issue of the text being bottom aligned, it introduces the issue of also pushing the down arrow up by 10px.

If you're not averse to using a JQuery plugin, you can trying using http://www.verot.net/jquery_select_skin.htm. You'll have to style it a little bit but that's fairly simple.
The plugin doesn't have support for IE6, but I believe that's always for the best :) Also, try adding a line-height to your CSS, equal to the height of the select box, in this case, 42px.
Hope this helps.

Related

IE9 conditional statement not working?

I have created a very simple Wordpress theme for my university for Blackboard news/updates/mtc.
The theme looks great in the latest versions of Chrome, FF, and IE10. However there is a weird glitch in IE9. The reason I must support IE9 is because that is the browser that Blackboard recommends using for functionality purposes (when someone insists on using IE). My supervisor wants the blog to look the same in IE9.
So, my main menu looks fine, padding is fine, and no collapse when resizing the window; here is the class that is causing me problems in IE9 ("Home" menu padding is cut off; the menu collapses):
ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
So I try to add a conditional statement of:
<!--[if IE lte 9]>
<style type="text/css">
ul.mainnav {
float:left;
width:100%;
margin:0;
list-style-type:none;
Font-Family:Arial, Helvetica;
Font-Size:10pt;
Font-Weight:Bold;
background-color: #006AA6;
white-space: nowrap;
list-style: none;
min-width: 1000px;
margin-left: -15px;
}
</style>
<![endif]-->
However the conditional statement, even though nothing has changed, messes everything up in both FF and IE9.
Even if I mess with some of the elements in the conditional statement ideally to trial/error a fix/hack, it still looks like nonsense and is messed up.
What am I doing wrong? And can anyone suggest a possible fix?
The link to the live blog, (I am working on fixing this on my local machine):
http://blogger1.uhcl.edu/UCT/blackboard/
TIA
The two most obvious problems are:
a) You need a space between IE and the version number, e.g.
<!--[if IE 9]>
While you're at it you may as well make it less than or equal to IE9, i.e. <!--[if IE lte 9]> as it happens in (at least) IE8 too.
b) You need to close the style tag within the conditional.
That said, the -15px left margin seems to be the cause of the issue; not quite sure why that's required.

Button element styled with CSS is not showing the background-image in IE6

I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.
My following HTML and CSS works fine on IE 8, but not in IE 6.
HTML
<button id="add">Add</button>
CSS
button
{
width: 110px;
height: 28px;
background-image: url('../images/button.png');
background-color: transparent;
border: 0px none #ff0000;
cursor: hand;
font-family: Myriad Pro, Helvetica;
font-weight: bold;
font-size: 12px;
color: #ffffff;
}
Using CSS, how can I get the background image to show in IE 6?
Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.
Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.
If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.
Although, again based on memory, if you can change it to an input (attribute type="image") you might be able to get the effect you want even on IE6.
Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).
The background-image property that worked in Firefox 2.0 just did not
have any effect on IE6. After a bit of googling, I realized that the
background-image property will not work on IE and that we need to use
the background property.
This is what works for me:
button
{
background: transparent url('../images/button.png') no-repeat top;
}

CSS3 rounded image corners not working in Safari/Chrome?

I've merrily hacking away at this website, testing it in Firefox and Internet Explorer 9, taking for granted that Safari and Chrome will render my CSS3 fine, when I've just discovered they don't.
In FF and IE9 I see this:
In Safari/Chrome I see this:
Here's the HTML:
<div class="container">
<div>
<img src="static/images/image1.jpg" alt="" />
</div>
Here's the CSS:
.container {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
What am I doing wrong? :(
UPDATE
Please see a working example of the problem I'm having: http://jsfiddle.net/jAsnU/3 Thanks.
try:
.container img {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius: 10px;
}
Try adding "overflow:hidden;" to the style of the div. I made a quick test page up at jsfiddle and it seemed to work (tested it in Chrome, Safari and FireFox): http://jsfiddle.net/wabw8/
You might want to try to set the border radius on .container div img.
I think you need to specify a border.
So, something like this:
border:1px solid blue; //whatever blue you are using.
It looks as though FF and IE are giving you the rounded border... but as a blank item that is cutting off the image.

HTML/CSS IE Not displaying my dropdown menu z-index related

For some reason I cannot display the dropdown menu on IE when I add a z-index in the header of any number. When I remove it, it works. However the dropdown then appears behind the container and content in Firefox and Chrome. So either I take it out or leave it in, I cant seem to satisfy all browsers. So i tried making a separate IE stylesheet without the z-index but that doesnt work either. I know the separate IE CSS is working because I changed the backgrounds but it uses the dropdown menu in the master stylesheet.
Website is www.stingrayimages.ca
Thank you for your help
Edit: So lets just say i got it all to work on IE since its always IE that gives the problems. But now the dropdown menu appears behind the content on other browsers like firefox and chrome. All i did was remove the z-index in the #head div. Anyway to fix the dropdown menu without adding z-index to the head div?
Edit: I got the dropdown to work on IE9 firefox and chrome. Not IE 6, it just blew up.
#head {
position:relative;
height: 140px;
width: 100%;
background: #FFF;
filter:alpha(opacity=93);
padding-top:20px;
/* CSS3 standard */
opacity:0.93;
-moz-box-shadow: 0 0 5px black;
-webkit-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
z-index:1;
}
OK so I had a look and there's good news and bad ;)
the opacity filter in the #head div means that overflow: hidden is being triggered, which is why no menus (it's the unfortunate side effect of filters and overflow I'm afraid).. remove that and you can have your z-index which you need anyway
next to get the transparency (opacity) for your dropdowns you can just use rgba(255,255,255,0.9) on the #nav ul li ul rule instead of #fff; (though leave #fff before that rule for fallback for browsers that can't do rgba() yet.. read more!)
That's nearly everyone happy - now you can also do rgba() transparency for IE using the gradient filter..
so the rule I landed up with looked like this (in an IE conditional comment):
#nav ul li ul {
zoom: 1;
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E5FFFFFF,endColorstr=#E5FFFFFF); /* IE6 & 7 */
/* behavior: url(PIE.htc);*/ /* yuk filter */
}
and I thought it would be good to go..
BUT the Bad News
the behavior is commented out because you can only have one or the other, transparency or rounded corners, :( apparently
I didn't do too much research though so YMMV
I also noticed a problem or three in IE7, not sure if you want to support that but in case you do.. or want to check my final code which got it to this stage I pasted it in PasteBin
that code replaces your main CSS - the #head rule and whole /*navigation*/ section
Update: more good news and a little bad!
you can have the transparency and the rounded corners thanks to CSS3 PIE's own -pie-background property, but not the box shadow as well, the way PIE deals with box shadow means it fills the div instead of just drawing on the outside so the -pie-background reading of the rgba background is transparent but shows the grey color used for the shadow!
My solution:
I added a border to make up for loss of box-shadow, it's not looking too bad, and it's working across IE's ;)
here's an update to the I conditional comment above:
<!--[if lte IE 9]>
<style type="text/css" media="screen">
#nav ul li ul {
box-shadow: none;
-pie-background: rgba(255,255,255,0.9);
border: 3px double #eee;
border-width: 0 3px 3px 3px;
behavior: url(PIE.htc); /* yuk filter */
}
</style>
<![endif]-->
I am not sure which version of IE you are having a problem with but I tried in IE6 and IE7 and the menu system is completely broken. I don't have IE8, 9 or 10 here to test but I'll take a guess at a solution nonetheless!
If you add a z-index and position to the #container as well, it should solve your problem. z-index only applies to positioned elements.
#container {
position:relative;
z-index:0;
}
It is also worth reading Overlapping and z-index, which summarises the properties and also describes the problems when using z-index and IE.
Edit: Wow, I did not realise what was wrong until I found a machine with IE8 on it. I think you have misunderstood the standard CSS and IE specific CSS principle slightly. The IE specific CSS file(s) should only contain the properties that are different to the standard ones. Your ie-style.css file contains duplicates of all the rules and is being included for all versions of IE. IE8 is much more standards compliant than IE6/7 and you should rarely have to override CSS for that version.
So IE will have multiple copies of the same style being applied. Under normal circumstances most browsers can cope with this duplication, however one of the duplicates is the IE specific filter property.
You have filter:alpha(opacity=93); in both style.css and ie-style.css even though it should really only belong in an IE6/7 CSS file as IE8 filters work differently. If you remove the filter from both stylesheets then the menu correctly displays in IE8.
If you need the opacity to work in IE6 or IE7, I suggest creating a specific CSS file for those browsers and using conditional comments to include it just for those versions.
Have a look at this solution : http://webdemar.com/webdesign/superfish-jquery-menu-ie-z-index-bug/
Another solution that I used already is quite easy, but a pain in the *. You must all the parent container a specific lower z-index value than the one you want to show on top of the others.
Like so :
<parent>//z-index 1
<child>//zindex 2
<yourdropdown>//z-index3
Update 1
The menu didn't show correctly in my chrome so I fixed the #head z-index to 80 and it did way better. Do the following to get the layout the same in IE and Chrome and Firefox. Watch out though, I only tested those change on the homepage.
Add this to the .conbox class :
.conbox {
position:relative;
}
Place the logo correctly
#logo {
position:absolute;
left:0px;
top:0px;
}
Remove the #nav positioning
#nav {
margin-top:80px;
z-index:3;
}
The problem is, I can't even see any effect on the menu mouseover in IE!!
Setting z-index: -1 for elements that menu overlays and z index of men div resolved this problem for me.
#bodyWrapper
{
background: none repeat scroll 0 0 #E4F7FE;
overflow: hidden;
position: relative;
width: 100%;
padding: 0 0 60px;
z-index: -1;
}

HTML / CSS Setting for Opera

body
{
padding:0px;
background:#2786f4;
position:relative;
margin:0;
color:#818181;
text-align:center;
}
<!--[if IE]>
<style>
#Right
{
width:202px;
background:#f1f1f1;
padding:8px;
position:absolute;
top:130px;
left:945px;
float:right;
text-align:left;
}
</style>
<![endif]-->
<div id="Right" >
sadlf ljas dfjlsdjflsfjsl a;sldjf ;slfj
</div>
I am facing a positioning problem while creating a HTML. It looks okay in all browsers except Opera.
How it will okay in Opera too ?
You have a conditional comment that only works in IE. In IE, I see a light grey box on the right with the text in it.
All other browsers (Opera, Firefox Chrome) don't see the style for #Right and thus don't apply it. So they just show the grey text at the top.
It's not clear what you want to do, but if you want to hide that text completely from non-IE browsers, move the <div> inside the conditional comment, i.e. before <![endif]-->.