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]-->
Related
I have been trying to solve this for 2 hours now but no luck. The less code snippet works fine in all browsers except IE8. I checked IE8 supports :after and :before
I'm using standard IE8 doctype, using HTML5 shiv and also not running this in compatibility mode?
#media print {
.app-header .large-header {
.logo span,
h1,
.action-links {
display: none;
}
.logo:before {
content: url('images/logo.png');
position:absolute;
top:0;
left:0;
width:150px;
height:28px;
}
}
}
UPDATE
Issue is that IE8 doesn't support printing content url. The workaround is to use an image instead.
IE8 does not support media queries this: #media print {} is not supported.
create a separate css for IE8 and in the HTML put a conditional like this:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" media="all" href="style-ie.css"/>
<![endif]-->
See for yourself https://msdn.microsoft.com/en-us/library/ms530813(v=VS.85).aspx
Dynamic HTML (DHTML) expressions can be used in place of the preceding
value(s). As of Windows Internet Explorer 8, expressions are not
supported in IE8 Standards mode. For more information, see About
Dynamic Properties.
I don't know about your markup but is it an option to remove the background image of the logo and use an actual <img> tag for it?
That way you would not need to change a lot of styles for printing pages. You should also keep in mind that there are a lot of printers out there, which disable background-imagery and background-colors by default!
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;
}
<!--[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.