Solved

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

Posted on 2008-10-10
9
275 Views
Last Modified: 2012-05-05
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
0
Comment
Question by:CodedK
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
9 Comments
 
LVL 1

Expert Comment

by:downtap
ID: 22687450
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
 
LVL 5

Assisted Solution

by:mverschoof
mverschoof earned 20 total points
ID: 22687454
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
 
LVL 1

Expert Comment

by:downtap
ID: 22687503
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Author Comment

by:CodedK
ID: 22687571
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
 
LVL 1

Expert Comment

by:downtap
ID: 22687692
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
 
LVL 16

Author Comment

by:CodedK
ID: 22687730
:/

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
 
LVL 1

Accepted Solution

by:
downtap earned 180 total points
ID: 22687985
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
 
LVL 16

Author Closing Comment

by:CodedK
ID: 31505034
Thank you for all your help :)
0
 
LVL 1

Expert Comment

by:downtap
ID: 22688194
No problem at all.
0

Featured Post

Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

Question has a verified solution.

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

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

691 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