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.
Related
I noticed the navigation li items (yellow section) were right of center, so I altered the containing div/nav widths and background background colors just so I could see what was going on in an attempt to fix the misalignment; however, I can't seem to see a reason why this is occurring (in about 6 browsers).
Here is problematic markup/css: http://building-more.site50.net/
It seems to work fine in jsfiddle: http://jsfiddle.net/cTXXH/1/
It doesn't seem to display at all in IE, what is going wrong here?
Also, it looks like you forgot the ending bracket in your endif statement for the IE check.
Should be:
<![endif]-->
It's because some of the elements already have default values such as padding and marging that are skewing your positionings, and this could be different for each browser. That's why people often 'reset' CSS to use 0 margins and 0 paddings by default instead, before starting with their own styles.
Your example works fine in your Fiddle because 'normalize CSS' is checked. This is a framework similar to CSS resets which can be found here: http://necolas.github.com/normalize.css/ - it makes sure that your default positionings are consistent between browsers, and gives you a clean slate to work with.
If you were to include it into your web page it would solve your issues. Hope that helps.
In my website, there are lots of buttons. When viewing in Chrome, the button width just fit on the dynamic button text, but in IE, I can see extra padding are produced on both left and right...
Would there be any CSS rule that can allow me to take away these padding? Thanks.
Might be a bit late, but when I searched SO for the very same problem today I found this question. Obviously, this is no real padding (in a sense that it cannot be turned off by padding:0px), but rather one of those weird oddities that we all love so much about IE. (Note how the false padding scales with button text length O_o). Fortunately, there is a simple solution to it, as described here.
Basically you only add overflow:visible; to the button (I did not need the extra width:auto;as described there). Don't ask - it's absolutely not what you'd have thought this should do, but well... It's IE Land and the rules are different over there. Just note that this apparently does not work when your buttons are inside a table cell.
I guess the CSS reset might have solved this, because someone already included this in some global declaration. Just adding this answer to shed some more light on the how and why.
Never give up, people - our children will see a world without IE quirks... One can hope.
You can use reset css as it avoids browser inconsistencies.
Please refer http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/
Visit http://www.cssreset.com/scripts/html5-doctor-css-reset-stylesheet/ for reset.css
Managed to avoid extra spacing in IE with extra statement display:block; in CSS like so:
.menu button{
display:block;
width:100%;
padding:0;
}
Note that I didn't use width:auto as it wasn't an option in my case - buttons are empty, width is taken from parent div.
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.
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
I know this kind of question must get asked all the time but I haven't found a solution for my problem yet.
Using FF, Opera and the IE that is on Windows 7 (can't remember what it is), the page looks exactly as it should, but using IE7 on Windows Vista, there is a gap between my navigation bar and the rest of the page which frankly makes it look stupid, and the illusion of tabbed pages is lost.
I have a reset stylesheet to reset all the elements to have no padding, margins etc and FF, Opera and the IE on Windows 7 produce the page as they should, it's only IE7 (and I'm guessing earlier versions of IE) that don't.
Here are 2 screenshots showing the problem, the first from FF/Opera/IE on Windows 7:
This one is from IE7 on Windows Vista:
alt text http://img43.imageshack.us/img43/7558/figarosiegap.jpg
And here is a link to the actual website in question: Figaro's Ristorante
Any ideas anyone?
Thanks for your time.
I've run into this problem a bazillion times. Add this to your CSS:
#header img { vertical-align: bottom }
There's a funny bug in IE up to and including version 7 where it will treat some whitespace (an empty text node, really) as a real text node, and align the image as if there was text in the element as well.
Another option would be to declare the image as a block level element:
#header img { display: block }
This CSS is safe to add to your global file, it will not interfere with how other browsers render the page.
The IE on windows 7 is IE8
I've taken a look at it using IE7, and the gap appears to be because of the image in the 'header' div. If you look at it with a tool like IE Developer toolbar you can see the boundaries around the objects on the page.
Sorry i cant paste an image but i'll try to describe it:
there is a #text element after the image which is being forced onto a new line by IE7.
if you change the style on the img to include
float: left;
This fixes the problem for me.
Hope this helps!
(Let me know if you need more clarity)
The gap is part of the text line where the menu image is, because the image is an inline element so it's placed on the baseline of the text line. The gap is the distance from the baseline of the text to the bottom edge of the line, i.e. the space used by hanging characters like 'g' and 'j'.
Simply adding display:block; to the style of the image solves the problem. It turns the image element from an inline element to a block element so that it's not placed on a base line of the text but as a separate element.
I've run into this problem a thousand times, and finally, after using overly complicated fix after fix, the answer is simple! (At least when <img>'s are involved.) In the div that is producing a gap under it, add 'overflow: hidden;' to its css; you will need to set its height, of course. So, if your div is 39px high, this will keep it at 39px high, ignoring the extra whitespace IE loves to put under <img>s
Hope it helps.
There's not much useful information (html or pictures that work) in this question. So, here's a random guess.
I've had situations where a line-break or spaces between elements can cause vertical space between elements. Try placing the closing and opening tags immediately next to each other and see if this corrects the issue.
Different browsers all have different default margins and padding. In this case, I'm guessing IE7s defaults are throwing you off. There are two general solutions to the problem. You can set your own margin and padding at the html, body level:
html, body {
margin: 0;
padding: 0;
}
or you can use IE conditional comments to load sepearte stylesheets for different versions of IE. Last I checked, the conditional comments were considered a better solution because browser defaults do provide some usefulness.
Jason is correct that it's a bug in how IE handles whitespace in the html... treating it as a text node. Though I don't think it's unique to images. I believe I've seen this behavior with divs as well. As a global change you may try applying vertical-align:bottom to both images and divs. Though I don't know what mayhem that may produce.
But the quick and dirty fix is to just remove the whitespace. Kinda sucks, but change stuff like this:
<img src="blah" alt="" width="5" height="5" />
<div>blorg</div>
To this:
<img src="blah" alt="" width="5" height="5"
/><div>blorg</div>
I warned that this is quick and dirty. But it works.