Solved

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

Posted on 2013-11-29
5
399 Views
Last Modified: 2013-12-09
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
0
Comment
Question by:nextenso
  • 3
  • 2
5 Comments
 
LVL 17

Accepted Solution

by:
nanharbison earned 500 total points
ID: 39685773
This page looks exactly the same in FF 25 and IE 11 on my Windows 7 computer. But do you have a separate style sheet for IE? You might consider that, so you can change the CSS rules for the IE style sheet and it won't change any of the rules for the other browsers.
It is suggestion #3 on this page:
http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/
0
 

Author Comment

by:nextenso
ID: 39685786
Hi, thanks Nanharbison, I will try that out tomorrow and let you know.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39685806
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.
0
 

Author Closing Comment

by:nextenso
ID: 39706296
Hit it on the nail first time.
0
 
LVL 17

Expert Comment

by:nanharbison
ID: 39706968
Once you know this, it's so easy.... but you have to know it!!!!
Thanks for the points.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
how to debug htl and js pages 8 39
Hide Table in merge 3 31
What is the optimum percentage to save images for webs. 4 19
ASP.NET Content Page 3 27
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question