Home/ Questions/Q 8222521
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T14:18:37+00:00

We have simple div as below. The problem here there is gap between the

  • 0

We have simple div as below. The problem here there is gap between the div gpsDataDiv and map div inIE. Secondly the gpsDataDiv is field with a dynamic table using this method document.getElementById(“gpsDataDiv”).innerHTML = htmlString; and again in IE the table goes right below and does not stop at say 400px so there is no scroll bar generated like in chrome or firefox.

 <body>
 <div id="left" style="width:220px;height:350px;float:left;background:white;">
      <div id="gpsDataDiv" style="overflow: auto; max-height: 400px;background:white;"></div>
</div>
 <div id="map" style="top:0px;left:220px;height:100%">Map goes here.
  </div>    
 </body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You div with id map does not have position:absolute in the styling, is this something you have in a separate stylesheet?

    A couple of suggestions:

    1.

    Your mixing float:left; with an absolutely positioned element(?). You need to make sure that the container, in this case the body has either overflow:hidden applied to it, or alternatively use a clearfix. This will stop the container from collapsing down and can cause problems further down your page.

    2.

    Secondly, you should be able to alter the style in different browsers by using either separate stylesheets aimed towards each browser (try a search for ie specific stylesheets) or try my approach of using a class on the html element

    <!--[if lt IE 7 ]> <html class="ie6" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8" lang="en" xml:lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9" lang="en" xml:lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="" lang="en"> <!--<![endif]-->

    3.

    Make sure you have a doctype on your page, try using the html 5 doctype below. If you don’t specify a doctype the page can go into quirks mode. This is definitely something you don’t want!

    <!DOCTYPE html>

    4.

    Try changing max-height: 400px; to height: 400px on id="gpsDataDiv"

    If any of these arent helping you, could you put together a jsfiddle of your issue? Itll help me debug it for you 🙂

    • 0