I have 2 display rules that i can't get to work
I can't use the display property with IE version < 10, i'm using this code:
Comments(<fb:comments-count href="http://mypage"/></fb:comments-count>)
That results in:
Comments(<fb:comments-count href="http://mypage" fb-xfbml-state="rendered" class=" fb_comments_count_zero">
<span class="fb_comments_count">
10
</span>
</fb:comments-count>)
With this css:
.fb_comments_count {
display: inline;
}
.fb_comments_count_zero {
display: inline;
}
It displays:
Comments(
10
)
instead of
Comments(10)
I tried also changing
display:inline
to
display:inline-block
But it's not working.
The other issue i'm having is when i use display:none. In fact, IE<10 doesn't hide what i'm styling, but IE10, chrome, opera and firefox don't have that problem.
How can i fix this?
P.S. I prefer not to use JavaScript, because i want my site to look good even if javascript is disabled.
You're using dashes instead of underscores in your CSS.
.fb-comments-count {
display: inline;
}
Try changing it to:
.fb_comments_count {
display: inline;
}
Internet Explorer will not style any element it is not aware of. That is why there is a HTML5 shim javascript; to inform IE of the new HTML5 elements (insert them into the DOM). Other browsers won't have this issue.
Im not entirely sure how FBML gets rendered in the end, but older IEs don't recognize custom tags and won't apply css to them, so this might be the issue. You need to "register" the tags to the IE.
Also you should avoid the linebreaks in your span:
<span class="fb_comments_count">10</span>
this already might fix your first problem, if not try to apply white-space:nowrap;.
ie has always had a problem with braking lines where it should not try adding this to your css
white-space:nowrap;
If that does not work then please tell me what happens.
I have had these problems before with ie so it not just you.
also try wrapping your fb tag in a p tag then add a style of choice to the p tag.
Here's some code to illustrate the problem I'm running into. jsFiddle Demo
<div class="normal">
Test
Test longer
</div>
<div class="ib blockbyclass">
Test
Test longer
</div>
<div class="ib">
Test
Test longer
</div>
body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;}
div.ib a {display: inline-block;}
div.normal > a {display: block;}
div.blockbyclass> a {display: block; }
I have a certain type of link that under most circumstances needs to be rendered as inline-block, but in a certain case needs to be rendered as block elements. Specifically, I want them to each appear on their own line and take up the entire area of the containing div. In this particular case, the div containing the links is set to float, so it will resize itself based on the largest of the links inside it. IE8, IE9, Firefox and Chrome render these links correctly, but no matter what I do IE7 refuses to forget the display: inline-block rule.
How can I make IE7 show these elements in "block" mode?
Acording with this article display:inline-block has a similar behavior that display:inline in IE7, so you can make a litte change only to support IE7 (with a simple hack for IE):
div.ib a {
display: inline-block;
*display: inline; /* IE7 and below */
}
I hope this works as you expected.
EDIT:
Ok. The problem are with the property hasLayout explaining here. Both zoom:1 and height:any_value activates the hasLayout, so meanwhile display:inline-block; *display:inline works to overwrite the next display:block declarations, putting a height:30px (for example) returns the property hasLayout. So the thing to do is remove the hasLayout as it says in this article.
I have this demo to show how works. Because height is practically untouchable I using padding-bottom and font-size to simulate the height in other browsers. Note that the width of the widest element is maintained.
EDIT2:
Have you are considerate jQuery solutions? (Only giving the elements different widths in IE7)
Update: moved from comments here:
The problem is on div floating. When you float an element, that will be outside of pages normal stream, so, IE will take for it width:0; height:0; and when you put some elements in it, they will create their own height and width and the floated-element will be rendered how can push them (my English is really bad, so sorry). First step, A is inline-block so its height is for example x. when you make it block it should fill its parent, but, in IE mind, its parent has width:0. so you should remove the first inline-block attribute from div.ib a OR you can create a fixed-width attribute for floated div element.
div { float: left; margin: 5px; width: 80px; }
also, insofar as I know, W3C recommends that floated elements should have a fixed-width. - IE 6 needs a fixed height too to work correctly!!!
The another way -if you can and your solution allows you- is that change the first inline-block to inline just for IE:
display: inline-block;
*display: inline;
But the width solution (for div) is more standard and flexible.
END UPDATE
However, for overriding a css-attribute just in IE, you have 3 optional way to do:
The first way is using conditional comment that makes it's content visible to IE only. A full example is something like this:
<!-- visible to IE less that 7 (6, 5, etc) -->
<!--[if lt IE 7]> <link href="/Content/ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!-- visible to IE 7 only -->
<!--[if IE 7]> <link href="/Content/ie7.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!-- visible to IE 8 only -->
<!--[if IE 8]> <link href="/Content/ie8.css" rel="stylesheet" type="text/css" /> <![endif]-->
<!-- visible to IE 9 and above and also visible to other browsers -->
<!--[if gt IE 8]><!--> <link href="/Content/normal.css" rel="stylesheet" type="text/css" /> <!--<![endif]-->
As you can see, you have many options to use conditional comment.
The other way is using CSS specially selectors that make some selectors visible to IE and hide them from other browsers. A full example is:
/* normal */
your-selector{
}
/* visible to IE 6 only */
* html your-selector{
}
/* visible to IE 7 only */
*:first-child + html your-selector{
}
/* visible to IE 7 and above */
html > body your-selector{
}
/* visible to IE 8 and above */
html > /**/ body your-selector{
}
The third way that I know is using IE specialized css-properties:
/* normal selector */
your-selector{
/* normal property, visible to all browsers */
color: #FF0;
padding: 20px auto 35px;
/* use special properties in name/value for IE */
/* visible to ie 6 only */
_color: #FF0;
_padding: 15px auto 30px;
/* visible to ie 7 and below (7, 6, 5, ...) */
*color:#FF0;
*padding: 15px auto 30px;
}
Let me know if you have any questions or need clarifications on any part.
Your problem is a hasLayout trigger by the inline-block setting. To quote http://www.satzansatz.de/cssd/onhavinglayout.html (my emphasis added):
"The display-property differs: while 'inline-block' sets haslayout = true, the flag will not be reset to false later on by overriding the value with 'block' or 'inline' in another rule set."
This is unlike most hasLayout triggers that can be reset. Therefore, I think to fix your problem, you need to think in reverse. You need to have block be your default for the a tag and then add a class to get your inline-block when you need it.
Sort of like http://jsfiddle.net/mmpX3/33/ where blockbyclass I replaced with inlinebyclass (which is really inline-block).
Updated Explanation: You probably noticed that when you switched to block after going from inline-block that it "sort of worked" (the lines of text still move down). That is because it is displaying as a block, but one that hasLayout as opposed to one that does not. I don't know your particular situation, but if you can set a width on the containing div then a secondary solution to that I proposed above of "thinking in reverse" is to then set a width: 100% in conjunction with your "resetting" to block, like so: http://jsfiddle.net/mmpX3/64/.
Updated Caution: I don't know if you have other css you plan to apply to the a tags, but if any of that triggers hasLayout then you will need to watch out for that (and perhaps find a different method). See for example this fiddle http://jsfiddle.net/mmpX3/69/ in which everything is set to block but because I put a min-height on the a tag, it still has the same issues as your original problem.
You can put styles for IE7 in a separate CSS and use a conditional comment to include it only for IE7.
<!--[if IE 7]>
<link ...your IE7 specific stylesheet goes here ... >
<![endif]-->
Make sure this piece of code is below the link to the regular css file.
display: inline-block
for IE7 looks like:
*display: inline;
zoom: 1
display: inline-block is not compatible in IE7 for elements which are not inline by default so IE will ignore this rule for DIVs. If you change the DIV to a SPAN for example then this example should work.
Here's the thing: If you need the a tag anchors to render on their own lines, they are block elements, not inline... In fact, there's nothing about what you're saying that indicates a need for an inline-block. Your divs are floating, so they'll stack to the left, in a line (but not inline; they are outside the flow of the document, thus float).
Try this... let's strip it all down. Here's the HTML you gave us:
<div class="normal">
Test
Test longer
</div>
<div class="ib blockbyclass">
Test
Test longer
</div>
<div class="ib">
Test
Test longer
</div>
With the CSS you provided, in Safari and Firefox, I see three blocks with two links each, each on their own line. What you're seeing in IE7, however, isn't two inline-block elements, but just two inline elements – the reason for this is that inline-block is not supported in IE7 because of a hasLayout error (something Microsoft created to overcomplicate a simple issue). In other words, it can't forget inline-block because it simply doesn't understand inline-block (which you've misunderstood as necessary), and is treating a by its default display behavior (i.e. inline).
If they need to be on separate lines and take up the width of the container, all you have to do is this (demonstrated on .ib a, completely ignoring blockbyclass which seems to just be a red herring in this case):
.ib a {display:block;}
TADA! Width is inherited from the parent container, the a takes the default a stylings, and everything is happy. So take a look at this:
<div class="ib">
Test
Test longer
</div>
This, in this case, becomes redundant, and therefore unnecessary. You're already making those elements block.
<div class="ib">
Test
Test longer
</div>
You're simply overcomplicating something really very simple.
Here's a fiddle: http://jsfiddle.net/dhYjZ/1/
It appears that float is to blame here. It is not that IE7 does not mark the item as block, I think it is due to the div float not having a width. This can be seen here:
http://jsfiddle.net/mmpX3/129/
Typically, when working with older browsers, I have found that floated elements in <= IE7 tend to need a fixed width setting to avoid issues.
In your case, I would suggest adding a fixed width as the JS Fiddle, or remove the float if it is not needed. If I can see the use case for the floated div, I may be able to come up with an alternative.
Why a combination of float and display:inline-block stops display:block from being re-instanted, I don't know. It sounds like a typical IE7 bug that can be worked around.
I'm not quite sure what is the end-result that you are after. Are you trying to make the black background to be a whole rectangle that encapsulates both links instead of 2 rectangles (1 for each link)?
If so, why not apply the background to the DIV instead of the links?
EDIT:
It seems that there's a bug with IE7 that makes it display elements in a mixture of block and inline-block when one of the rules that applies to the element has display: inline-block even if another value for display takes precedence.
If you see http://jsfiddle.net/P2N5c/16/ , it doesn't matter if the rule that has display: block is the first one (like the one using the #blocky rule) or if it's the last one.
So far I'm not sure how to prevent this bug, but you could bypass it by avoid giving the links both ib and blockbyclass and just giving it the classes that make them blocks. I.e. don't give them ib. Instead of adding a class to toggle the states for the DIV, replace one class for the other.
Simply put, I replace all of my display:inline-block; usages with display:inline;, and I also do so conditionally, as with the answers provided above.
With your example, I find success with the following:
body{background-color: gray;}
div{float:left; margin: 5px;}
a {background-color: black; color: white;display:block;}
Jsfiddle: http://jsfiddle.net/zL3Ea/
Seems like jobs done.
I am fork your code, try it: http://jsfiddle.net/Lkwzx/1/
Secret in this line: div.ib a { display: inline-block; *display: inline; }
I can see some other question have been raised around this issue but none of the answers fixed it for me.
I have a table which is inside a <div>. In IE7 and above this renders fine and the table can be seen clearly using scroll bars. In IE6 however this renders as a single line (e.g. height of 1px).
Here is the css around these elements.
DIV.ScrollFrame {
overflow: auto;
height: 100%;
}
.DataTable {
border-collapse:collapse;
}
Then the html look like this
<div class="ScrollFrame" >
<table class="DataTable">
//some asp to generate the data
</table>
</div>
Sorry a cannot provide pictures as the data in the table is confidential.
Thank you in advance.
If your solution is to set a fixed height, make sure you serve it for IE6 only. Best practice is to use an IE6 only stylesheet displayed with conditional comments, like so:
<!--[if IE 6]>
<link href="/styles/ie6.css" rel="stylesheet" media="screen, print"/>
<![endif]-->
Alternatively you can use the * html hack, which only IE6 understands.
Hm, i´m not sure, but you can try this for ie6:
* html DIV.ScrollFrame { overflow:scroll; }
This previous Q about a div positioning problem in IE gave several answers where they told me to use conditional commenting.
How come this relative positioned div is displayed differently in IE?
How does it work, I mean how do I implement conditional comments?
Ex:
<div class="normal"></div>
<!--[if IE 6]>
<div class="IE6"></div>
<![endif]-->
IF it is explorer 6, will this then override the first div with class="normal"?
Because if it wont, then there will be two divs in explorer 6 right...
What could possibly be the problem of this positioning?
I have even tried creating a new html document with a hello world text, and put it inside a div with relative pos, and in IE it behaves differently, about 3px further down than in other browsers...
Thanks
This is normally used to load an extra bit of CSS that "fixes" various issues due to IE6 bugs/lack of features.
eg. the top of our site looks a bit like this...
<link rel="STYLESHEET" type="text/css" href="/css/common.css" />
<!--[if IE 6]>
<link rel="STYLESHEET" type="text/css" href="/css/ie.css">
<![endif]-->
This loads our normal stylesheet first. Next IE6 (only IE6) loads the second stylesheet, which override a couple of definitions that cause problems for IE.
If you need different content, you could include both sets of content (normal content and IE content) and have the IE content hidden by default via your standard CSS (display:none), and simply overide this in the IE6 css stylesheet.
No, it isn't the way to go really.
They're non-standard, they're proprietary, they set a bad example, and they're absolutely unnecessary.
whatever {
foo: bar !important; /* for non-IE6 */
foo: baz; /* for IE6 */
}
child { /* for IE6 */ }
parent > child { /* for non-IE6 */ }
I already know: "Don't use css expressions!" My question is not about whether I should be using an expression or if there is an alternative; my question is simply: Can I get a css expression to only be evaluated in versions of IE prior to version 7 without using conditional comments?
I occasionally use an underscore hack to hide a rule from IE7 but IE7 seems to evaluate expressions anyway. For example, _width:700px; is ignored by IE7 but _width:expression('700px'); is still evaluated.
I know that someone will try to tell me to just use a conditional comment to include the rule, but I am looking for a way to do this without placing a single style rule into a separate file.
A note for those of you who still don't want to let it go: I've chosen to use a css expression, but I didn't do so lightly. I understand the implications and I am using an expression that only evaluates once. Stop worrying about my bad decisions and just answer the question already... ;-)
I always use the star "hack" to target IE6 specifically, but it does require your browser to be in standards compliant mode (see below).
/* IE6 only */
* html .myClass {
width: 500px;
}
I like it because it doesn't rely on parsing inconsistencies in browsers and it validates according to W3C.
As for being in standards compliant mode, you should always add a valid DOCTYPE to your pages as it results in fewer CSS bugs and browser idiosyncrasies. For an explanation of quirksmode and standards compliant mode, check out this article.
You can use this example below to play around with expressions in each browser. I tested it in FF, IE6, and IE7 and it worked as expected. I only wish that SO had syntax highlighting to recognize CSS expressions and mark them as red so you can be reminded that they are evil. Might I ask why you are deciding to use CSS expressions in the first place? A lot of people try to use them to achieve min-width in IE6 but that's not the right solution. If that's the problem you're trying to solve, I've written up an answer in a separate question demonstrating a valid CSS solution for min-width in IE6.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
.ie6 {
display: none;
}
* html .ie6 {
display: expression("block");
}
* html .ie7 {
display: expression("none");
}
</style>
</head>
<body>
<div class="ie6">
This is IE6
</div>
<div class="ie7">
This is Firefox or IE7+
</div>
</body>
</html>
You don't have to use conditional comments to add a new file. You could easily add a conditional comment to add a class to the body tag, as follows:
<!--[if lte IE 7]>
<body class="ie7">
<![endif]-->
<!--[if gt IE 7]>-->
<body>
<!--<![endif]-->
Then in your CSS you can simply define a different style for IE7 on any element you like:
#content {
width:720px;
}
.ie7 #content {
width:700px;
}
You still load the same stylesheet, but you can style elements based on their browser.
You could even extend this to have differnt styles for IE6, 7 and non-IE browsers.
You can try Rafael Lima's CSS Selector. It uses Javascript, but you can do things like:
.ie6 .myClass {}
.ie7 .myClass {}
.ie .myClass{}
I used to use !important to make non-ie browsers use a different style but then IE7 started supporting it. What I have found is that IE7 will apply a style marked !ie-only (or anything not !important) and other browsers will ignore the style as they don't recognise that.
If you need three different styles this might work but not great is you want to adhere to standards though. (normally I don't try the mix of !important and !ie-only and just have !ie-only.)
#myDiv {
height: 3.0em !important; /* non-ie */
height: 2.6em !ie-only; /* ie7 */
height: 2.4em; /* ie < 7 */
}
This answer may be what you are looking for:
In-line CSS IE hack