[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

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

Posted on 2008-10-10
9
Medium Priority
?
280 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 80 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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 720 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

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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 embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

873 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