Problem with a DIV ... too much white space on the top on IE6

Hi
I have this code :
HTML
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
<div class="article" id="article"><h1>STUFF<h1>
      <div class="article_info">STUFF</div><br />
        <div style='width:100%; height:380px; overflow:auto;'>
                -->CONTENT<--
        </div>
<div>
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-
CSS

.article {

      margin-left:170px;
      padding:5px;
      border: 1px solid #cccccc;
      background-image: url("images/backgrounds/Logotypo.gif");
      background-position:bottom left;
      background-repeat:no-repeat;
}
~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-

In every browser works fine but in IE6 thats what it looks like :


What should i do ?
IE6.jpg
LVL 16
CodedKAsked:
Who is Participating?
 
downtapConnect With a Mentor Commented:
Ok, it was a width issue. Instead of doing 100%, I declared a fixed width value of 500px, and the fixed height is back working. Sorry, didn't notice that previously. Here's how that section should look. You can tweak that 500px value to whatever you like by the way.

<div class="article_info">— ÀµÁ¹¿Ç· ÀÁ¿ÃƵÁµÄ±¹ ³¹± ¼¹± À»·¸ÉÁ± <b>´Á±ÃÄ·Á¹¿Ä·Äɽ</b>, ¼µÁ¹ºµÂ ±À¿ Ĺ ¿À¿¹µÂ µ½´µ¹ºÄ¹º± ±½±ÆµÁ¿½Ä±¹ ÃÄ· ÃŽµÇµ¹±:</div><br /><br />
		  <div style="height:410px; overflow:auto; width:500px;">

Open in new window

0
 
downtapCommented:
It would be nice to see all of the code to be able to try and replicate the problem, because with the limited amount of code provided, it's impossible to replicate. A link would be extra helpful. But a common ie6 fix for whitespace you could try is adding display:inline; to the misbehaving elements. If it is an unordered list that is giving you fits, there are several different solutions depending on your situation. Here is an article referring to that.
http://gtwebdev.com/workshop/gaps/white-space-bug.php
0
 
mverschoofConnect With a Mentor Commented:
width="100%" inside an element may cause the problem in IE6. If that doesn't work please post a file or url with an example so we can check the full code out.

Hope this helps
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
downtapCommented:
Looking at the screenshot again, I think you're right mverschoof. It looks like he probably has the div floated right and the width is giving it issues as it appears underneath his left column.
0
 
CodedKAuthor Commented:
Here's the page :
http://nastouview.gr/1-1-1/activities.php

I deleted the width but still no joy.
I dont have IE6 so i cant test it. I'm using http://browsershots.org to check with IE6...

Thanks for any suggestion :)
0
 
downtapCommented:
On the div just below article_info, adding the display:inline to it fixed ie6 for me.
Let me know if this works for you.

<div class="article_info">— ÀµÁ¹¿Ç· ÀÁ¿ÃƵÁµÄ±¹ ³¹± ¼¹± À»·¸ÉÁ± <b>´Á±ÃÄ·Á¹¿Ä·Äɽ</b>, ¼µÁ¹ºµÂ ±À¿ Ĺ ¿À¿¹µÂ µ½´µ¹ºÄ¹º± ±½±ÆµÁ¿½Ä±¹ ÃÄ· ÃŽµÇµ¹±:</div><br /><br />
            <div style='height:410px; overflow:auto; display:inline'>

Open in new window

0
 
CodedKAuthor Commented:
:/

I've allready saw that posted in some forum... but if do this... There are no scrolls in FF Mozilla 3.0, and no scrolls in IE 7.0!
0
 
CodedKAuthor Commented:
Thank you for all your help :)
0
 
downtapCommented:
No problem at all.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.