Menu
I recently noticed in several webpages, and some of my own, that when they are displayed in Internet Explorer 9, when its not on Quirks Mode, it renders a white line, about 1px, in the bottom of the page. It's like the html tag was with padding-bottom:1px and wrapped in another element with white background (but it's not, and it has no padding). It looks like the differences between IE9 standards and quirks mode shows when determining a wrapping element's width, but vertically. It also feels like the content of an element gets pushed 1px by a previous element, like their content, but, not margins or borders, were overlapping the next element dimensions.
I can't determine exactly what causes it. Sometimes, a page contains 2 tables and everything is fine. Then you need to add a third one, and the line shows up. Doesn't even need to be tables btw.
Sometimes, reseting css solves it. Setting the same line-height we have on body to links:
body {
line-height: 1
}
a, links, visited {
line-height: 1
}
fixes it, but not always. Only thing i can do, is check element by element, disabling/enabling their css rules till it's gone.
I noticed that when there are elements like tables, inputs, textareas, this issue is more likely to happen. 'resetting' their attributes, sometimes, solves it too.
I know it would be easier to provide a code as an example, but like i said, i coudn't determine a pattern for it. I can give you some examples of sites/urls i notice that error (you gotta look at the very bottom of the page and see the difference between IE and another browser, like Firefox):
casinosdelmundo.info, gatosabido.com.br, espanol.yahoo.com, en.wikipedia.org/wiki/Bruce_Beutler, ea.com/command-and-conquer-4, facebook.com (the ones with white, or almost white bg, change body background with f12, developer's tool, and you'll see). I found an example even here at stackoverflow (as today, the main page stackoverflow.com is showing that line too, but that can change since, sometimes the issue appears or disappears when new elements show up or are removed):
this question has the white-line: Make link in table cell fill the entire row height
this one has not: FireFox 3 line-height
Check this screenshot, if you still didn't see what im talking about:
the presence of this issue on very established (or not) sites makes me feel it's a IE9 bug and the only definitive fix for it is always use white background, so nobody will notice the white line (the line will still be there though). but thats obviously not the best option. I never found this white line in Chrome or Safari.
So, has anyone faced the same problem and got a better solution?
213
I'm not sure, cause there is no HTML here, but it is very resemble to standard browser behavior, when it displays inline content. It is due to the fact, that when text is displayed browser needs to leave some space at the bottom for letters and symbols such as: "," , "y" , "p" and so on, cause in that letters there is a part which protrudes to the bottom. You can better understand what I'm talking about when you look at this picture: example of how inline content is displayed
so if you have some markup like
<body>
<div></div>
<textarea></textarea>
</body>
you'll get that extra space at the bottom. To get rid off it you have to use there either block element, or set to your inline-element a css style 'display: block'
104
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
