Solved

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

Posted on 2008-10-10
9
274 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

730 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