div’s background in IE6 (yet again)
Posted: 30 April 2008 10:54 AM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2008-04-30

Hello every one I am new here,
glad to join the forums :)


I used CSS and html for some time now but I never had the time to really dive in to it ,
lately I am trying harder…

I am renewing my site at the moment since the current version is heavy clumsy and well.. buggy!
However I have a major issue with the div’s in IE6, for some reason the div’s background color won’t show and extend itself
if there is nothing in it, only under some text or other elements.
FF show this page exactly how I want it to the pixel.

Best if you look at the link in FF and IE6 and you will understand what I mean:
http://www.bezbox.com/css_stuff/test_03.html

please note that this is a simplified page I made to try and rule out the root of the problem,
but the page is exactly the same as the source minus some content and less menu items.

Ho, and the most important thing for me here is how it works in FF,
if you change the size of the browser the #content div is keeping the same space of 10px from all direction
except the top which is 50px. I am trying to achieve this effect in IE6 as well.

I just can’t get it to look the same in IE6. I looked at this post:
(link)
but this did not help my problem (I am not even sure if it’s the same problem)
I validated my code, I have 4 errors, but as far as I understand, (which is not much :0)
it’s because I tried to avoid the <li> IE6 phantom spaces by braking the end of the </li> tags.

here is the link to the w3c validator result:
http://validator.w3.org/check?uri=http://www.bezbox.com/css_stuff/test_03.html&charset;=(detect+automatically)&doctype=Inline&group=0

I looked in google and found nothing that solved my problem, I am lost.
I will appreciate any help and comment from wiser people.

Cheers,
bez

p.s. please also forgive any English grammar mistakes i make.

Profile
 
 
Posted: 01 May 2008 06:22 PM   [ Ignore ]   [ # 1 ]
Jr. Member
RankRank
Total Posts:  36
Joined  2008-01-11

First off, always validate completely. Secondly, you should be using a strict doctype, you are not transitioning from anything that needs that doctype (at least not in the provided example). It would really help for a link to the “un-watered” down problem, as you might be missing something very small that could be destroying the whole thing for IE6.

The other thing is that you are trying to mix % and pixels, which IE6 does not like at all. It gets the box model wrong.

Profile
 
 
Posted: 01 May 2008 07:29 PM   [ Ignore ]   [ # 2 ]
Newbie
Rank
Total Posts:  2
Joined  2008-04-30

First of all thank you ifohdesigns,

Well I am not that good in html so…
What do you mean by validating completely? I did so (at least I think I did).
As for the “un-watered” page, well it’s not relevant any more
as I continue to work from this page.

Basically there would be en extra div inside the content div that would hold images vertically.
I want the content div always to have space of 10px from all sides except the top even when the user
change the browser window size, and the content div would have a scroll.

As for the doctype, I am sorry I am not sure what you mean I used dreamweaver 8 and that is the doctype that
was created for me while creating the new html page, what should I do than?

and as far as px and % well, I tried all combination with only px, only % with absolute, relative
colored borders for the body, what ever, I don’t really care how I do it, as long as it looks like I want it.
I would even use an IE conditional code to link for a specific IE6 css file if really needed
but I just can’t get it to work in IE6 no matter what, so I must ask is it at all possible to do in IE6?
and again, firefox have it exactly how I want it.

Thanks again,
Bez.

Profile
 
 
Posted: 14 November 2008 09:34 PM   [ Ignore ]   [ # 3 ]
Newbie
Avatar
Rank
Total Posts:  10
Joined  2008-11-14

You have to set a width and a height for the #content div and change the overflow:auto to overflow:scroll.
In IE6, the #content div is very small and all your content inside it is hidden because there is no height or width set. setting the overflow to auto lets the browser pretty much decide how it renders, so tell it to scroll instead!

#content {
    
background-color#333333;
    
left10px;
    
top50px;
    
right10px;
    
bottom10px;
    
margin0px;
    
padding10px;
    
displayblock;
    
height:600px;
    
width:800px;
    
z-index1;
    
positionabsolute;
    
overflow:scroll;
Profile
 
 
Posted: 05 August 2010 07:01 AM   [ Ignore ]   [ # 4 ]
Newbie
Rank
Total Posts:  4
Joined  2010-08-05

lol~hi bez, where are u from?


=====================
web game|browser game|new mmorpg

Profile
 
 
Posted: 21 October 2010 11:36 AM   [ Ignore ]   [ # 5 ]
Newbie
Rank
Total Posts:  12
Joined  2010-09-28

I am a newbie too. Just trawling a round getting to know the place - looks like plenty of good info here!

——————————————————————————

iPhone 4 Cases

Profile