I have a gallery in which i'm using the figure and figcaption tags. This displays fine in all modern browsers but in IE8 it breaks the CSS for the figure and figcaption tags because the browser doesn't support them. Just including the html5shiv library doesn't fix it. Is there a method within that I would have to call?
the problem was that the figure element did not automatically size to the picture it contained so it needed to be specifically set in the CSS
I ran into this same issue and found that it stemmed from specifying max-width: 100% for img elements. If I remove this declaration, IE8 renders the images at the appropriate sizes. Unfortunately, it means they won't responsively size on smaller screens.
The best solution I know of is to specify max-width: none using a conditional comment that's applied only in IE8 and earlier:
<!--[if lt IE 9]>
<style rel="stylesheet">
img {max-width: none;}
</style>
<![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 tried adding a conditional css style for Internet Explorer but it isn't working.
I've tried
<!--[if IE]><style type="text/css">nav{letter-spacing:.5px}</style><![endif]-->
<!--[if IE]><!--><style type="text/css">nav{letter-spacing:.5px}</style><!--><![endif]-->
Neither work.
The blog is http://costumingdiary.blogspot.com
Notice the links at the top of the page. They fit okay in Chrome, but IE widens the letter spacing too much. In Chrome, the link text is centered with extra spacing on either end. In IE, the text stretches all the way across to fill the space. If I change "About" to "About Me", the text will overflow to a second line in IE but not in Chrome.
Any help to set the conditional please? Thanks.
UPDATE: The fact that IE10 doesn't support conditionals is the big reason why I've given up on this. There is no simple css way to fix this. Adding javascript has proven to much for me. Actually adding javascript defeats the purpose of me removing (by way of adding comment tags) as much "unremovable" Blogger imposed script from my blog as possible. I guess I'll have to live with the stretched-to-the-max IE text. :(
Why do you think that conditional comments syntax is wrong? See full description of comments syntax, in your example all is right.
I get html source code from your link - there is no conditional comments where, but has big html comment with script which contains encode conditional comments(!)
You can use the below conditional for anything below IE9:
<!--[if lt IE 9]>
<script src="path" type="text/javascript"></script>
<link href="path" rel="stylesheet" type="text/css" />
<![endif]-->
If you want to target other versions of IE you can look here.
--EDIT--
You will need to add a HTML5 polyfill to enable support for the <nav> element on IE8 and below.
You could use Html5shiv or Modernizr
Your Body CSS rule has a letter-spacing:1.2px; That determines the spacing between your characters. I am looking at the page in Internet Explorer and Chrome and the fonts seem to render pretty closely to me. Also do not assume font rendering between platforms is consistent. If you develop on a MAC for example, they use a completely different font rendering sub-system than Windows for example. So test Chrome on the same system as IE. Also do NOT assume IE 8 is the same as IE 9 is the same as IE 10 or 11.
body {
background-color: #294A63;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
letter-spacing: 1.2px;
line-height: 1.4;
margin-left: auto;
margin-right: auto;
max-width: 960px;
min-width: auto;
overflow-y: scroll;
}
I've spent most of today trying to work out why the css on my site isn't working correctly in IE7. You can see the site at http://www.ecocamel.com
When you land on the product scroller page with the shower heads. .. everything is a mess, with mouseover popups partly showing without any mouseover, and products flowing out of the container to the right..
I tried adding overflow:hidden, and position:relative, which did fix quite a lot of it.. but it then caused the website to chop off part of the left / right arrows on other browsers...
SO I've removed everything for now. Just infuriating that it works perfectly on every other browser. How can I work out the best way of fixing it without impacting other browsers? I guess I can add the overflow:hidden / postion:relative stuff with a conditional IE7 statement so it doesn't impact other browsers.. but that still doesn't resolve things properly.
A good method is to use conditional comments.
You could use:
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
In this cases extra classes are put on the html tag for you to style explicit for IE6/7/8
Like:
div {color:#ff00ff}
.ie7 div {color:#00ff00;}
In the case of using conditional IE7 statements, while it seems a crap way to do it, if that is the only alternative without re-writing your CSS then that is the best solution.
As GordonM has mentioned, it's hard for us to know what's going on without seeing the code. But as you're using position:relative, I may suggest trying to use z-index so that the popup's display on top of everything (like they should do).
As well as this, have you followed the CSS box model correctly? What I tend to do is write these basic statements when I create a div or p tag:
div {
float:left;
width:100%;
margin:10px;
}
This is cross browser compliant, as I used to work for an agency who wanted their websites to use just one CSS file for all browsers. It is possible to build a web page with HTML and CSS and make it work on every single browser (excluding IE6) without the use of conditional statements. But as I think you've come/coming to the end of development, you aren't in a position to re-write your CSS completely. So try the z-index idea first, then try applying the above code to any affected div.
Google "conditional css for IE" and you'll find a plethora of tutorials showing you how to create conditional CSS for only IE version x+ or specifically ie7.. even all browsers but IE. Most websites require some, if not a ton of IE tweaking. Also, look in to a reset.css to set all margins and paddings to 0 to help with consistency.
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.
I need an IE9 CSS hack to be able to set the background-position property differently for IE9.
I have tried with several different ones that didn't work and from what I read somewhere, the background property is not possible to "hack" at least the same way as the other.
I basically need this to only apply to IE9:
#ABB_ABContent .subnav li.selected { background-position: center 17px; }
Any suggestions?
If you can't find anything else, there's always conditional comments:
<!--[if IE 9]>
IE9-specific code goes here
<![endif]-->
This would have to live in your HTML code, rather than your stylesheet, but you could use it to include an additional CSS file for IE9.
Alternatively, you may want to look up the Modernizr library. This is a small Javascript tool which you add to your site, which detects what features your browser supports, and allows you to write your CSS to target specific features (or their absence). If there's something about IE9 that it doesn't support which you're trying to work around, this may be the best solution.
I'm still puzzled as to what problem you're trying to solve though.
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="your path" />
<![endif]-->