Hope you can help me out here. I am designing a page at http://completestudenthomes.co.uk/ and as usual all is well in Firefox, but in IE something is going horribly wrong. The content in the Search bar and Footer is floated and as such in order to get the enclosing div to wrap the content I have used the
This then wraps the content as required, but also begins to add rougue pixels to the divs that follow. The #search_bot, #search_bot .left and #search_bot .right are supposed to create a 1px high #CCC line with a 1px white dot to the far left and right giving the illiusion of a rounded box, but the line is taking up an extra 2px width and as such the 1px white dots are appearing but not where they should.
This problem then replicates itself within #footer_top, #footer_top .left and #footer_top .right, but then adds another 2px to the width of #footer_bot, #footer_bot .left and #footer_bot .right.
2px is then also added to the width of #border_bot, #border_bot .left and #border_bot .right.
No explicit widths are specified meaning the search and footer divs should have 100% width of the #border_inner container box and the border_bot div as wide as the #frame container div.
Anyone got any ideas?
Control the line-height. IE
Control the line-height. IE is expanding the elements to allow one line to fit.
To which elements?
Which elements need their line-height controlling?
I have applied line-height: 1% to #search_bot, #search_bot .left and #search_bot .right and have also applied it to the clearing divs but to no effect.
All elements with heights
All elements with heights less than line-height. You may also need to trigger hasLayout on containers of elements with hasLayout. You can test for that by giving most of the blcok elements a style of zoom:1. Check out the "On Having Layout" link in my sig for more details of hasLayout.
Fix one problem only for another to appear
Had a quick read of the On Having Layout article and I have now managed to change the issue somewhat. Applying line-height: 0; height: 0 to the clearing divs now allows my boxes to close as they should, however I now have a blank line at the bottom of all boxes?!?
Also the p.title enttity in the #footer box is not displaying unless you highlight the invisible text and when you higlight more than one line of text or click on the logo (link back to same page) the background dissapears from approx 150px of the #border_inner element.
Any further pointers would be much appreciated.
Update: Cleared Floats Without Structural Markup
I have been meaning to look at the Clearing Floats Without Structural Markup on Position is Everything for a little while, so thought it was worth giving that a go and all seems to be well now between Firefox and IE6 on my PC. I am too scared to turn on the Mac and see what issues that has, but as it can't go on the network yet I won't be able to view the site anyway
Would still appreciate someone with a little more CSS knowledge than me giving this the once over to see if it seems ok, the only thing I can see is that there is a double margin being applied between the #_mid and #_bot divs on each of my boxes (you can clearly see an extra 3px below the featured property image) but I am going to now get the rest of the site designed before worrying about this. If anyone has a quick answer to this issue give me a shout.
Thanks for your time Chris