Link to home
Start Free TrialLog in
Avatar of nextenso
nextensoFlag for United Kingdom of Great Britain and Northern Ireland

asked on

IE is inserting a space above a content container in a CSS website

Hi, going around in circles trying to resolve. I think it is due to a quirk in how IE reads positioning of CSS elements. I attach the HTML file for one page, (all but Home page are created from a single template) built in Dreamweaver CC. The webpages display fine in Firefox, Chrome and Opera, but,  IE inserts a space above the main body content container set as an editable region.

If I change the relative positioning setting for the menu buttons, IE will display correctly, but, Chrome pushes the content below the bottom of the menu.

The menus code (which is created from a Dreamweaver extension), sit in a div which sits inside the div 'Sidebar' container. Is this what causes IE to misplace the body content container ??

View this page http://www.destinationdata.co.uk/sportpathways/spl-privacy.html in IE and Firefox. The Breadcrumb and all content below is pushed downwards only in IE. The Breadcrumb line should be level with top of the 'Home' Button as it is in other browsers.

The Breadcrumb line is at the top of the editable 'container'

The attached files are before cleaning up. I did an earlier clean but it did not resolve.

Rgds Jonathan
menu204id14-style.css
spl-subpage.css
spl-privacy.html
ASKER CERTIFIED SOLUTION
Avatar of nanharbison
nanharbison
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nextenso

ASKER

Hi, thanks Nanharbison, I will try that out tomorrow and let you know.
I got this advice on this website years ago, when I was totally defeated by CSS rules for IE. It has saved my life ever since.
Hit it on the nail first time.
Once you know this, it's so easy.... but you have to know it!!!!
Thanks for the points.