I'm having difficulty trying to get IE7 to behave like a normal browser.
I have a HTML sample here: http://jsfiddle.net/6QSYM/4/ that looks fine in most browsers, but when viewed with IE7 you can see that the "Sector Used" text is merged with the line below it.
Can somebody suggest how I can correct this?
I run into this problem all the time! At the company I work at we still have to support IE7 (will it ever just DIE!). So the best solution I have found is to set the width for your none floating div. It's a hassle but that why IE knows how to calculate the layout.
Try adding:
clear:both;
to your .risk-statistic-container class.
Try this:
http://jsfiddle.net/6QSYM/9/
the semantics of your HTML elements are all over the place as well. Way too many spans and divs for me :)
Hope that helps.
Related
I'm looking for a workaround for this odd IE bug (present in IE11, haven't tested other versions, works perfectly in Chrome/FireFox).
CSS clear:right; doesn't work as expected with rtl language even though clear:left; for an ltr language works without problems.
It's best to show an example so I'll attach screen shots.
I've noticed problems similar to this one all around so any general workaround would be most welcome. I'm not trying to solve it only specifically for this page.
Thanks
The English page: http://colnect.com/en/coins/coin/48962-50_Dollars_XXVIII_Olympic_Games_Athens_2004-Numismatic_Product-Bimetallic_Silver_-_Gold-Australia
The Hebrew page: http://colnect.com/he/coins/coin/48962-50_Dollars_XXVIII_Olympic_Games_Athens_2004-Numismatic_Product-Bimetallic_Silver_-_Gold-%D7%90%D7%95%D7%A1%D7%98%D7%A8%D7%9C%D7%99%D7%94
For lack of an IE 11 I can only test this in IE 10, but the problem presents there as well.
Adding width:100% and overflow:hidden to the .ibox element does seem to fix it – then it won’t need clearing any more, because it will go underneath the floated content before it since there is no place for it beside it any more.
See if that’s a workaround you can make use of.
Could you please create a reduced example demonstrating the problem?
I checked the code and there is no float: right box before (prior in source code) to the cleared <div class="ibox" xid="48962">.
Sorry! there are! .i_d dt {float: right} are floated right. So you are quite possibly right with your query and claims.
Note that you are using invalid attributes in your XHTML 1.1 page.
JS Fiddle Link http://jsfiddle.net/Xfvpu/1/
Okay so I have a document with xhtml doctype and I use the proper br / tag
but for some reason the gap between two images renders differently in Firefox than it does every other browser.
The page is can be found at http://www.safaviehhome.com/Rugs/Area-Rugs.html
the CSS is all mixed up unfortunately so I can't explicitly post it, but the two images are within a DIV wrapper, and the images themselves are not in seperate divs. They both have image maps, and the size between the two images width only differ by around 20px.
In between the two images are two br /
tags, I tried fiddling around in Firebug but could not figure it out .. And I won't be happy until I figure this out .. it's pissing me off! :)
The difference between other browsers and Firefox is around a 10px difference .. Firefox adds extra spacing .. I'm not asking for any help specifically, just wanted to see if there is some rendering issues I'm not aware of so I can put this issue to rest.
Look in other browsers vs Firefox to see what I mean .. I would really appreciate some help I need to figure this out for my own knowledge.
You cannot rely on using <br/> for vertical spacing. You need to use styles, such as
<div style="margin-top:5px">image goes here</div>
Or even:
<img style="margin-top:5px" src="yourimg.jpg" />
In my experience browsers are sufficiently consistent if you use this approach.
Edited to add:
But (and I can't stress this strongly enough): browsers will never be entirely consistent. Designs which assume that 100% consistency is possible will fail. (If this seems harsh, try getting through one day using only your smartphone's browser. Yuck.)
While I do not know the exact reason why Firefox acts like it does, I can offer an advice. From my experience using br tags for layout are, er, not the wisest idea, since you easily lose control of the exact spacing it creates. Like in this case, where it seems that Firefox intreprets two br tags as two lines, whereas at least Opera take the first one as a line break after the map and the second one creates this empty space.
You didn't ask for a workaround, but I can't resist: take a look at br-less alternative.
I have a code setup for a FAQ page like this:
<p><strong>This Is A Question</strong></p>
<p><strong>Answer.</strong> This is the content of the answer, and I am going to keep
typing until it kicks to a new line.</p>
I do notice that when this displays via the browser the new line does not align up to the start of the Answer Content. Align as in from the left. I am also aware not to expect HTML to do such a thing, must question is. What are my options on coming across "indenting" this text per se?
Any help would be greatly appreciated!
Inspired by Nicole Sullivan's css .media element, you can check out a two column solution update to your jsfiddle.
I think this is what you want:
<p><strong>This Is A Question</strong></p>
<p><strong style="float:left">Answer.</strong>
<div style="display:inline-table;float:right">This is the content of the answer, and I am going to keep typing until it kicks to a new line.</div></p>
Edit: Scratch that, it works in FF + IE, but not in chrome
Try negative padding in CSS for the div of your paragraph.
Usually work across webkit and gecko.
I'm not sure that this will be easy to explain without just showing you so here is an example -
http://jsfiddle.net/46gL8/1/
When viewed in FF, Chrome, and IE8/9 the example works as expected. When viewed in IE7 the nested UL is rendered inside of the parent despite both being positioned absolutely. Things like z-index make no difference and the only fix was to remove the filter: line from the shadow class.
I suppose it would be fine to just render a regular border or something in IE7 but it would be awesome if anyone had any insight!
It looks like the filter cuts off all content that falls outside the filtered box. If you remove the submenu from the hierarchy of the main menu, it does work. See: http://jsfiddle.net/wyDTQ/
Of course, I don't know how you're constructing your menu, so that might not be what you want. It does fix your issue, though.
Seem you only need an explanation rather then a solution. Everything you need to know about the filter property is explained by Microsoft at http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx, no further details is given to why or how it works in certain scenarios.
I've noticed that some browsers have trouble with margins, especially when an element is floated. For example, this website I'm doing looks fine in Firefox, but IE7 screws up the margins completely it seems. I also testet it on several Linux browsers as well and some of the make similar mistakes.
The site is
http://w3box.com/mat
This looks fine in FF3.0 as far as I can tell. Haven't seen it in FF2 yet, or IE6.
Why does this happen? Is it because I've got floated DIVs with specified margins?
Are there some things I should avoid or should have done differently?
Edit: So it looks like my tags was the source of the screwup.
I'd placed images in the that was not defined in the CSS and that had floats on them, combined with margins. These screwed up everything and I have to redo these.
Also, some stuff happened when I used XHTML Strict instead :)
Thanx everyone! I'll try to fix this on my own :)
I disagree with using a library if you want to learn about CSS part of the curve unfortunately is learning about the ways different browsers react to CSS. I wouldn't even suggest using a reset stylesheet. If you are going to be doing this a lot learn how CSS works. If you use a library or a set stylesheet which you don't understand how will you fix it when it breaks.
Marging are not bad, but IE has some troubles with the margins of float elements. While there are many recipes for fixing, I believe that in your case you may use absolute positioning instead of float+margins (you don't really need "float" behavior when the image is wrapped by text)
There is nothing wrong with using margins.
Old versions of IE have one bug and that alone isn't nearly enough of a reason to avoid using one of the core layout features of CSS. Specifically, this bug occurs in IE when you float an object and give it a margin in the same direction, e.g.:
.whatever {
float: right;
margin-right: 5px;
}
You can deal with this a number of ways, depending on your layout. One way would be to add another div around your box and use padding on that to replicate the same space a margin would.
I'd suggest using some form of CSS Framework (Blueprint CSS, 960 Grid, etc) as they have a number of margin, padding and other common HTML element resets. You should find cross browser development is easier using a framework.
Different browsers have different ways to handle box model. Most of the time the sites which are displayed well in FF, Chrome or IE8 can have problems in IE6 and 7.
To workaround this problem you can try to set all the default margin and padding to 0 (and adjust them as needed on specific elements):
*{ margin:0px; padding: 0px; } //Simplest rule...
To see more on CSS reset you can look at: http://meyerweb.com/eric/tools/css/reset/
And then apply different styles for IE7 and 6 with conditional comments.
As mentioned on other answers it's to do with IE's interpretation of the box model.
Whenever anything is floated IE tends to double the margins specified. This can be fixed with an extra stylesheet for IE using conditional comments.
See also: http://www.positioniseverything.net/explorer/doubled-margin.html