1

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>
Undefined
  • 11,234
  • 5
  • 37
  • 62
user837306
  • 857
  • 3
  • 18
  • 32
  • Are you using a proper DOCTYPE, so that the document is in Standards mode? Also you'll probably need to show the complete relevant styles. Best would be a working example online such as an jsfiddle. – RoToRa Jul 12 '12 at 09:12
  • Did either my or Guiseppe's answer help you sort out your issue? If so can you please mark as accepted. – Undefined Jul 12 '12 at 12:40
  • @ROTORa what is the importance of the DOCTYPE? – user837306 Jul 12 '12 at 15:26
  • @user837306 Read this: http://msdn.microsoft.com/en-us/library/cc288325(v=vs.85).aspx – RoToRa Jul 13 '12 at 08:14

2 Answers2

3

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 :)

Undefined
  • 11,234
  • 5
  • 37
  • 62
  • for your 1 suggestion I have done this now put the position absolute and remove the float:left but I am not too sure where to add overflow:hidden. I have put the suggestion 3. and 4. too. It looks much better the space is gone in IE but one problem from the top there is a bit of space before the table start
    Map goes here.
    – user837306 Jul 12 '12 at 12:53
  • additionally my table scroll bar looks like slightly covered by the map div. In addition I want to master how to work with the float,position and overflow. Where is the right place I could start to master this? – user837306 Jul 12 '12 at 12:59
  • @user837306 You could try this guide -> http://www.smashingmagazine.com/mastering-css-principles-comprehensive-reference-guide/#n1 – Undefined Jul 12 '12 at 13:25
  • how about the little space at the top between the top and the table? – user837306 Jul 12 '12 at 15:26
1

I tried to reproduce your problem. It seems to show correctly in IE if I add height: 400px to gpsDataDiv.

Giuseppe
  • 597
  • 7
  • 26
  • how about the space do you get it ? – user837306 Jul 12 '12 at 12:59
  • Maybe you are in IE quirks mode, getting some unwanted offset. See this answer for reference: [link](http://stackoverflow.com/questions/4817745/how-do-i-get-rid-of-an-elements-offset-using-css) – Giuseppe Jul 12 '12 at 15:30
  • ok I will look into it but now I got another problem the table has a little space between the top that is even in chrome too. – user837306 Jul 13 '12 at 07:23