Here's my project:
[had to remove url because of spam-bot]
For a quick look, here's my CSS for the div in question:
#leftCol { width: 431px; height: 552px; background: #67b8b9; /* Fallback */ background: rgba(100,179,180,0.88); float: left; display: block; border-radius: 0px 24px 0px 0px; behavior: url('PIE-1/PIE.htc'); zoom: 1; }
The left column has a transparent solid background and one rounded corner. It looks fine everywhere, except some versions of IE 8. On my IE 8 (Win XP SP2) it's fine, dropping the transparency and just showing a solid color.
Today a co-worker showed me the page in their IE 8 and the background color is missing altogether, and I can recreate her results looking at the page through Adobe Browserlab, so it's 'something' but I don't know what.
Tried a separate CSS sheet for IE 8, I have no height:100%, overflow:hidden or any other properties that IE is known to choke on. So please tell me what I'm missing. If it helps, it looks fine in IE 7 too. In fact if I could get just IE 8 to behave like IE 7 I'd be happy enough.
Thanks!
Seems the only fix I could find was to force IE8 to render like IE7 using the following meta tag
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7, IE=EmulateIE9" />
Doesn't really solve the problem as IE8 ought to be able to handle it. Gosh, how many times have you heard that before?
P.S. that tag tells IE 8 to render like IE 7 but leaves IE 9 alone to render as IE 9.
Related
My intro photo slightly covers the breadcrumbs panel on IE and Chrome, see here https://www.hawaiidiscount.com/luaus.htm
It looks fine on Safari and Firefox.
I have been reading on the Internet about css specific code for IE and tried different methods to fix that, but it doesn't work. What am I doing wrong? Thanks!
<!--[if IE]>
<style>
.breadcrumbs {
margin-top: -22px;
}
</style>
<![endif]-->
<style>
.ie .breadcrumbs {
margin-top: -22px;
}
</style>
<style>
#breadcrumbs {
margin-top: -22px;
}
</style>
It's possible that the different heights are due to the different font rendering engines on the different browsers, as this element is being positioned by <br /> elements.
You're able to use conditional statements, such as
<!--[if IE]>
.element{
margin-top: 10px;
}
<![endif]-->
.. to add code that only IE6 - 9 will render, however this will not work in IE10 and above.
You could also browser sniff, but this is really not a good solution as it's better to have one codebase that works across browsers. You also won't be able to anticipate all browsers that your users will use.
The website you've shared is also using quite a few negative margins and absolute positions, which can also cause inconsistent layout issues.
My suggestion would be to remove all <br /> elements, remove as many of the negative margins and absolute positions as possible and lay the page out using a simpler system. For instance, you've split out the background of the breadcrumbs from the text of the breadcrumbs - these should really be together so that you can easily style them together.
Hope that helps
I'm trying to get rounded corners to on of my css class with the code as it follows
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
I have been reading couple of articles related to my issue and the code above should be ok but in my case won't fire.
Add this to your markup as the very first line.
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Use this for border radius for better compatibility with other browsers also.
-moz-border-right-radius: 5px;
-webkit-border-right-radius: 5px;
border-right-radius: 5px;
-moz-border-left-radius: 5px;
-webkit-border-left-radius: 5px;
border-left-radius: 5px;
IE9 uses CSS3 (the industry standard). Your code should therefore work.
A very common problem is that although you are using ie9, it might be rendering the page using an older version. See if compatibility mode is enabled by mistake. You could also try the developer tools (F12) and look at the document mode and browser mode (at the top) are set to IE9.
Here is a simple code sample from a language switch in HTML. The CSS should separate the span elements and display a dot in between:
<html>
<head>
<style type="text/css">
.languageSwitch span:before {
content: "•";
padding: 0 4px;
font-weight: normal;
}
.languageSwitch span:first-child:before {
content: "";
padding: 0;
}
.languageSwitch .current {
font-weight: bold;
}
</style>
</head>
<body>
<div class="languageSwitch">
<span>Deutsch</span>
<span class="current">English</span>
<span>français</span>
</div>
</body>
</html>
This works fine in Firefox, but Internet Explorer 9¹ simply ignores the :before directive. In the “developers tools” CSS dialog the “content” property does not show up either. I have searched all over the web: There are pseudo-element issues IE 8, but IE 9 should know them, and this is “old” CSS 2.
Does someone have a clue why this fails (bug in IE 9?) or how the syntax must look like?
1) To be clear: Version 9.0.8112.16421 / “Updateversion” 9.0.6 (KB2675157)
Check the doctype. On jsfiddle, this works fine in IE9: http://jsfiddle.net/4nGW9/. IE8 should handle this as well.
I can see the dots fine in IE 9. Exact version as yours. Only difference in my code is a valid HTML5 doctype at the top.
Without a valid doctype IE could be switching its rendering for your page to quirks mode, or a rendering mode for IE8/IE7 which would not handle the pseudo selectors like first-child or generated content.
See your page here in browserling.
Say I have the following code
<style type="text/css" media="all">
span, ul, ul li {
display: inline-block;
vertical-align: top;
margin: 0;
padding: 0;
list-style: none;
}
</style>
<span>i would want</span>
<ul>
<li>this</li>
<li>on</li>
<li>one line.</li>
</ul>
I want this to display inline in IE8. Everywhere I have read everything says this should work, IE8 supports inline-block. However after a morning of trying I cant get the above to line up. I know I could float it, but with the other elements on my page (not shown here) I would need to use a 'clearfix' which is more mark up. I only need to target IE8 and would love to know why inline block doesn't work for me when apparently its supported. The above code does what I want when viewed in Google Chrome.
I'm guessing you haven't declared a doctype. Try placing this on the first line, before the html tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The code you pasted works in IE8 with that doctype.
Not all IE8 versions seem to work equally. I found that the given code, even with a DOCTYPE, does not work in IE 8.0.6001.18702, which is an early version.
However, the workaround for lower IE versions did its job on that particular IE 8 as well:
<!--[if lt IE 8]>
<style type="text/css">
li { display: inline; }
</style>
<![endif]-->
You can set margin-right:1px
worked for me pretty well.
In my experience it is always a better idea to use the universal way (IE6+) of declaring an inline block. Even if you are targeting newer browsers every time I've tried to say that it's only supported by newer browsers some client still messes with their document type, and then the sales say, it needs to be fixed, because clients can still see it and does not get it, that it's down to their IE settings and not our fault. More over when you are using inline-blocks for structural stuff, it keeps the site from completely disintegrating if the user is viewing the site on an older IE for what ever reason.
display: inline-block;
*zoom: 1;
*display: inline;
IE8 will treat it as a block level element unless you use float.
.divInlineBlock
{
display: inline-block;
float: left;
}
Note that IE8 will act like IE7 if you are viewing an intranet site, which can happen as you develop! See this StackOverflow question:
IE8 Rendering as IE7 By Default?
For IE8 - you can add a specific declaration:
display: inline-table;
which works great.
I have the following CSS code
.editable:before {
content: url(../images/icons/icon1.png);
padding-right:5px;
}
this is used in conjunction with the following markup:
<span class="editable"></span>
In every other blessed browser in the world my icon is appearing, but IE8 seems to have a problem with this. Isn't the :before pseudo-element CSS2? isn't content: also a CSS2 command? what gives?
Actually you should be careful here and read the detail. For full details, see this link - which states
In Windows Internet Explorer 8, as well as later versions of Windows
Internet Explorer in IE8 Standards mode, only the one-colon form of
this pseudo-element is recognized—that is, :before. Beginning with
Windows Internet Explorer 9, the ::before pseudo-element requires two
colons, though the one-colon form is still recognized and behaves
identically to the two-colon form.
Meaning for browsers <IE9 - you must use :before and for >=IE9 - you must use ::before
Update: I misread the page! IE 8 does support :before with images, it just doesn't when it is in IE7 compatibility mode.
IE8 supports :before, but not and also images as content when not in compatibility mode. Kudos to #toscho for testing!
Source
Detailed comparison of which browsers can deal with what sort of content
How I love quirksmode.org, which makes dealing with this stuff at least half-way bearable. The guy deserves a medal!
When using :before and :after, just be careful not to use double colons (::after - will not work, but :after will work). I lost about 20mins for this...
You may use the image as background for the generated content:
<!DOCTYPE html>
<meta charset="UTF-8">
<title>Generated content with an image</title>
<style>
p:before
{
content: '';
padding: 20px;
background: url("css.png") center center no-repeat;
}
</style>
<p>Test</p>
Works in IE 8, Opera and Mozilla. Live-Demo.
This is going off of Pekka's awesome example...
My heights on my project was to tall for the row... So I added a padding-bottom: 0px;
Just in case you rain into this....
.icon-spinner:before {
content: '';
padding: 15px;
padding-bottom: 0px;
background: url("css.png") no-repeat left top;
}