Solved

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

Posted on 2008-10-10
9
271 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
  • 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 
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

Optimizing Cloud Backup for Low Bandwidth

With cloud storage prices going down a growing number of SMBs start to use it for backup storage. Unfortunately, business data volume rarely fits the average Internet speed. This article provides an overview of main Internet speed challenges and reveals backup best practices.

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 get this page layout correct 13 30
Javasctipt 2 26
CSS: Making responsive table look nicer 7 27
Html form and modal / img src -problem 3 11
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

777 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