Internet Explorer Float – Margin Problem
Posted on 16. Oct, 2008 by Sajith M.R in html, webworld
If you are a web designer, who designs using css properties, perhaps you get in struck with different browser’s compatibility. In these case Internet explorer would be your most headache, especially IE 6 or former versions .
Mozilla shows contents as we expect while the design phase. The web browser arrived recently, Chrome also shows things like what we put in our designs. When we check with Internet explorer, the veteran in this field, a lots of problems with aligns , extra white space , floating etc.
I already posed about internet explorer form tag problem. Here, recently i faced a different problem with IE, when we use float values say float:left for a particular div, and if we apply left-margin:10px (or whatever value), IE displays it with doubled marginal length (in this case around 20px)
When i googled it , and finally got a solution. What you have to do is, add display:inline value to the div which shows this extra white space or extra length
eg:
#rightDiv
{
width:279px;
height:40px;
float:left;
display:inline;
}
I got this precious solution from http://www.positioniseverything.net/explorer/floatIndent.html
If you want to get the updations in these article, enter your email address below:
Ryan
Oct 17th, 2008
You should really put all your IE fixes into a specific IE only style sheet (or multiples of them for different versions) so the main style sheet is kept clean. For your example above you would move the display: inline into an IE only style sheet.
Use conditional comments to serve up style sheets to IE and keep other browsers from having to view hacks and fixes they don’t need: http://www.quirksmode.org/css/condcom.html
Sridhar
Oct 18th, 2008
I would agree with Ryan. As IE8 promises to be more compliant like FireFox or Google Chrome, you should separate your IE only styles. For example, in the html’s head, you can give this:
#rightDiv {display:inline;}
And not put the display:inline in the main stylesheet.
Additionally, if you are already using IE8 and if your old styles (styles for IE7 or less) are aren’t working, use the following meta to make IE8 render as IE7 or less:
Arun Basil Lal
Dec 27th, 2008
Hey, i tried this tweak, Still my RSS counter falls below the line in IE 6
Damn Microsoft. Cheers