Mon, 2004-03-22 18:09
Hi. I've posted the site I've been doing : http://www.geocities.com/calua_pataca/22Mar2004_1
It shows up fine in any resolution I've tested at normal font sizes (in IE6), but the right columns fall to the bottom of the page when the font size is increased in 640x480 and 800x600. The Content (Left) has it's width defined by a percentage:
div#Content {
background: url(imagens/periquito.gif) transparent bottom right no-repeat;
float:left;
width:73%;
background-color:#f9f9f9;
border-top :1px solid #dfdfdf;
border-left :1px solid #dfdfdf;
border-right :1px solid #afafaf;
border-bottom:1px solid #afafaf;
margin:0px 20px 30px 0px;
text-align:justify;
padding:1em;
z-index:1;
}
and the right columns also work in the same manner (20% width).
I have been using em margins and paddings in some places. Can this have anything to do with the problem? Should I stick to absolute values (px)?
Please help me.
Caluã ](*,)
Thu, 2004-03-25 04:46
#1
Page get's messed up on lower resolutions
Caluã wrote:
Quote:
I have been using em margins and paddings in some places. Can this have anything to do with the problem? Should I stick to absolute values (px)?
Yes, that's exactly it. Your % values add up to 93% and
the remaining space is 7% of available screen width.
However, when you reduce the available width the true
pixel width of the extra space is now fewer pixels in width,
but your margins and padding are not in %, so they do not
shrink. At a critical size the 93% plus the margins/padding
exceed 100%, causing the trouble.
This is a common problem with % sized cols, and usually there
are ways to work around it. I would just remove all padding
from those oppositely floated col elements, left margin the left col
in %, and add inner elements to the cols that have no stated
'widths' and so can be safely padded. You can also use a box
model hack rather than the inner elements, but this way is
simpler to explain.
Mon, 2004-03-29 18:28
#2
Page get's messed up on lower resolutions
Thanks. I didn't quite get what you suggested, but it's ok. I solved the problem by creating a min-width box and putting everything in it.
here:
div#mother_box {
min-width:540px;
width:expression(document.body.clientWidth > 540 ? "auto" : "540px");
}
It has the expression thing because IEs don't get min-width, but that's ok, 'cause other browsers don't get expression either (well, ok, they shouldn't, at least yet, but it does solve some IE related problems).
I have, however, discovered a new problem. I'll create a new topic, but, roughly, here it is: My Content DIV (the one that holds all the Lorem Ipsum text) has a set width of 72%. It shows up okay on IE6 and Mozilla, but on IE5.x, there is a "gap" between left content and right collumn, as if 72% in these browsers is different than 72% in other browsers. Weird. :-k
Anyway, thanks.
Caluã