I am having some issues with one of my html forms. It looks like because the select drop downs and the input text boxes are not the same size all my controls are misaligned in ie6. You can see that all the controls under selected date get pushed out of alignment more and more as we go down. This does not happen in firefox.
I am using yaml as my css framework and I thought that it would be covered but it doesn't seem to be. Can someone please give me an idea on how to make the controls the same size or give ma an idea on an alternative fix.
I've put the html for the form here.... http://pastebin.com/cVrVadQf
thanks
To fix this I just piggy backed onto yaml conditional css foe ie6. I added my own stylesheet as you can see below...
<!--[if lte IE 7]>
<link href="resources/css/custom-myer-ie6.css" rel="stylesheet" type="text/css" />
<link href="resources/css/yaml/yaml/core/iehacks.css" rel="stylesheet" type="text/css" />
<![endif]-->
Then added some simple styling to make sure alignment was ok...
.ym-form .ym-fbox-select select#businessDateFilterType,
.ym-form .ym-fbox-select select#exceptionFilterType {
margin:2px !important;
}
.ym-form .ym-fbox-select select#registerFilterType,
.ym-form .ym-fbox-select select#teamMemberFilterType {
margin:4px !important;
}
.ym-form fieldset.border {
border: none !important;
}
Related
I have a weird issue where IE8 doesn't appear to render my background image using imported CSS.
Because of IE8's problematic issues and its lack to support many CSS3 elements, I am forced to use conditional logic to load specific stylesheets for my site content. I am using MVC4 and my _Layout page has the following in the header:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<link href="#Url.Content("~/Content/DeprecatedSite.css")" rel="stylesheet" type="text/css" />
<![endif]-->
<!--[if gt IE 8]>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<style type="text/css">
.gradient {
filter:none;
}
</style>
<![endif]-->
In my deprecated.css file I have the following:
#main {
background:url('/Images/iecollage.png');
background-repeat:no-repeat;
width:100px;
}
In my site.css, I have this comparable code for the same ID tag:
#main {
background:url('/Images/collage.png');
background-repeat:no-repeat;
background-size:920px;
width:100px;
}
I had to use 2 differently sized images and attribute definitions to correct the way the browsers interpreted the Markup. I am comparing the results using IE8 and Chrome.
When I launch the site, the home pages reflect the appropriate corresponding images and renders everything as expected.
My problem occurs when I navigate to another page which resides outside the Home directory (if that really makes any difference with respect to the issue).
The page has the following in-line code:
<div id="spotlight" style="position:relative;left:-50px; top:2px; height:820px;margin: 0;width:650px;">
In my Site.css file I have the ID styled as such:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
width:100px;
}
In the Deprecated.css the style is:
#spotlight {
background:url('/Images/orange_spotlights3.jpg') no-repeat;
}
In Chrome, the style gets loaded from the imported stylesheet. But in IE8 I get a blank area where the image should be loaded.
The quirky behavior I noted is that if I were to remove the following lines from the Site.css file, then both Chrome and IE8 will render the image but I loose the transparency effect in Chrome which is not the intent of separating the ID's to different stylesheets.
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
opacity:.60;
Its as if the 2 stylesheets are confusing the browsers or something.
Any explanation would be greatly appreciated.
As it stands, I am thinking of simply scrapping any support at all for IE8 because its getting to be too much of a bother trying to create 2 different accomodations to render the elements.
If you're using MVC it may be a problem with the absolute path which is kind of what it sounds like is happening. (Try pulling up your developer tools in Chrome or FF and check out the console while doing a page reload see if you get a 404 on the image GET request)
You can try something like ../../Images/orange_spotlights3.jpg where each ../ is one folder level up. You could also look at using a helper like #Url.Content("/images/orange_spotlight3.jpg") or try the absolute path all together.
Ok, after doing some blundering with the stylesheets I managed to get both to play together. What I ended up doing was retaining the comments for all the previously mentioned lines in the
Chrome stylesheet except for opacity:.60
So my stylesheet that will be used to support all other browsers other than IE8 now looks like this:
#spotlight {
background:url('/Images/orange_spotlights3.jpg');
background-repeat:no-repeat;
opacity:.60;
width:100px;
}
The other stylesheet for IE8 remained as is and both pages render the image appropriately according to their assigned stylesheets.
Apparently the following attributes don't work well in IE8 and can obviously cause problems:
-khtml-opacity:.60;
-moz-opacity:.60;
-ms-filter:"alpha(opacity=80)";
filter:alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.6);
I have tested this using Firefox, Chrome and IE8. I have not seen if there are issues with any other browsers but I would imagine this should work with Safari as well.
What I still have no explanation for is why those elements affected IE8 browser when they clearly did not exist in its assigned stylesheet.
In the next revision of this site, I will definitely drop support for IE8 altogether. As much as I'd like to make it available to users having out-dated versions of IE 8 and earlier, its just added labor to try to keep up a dead horse. :-)
<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="/a/s/major-market/non-reponsive.css" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/a/s/major-market/ie7.css"><![endif]-->
I have conditionally included this two statements. Now when I try to ovveride a similar css in ie7.css it doesnot work. for example
In non-reponsive.css:
.header .features{
width:25%;
}
In ie7.css:
.header .features{
width:20%!important;
}
This is not working for some reason. please help me figure it out.
Ensure that the IE 7 conditional include is located below all other CSS declarations/includes within the page otherwise it will get overruled.
I am quite sure ie7.css is not loaded at all. !important would override anything in other stylesheets. Actually, if ie7.css comes after non-responsive.css, !important is unnecessary anyways.
That's the most I can tell by looking at the information you have provided.
So I am forced to use conditional style for IEs via the [if IE] comment. I have been trying to fit it in my code but I found some inconsistency that I cant explain.
If I use it like this
<!--[if IE]>
<style type="text/css">
#SomeName {
width: 100em;
}
</style>
<![endif]-->
it will just not work.
However, if I put the style in a css sheet and add a link to it, it works.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href=".../sheetName.css"/>
<![endif]-->
Is there a way for me to put the style inside the [if IE] tags rather than linking it through the tag? it just looks wrong.
Thank in adavance
Nothing wrong with your code.
Make sure that #SomeName is as such in the html (beacuse css rules are case-sensitive), and make sure that you include your code after the normal css include (to avoid having the rule overriden by what is in the normal css)
The first code snippet should work just fine if you are using the correct CSS selector. Make sure you are using the exact selector you need to adjust. However the selector is being used in your normal stylesheet, just copy and paste it into the conditional tag and change whatever you need to change in regards to width or whatever.
I'm putting a ul list in a div which is below a second div. The vertical gap in chrome, ff etc is a little long. So, I'm puting a 10px negative margin on the ul div. Looks great except in IE. With the negative margin, the list is almost overlapping the title text
I have done a lot of reading re inline: block; zoom: 1; position: relative etc, but can't seem to get the page to display right in IE. Bit of a newb on css so specific directions on what has to be applied to what div would be appreciated..
simple for the experts I expect
THANKS
Randall
You should use the [if lte IE(?)] conditional comments to make adjustments to IE only.
A conditional comment link looks like this:
<!--[if lte IE 7]>
<link type="text/css" rel="stylesheet" href="ie7.css" media="screen" />
<![endif]-->
and your link should go in <head>, with all your other css links.
Note
if you are overriding standing css rules in your IE style sheet you may need to use !important etc.
Edit
The lte in the conditional comment means less than or equal to. You can remove it completely to target only one IE version.
See: http://bit.ly/cq4bYF
Problem is the vertical-alignment on the carousel and < > buttons. Chrome and FireFox load accurately. IE7/IE8 the elements should be another 20px lower.
Anyone know a Solution?
Thank You!
Looks like you have to make a new style sheet to fix this, make a new stylesheet, and put it in a conditional statement under the stylesheet you already have in your header. Then in the new stylesheet put the following code. That should work. If you can't figure out how to create just an IE stylesheet go to http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
#header_slider{
z-index:1;
position:absolute;
margin-top:20px;
width:500px;
height:320px;
overflow:hidden;
}
To get the Conditional statement put the following code under where you have the stylesheet called
<!--[if IE ]>
<link rel="stylesheet" href="The/url/to/your/new/ie/stylesheet.css" />
<![endif]-->