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.
Related
Site in question:
http://www.sedulity.tk/
Site using Chrome 19 dev:
Site using IE9:
as you can see on the homepage using IE it seems like it not recognizing the height of the DIV of each picture, whereas on chrome and firefox there is no issue.
I think this is probably my fault, won't blame IE for it...but I can't figure it out :|
In your css folder there is a css file ie7style.css and it's being used for ie (I've tested in ie8) and it has a class (.item-image) that is
.item-image{
height:142px;
}
Try to fix it or just remove it.
Css file: http://www.sedulity.tk/wp-content/themes/DeepFocus/css/ie7style.css
See in this developer Tool screenshot I've removed the css entry height:142px from class (.item-image) from file ie7style.css
After that (without .item-image{height:142px} in file ie7style.css) see the page in ie8
Try adding a height to the .item
CSS
#portfolio-items .item {
height:500px;
}
you might wanna check this article for a cross-browser inline-block that doesn't overlap. your case is most likely caused by the "baseline", where the next set of elements base their tops on the last elements' baseline (which would be somewhere in the middle of the element).
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; }
And in my html editor looks just fine:
alt text http://img441.imageshack.us/img441/7348/bien.png
But when i see it on the browser (Chrome & Firefox) looks like this:
alt text http://img59.imageshack.us/img59/642/malhh.png
Im very new to layout with tag, any idea of what im making worng?
put "margin: auto;" in the style of div contenido and usuario. Then add padding-top: 58px; in div usuario (as you are trying to put that div 58px lower.)
Oh! of course remove those margin-top styles from every where and use padding style instead.
What's wrong? You're relying on the rendering engine of your HTML editor and you shouldn't.
Only use a recent version of Firefox, Safari, Chrome or Opera for testing (edit: I forgot IE8 and I shouldn't have; it's support of CSS2.1 is good. It just lacks dozens of extensions but that's another story), then the other browsers including IE and forget your not-so-awesome rendering tool.
I believe your specific issue is being caused by the lack of trailing semicolons at the end of your style properties. That will often cause bad rendering.
margin-top: 1px" >
should be
margin-top: 1px;" >
Also, you should definitely take the advice of #Christian Mann and put the CSS in the of your document or, even better, in an external stylesheet. Inline CSS styles should be avoided.
Is it possible to override the styling that is applied to a hyperlink if it has the disabled="disabled" attribute?
It's currently greyed out. Not bothered about making it an active link, just want to change the font, color, etc.
UPDATE : Must work in IE6, IE7 & FF
UPDATE :
It's worse than I though the html is <A id="someId" disabled>About Your Group</A>
UPDATE :
I'm going to really have to see what is adding this 'disabled' to the links.. I think it's a jquery plugin.. (ui.tabs, jquery ui.tabs)
The disabled property can't be used on a elements. it only applies to input, select and button elements.
Sure; Internet Explorer puts a bevel-effect on links with this property set. FireFox, on the other hand, ignores this property completely.
Note: Links will still function. Their default behavior is NOT prevented--they just look disabled. They do not behave like a disabled text input.
You are better off using a class to signal if a link is disabled. This will work cross-browser as well...:
The CSS
.disabled { color: #ccc; }
The HTML
...
And to complete the disabled effect; using jQuery, you can select all links with the class "disabled" and prevent their default behavior, like so:
$(function ()
{
$("a.disabled").click(function ()
{
// return false to disable the link (preventDefault = true)
return false;
});
});
I've noticed that ASP.Net puts disabled="disabled" on <a> tags when setting the Enable property to false on an <asp:HyperLink>.
This causes css-rules for that element to be ignored in IE (even for a[disabled="disabled]!), which is extremely annoying. Other browsers don't care, since they ignore that property.
My solution was to simply set the NavigationUrl property to null in the code-behind for the elements I wanted to disable.
The advantage of doing this server side instead of with JavaScript is that it will work even if users have JavaScript turned off.
I don't know to what extent the disabled attribute is supported for hyperlinks. Make sure you test thoroughly.
I see two ways of targeting this in CSS:
CSS 2.1
You can try the CSS 2.1 attribute selector
a[disabled=disabled] { color: blue }
I think this is most likely to work with a non-form element. Doesn't work in IE <= 6. Quirksmode compatibility table.
CSS 3
In CSS 3, it's possible to use the :disabled pseudo-class (source)
input:disabled { background-color: yellow; }
doesn't work in any IE including 8. Works in Firefox, Chrome and Opera. Quirksmode compatibility table
I've never seen disabled used on a normal hyperlink so you will have to try whether that works. Per the specification, the disabled pseudo-class is for disabled form elements only.
Whe you're using ASP.NET, and you disable a LinkButton on server side, the html generated is an <a> tag with disabled="disabled" non-standard attribute. However, there's no href attribute generated, so that the link will not behave like a link in any of the browsers.
The problem is that IE adds the typical "bevel effect" to the disabled link, and the other browsers render it as "regular text".
You can solve the problem in non-IE browsers styling like this:
a:not([href]) /* this is for ASP.NET disabled links */
{
opacity: .5; /* all but IE before 9 */
}
The problem is that IE (at least up to IE 8) keeps doing the "bevel" effect on the disabled link. To make IE behave like the other browsers you need to change the CSS style, adding this non-standard filter attirbute (only works for IE):
filter: alpha(opacity=50);
And you also need to use some javascript, i.e. jQuery, to remove the offending disabled attribute. I.e.
$('#controlId').attr('disabled','')
If your case is even more strange, and you have disabled and href, you should remove also the href so that the style can be applied and the link doesn't work.
I don't think there is a 'disabled' attribute for hyperlink (anyway it doesn't respect w3c recommandations) but you can try to add class for styling these elements like :
<a class="inactive" ...>...</a>
And for the css :
a.inactive {
color:#000
}
Well it should work in IE, I know IE doesnt support content property anything other that?
The only option is the the content property:
The content property is used with the
:before and :after pseudo-elements, to
insert generated content.
But as you point out, this is part of CSS 3 and is not supported by IE. In the meantime you will need to compensate by using JavaScript.
It is quite possible to solve this without Javascript, using a combination of HTML and CSS. The trick is to duplicate the content added by the CSS in the HTML an IE-specific conditional comment (not shown by other browsers) and use the display CSS selector to toggle when that element is shown. According to MSDN, IE 8+ supports CSS :after and content:, so only IE 7 and below need to use a conditional comment.
Here is an example:
<style type="test/css" media="screen">
.printonly { display: inline; }
</style>
<style type="text/css" media="print">
#maintitle:after { content:" \2014 Site Title";} /* for IE8+ and Other Browsers. sidenote: Can't use &mdash directly in generated content, so using escape code */
.printonly { display:inline } /* For IE <= 7 */
</style>
<h1 id="maintitle">Page Title
<!--[if lte IE 7]><span class="printonly">— Site Title</span><![endif]-->
</h1>
Short of pictures of text — no.
You could try using IE8.js to fix content, which might do the trick. If not, then there's nothing you can do besides background-image's with text
The only way is JavaScript, or CSS3.
Maybe you could tell us what you need to do - then we can help.
Why can't you do it with js?