Hi guys, I'm developing a site for a university society, which appears fine in both IE7 and FF 2 after much bug fixing, but it gets screwed up in IE6. The problems - IE6 likes adding spaces in between my divs. IE6 turned the line div from 3 pixels to about 10 pixels... it has also magnified a lot of width/heights of other divs IE6 seems to not be able to align my divs correctly where I want them Some of my images are stretched vertically on IE6 Again, none of these problems appear on IE7, FF2 or even FF1.5... It's only on IE6 (which happens to be the most used browser to view my website). If anyone can help, I will be greatly appreciative. CSS: http://www.sascurtin.com/wp-content/themes/sasv1/style.css My Website: http://www.sascurtin.com/ Cheers!
To fix div heightts (10px -> 3px) try putting a transparent 1x1px GIF image in all the empty DIVs. <!-- this is an empty div --> <div class="myclass"></div> Code (markup): change to <div class="myclass">[B]<img src="spacer.gif" />[/B]</div> Code (markup): Where spacer.gif is the empty image described above.
@xooMan: Please don't suggest a 'spacer gif'. Besides being unsemantic, and possibly the ugliest hack ever come up with, it doesn't work here. @Nix Wanning: The problem lies with two things; IE reserves an anonymous inline box for each container element, and IE will expand the container to enclose its content. The inline box will have a height equal to the line-height of the inherited font. For IE's out-of-the-box default font, that's 19px. If you've set the font-size to, say, 10px, the line-height will be 12 or 13px, and so, too, will be the div's height. The fix is to declare the font-size on those divs to be 0 or 1px. Why are you using an empty div "line" instead of semantic markup, <hr />? Non or limited css aware UAs, which includes most web-enabled mobile devices (PDAs, cell phones, etc.) won't render anything. Look around line 105 of the source. You cannot put a <p> in a <span>. Replace the span with a div. You've failed to close #footer. cheers, gary
@ xooMan - Thanks for the compliment But I will steer clear of using spacers. @ kk5st - You're a life saver! font-size: 0px; solved everything !! With regards to the horizontal line <hr /> tag... I tried it and found out that a few pixels were missing at the sides of the line, making it look weird... example (x denotes a coloured pixel and 0 denotes a missing pixel left side of the line: 00xxx xxxxx 0xxxx right side of the line: xxxxx xxx00 xxxx0 to fix the missing pixels, I decided to use divs. So far, my stats have told me that a very small percentage of people use mobile devices to view the website. But surprisingly over 50.5% of viewers are using IE6 Fixed the span and footer problem, thanks for the heads up. PNG Transparency problem on IE6 I seem to have some problems with png transparency. The transparent background has suddenly turned gray. I've used a couple of hacks to work around the IE6 bug, but somehow most of them can't work with CSS background images (one of the bullets on my sidebar is PNG based) and it won't work on the Submit button for my form on the contacts page. Do you have any ideas how I can work around these problems?
@xooMan - I've tried it already, but somehow it doesn't work on image PNG buttons and it messes up my Javascript reset button.
The hr is an odd beast. The W3 does not define how it should be rendered, so each UA has its own go at it. See Styling <hr> with CSS. You can get it the way you want it and be semantic. cheers, gary