[WEB4LIB] CSS versus tables when zooming a web page in Opera

[Justin Rounds]

I'm not entirely clear about exactly what values you have in the style 
sheet -- something like this perhaps?

div.navigation {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 75%;
}
div.content {
	position: absolute;
	top: 0px;
	left: 25%;
	right: 0px;
}

I think this is an overflow issue (I don't know how Opera "zooms", so I 
may be completely off-base), and it seems to me that what you are seeing 
is what really *should* be happening. However, what you seem to want is 
for the text to wrap inside the div when it gets "zoomed", thus 
preserving your window-percentage-based layout. As I understand it, 
overflowing content is _not_ supposed to wrap, so it makes sense that 
when the text gets too big it bleeds out of its box. Since you are 
fixing the width of your divs to be a percentage of the window-width, 
Opera appears to see fit to *not* "zoom" them, so the contents start 
overflowing.

If (as I suspect) Opera is doing a pixel recalculation when it "zooms", 
then setting the widths of the divs to specific pixel values *might* 
stop the contents from overflowing. However, since everything is getting 
bigger the browser window will have to produce scrollbars to make it 
accessible (in theory). Another possible workaround would be to play 
with different display settings to get the divs to render differently, 
i.e. setting "display: table" or "display: table-cell" while keeping the 
widths relative may cause the text to wrap appropriately. Be warned -- 
while Opera may support all the possible values for "display" other 
browsers do not (or in the case of IE use entirely non-standard values).

Good Luck and Happy Testing!
_
j


John Fitzgibbon wrote:
> Hi,
> 
> As I have stated previously, I have created a navigation bar by creating
> two divs. One div is absolutely positioned zero pixels from the top,
> zero pixels from the left and 75 per cent from the right. The rest of
> the document is contained in a div that is absolutely positioned zero
> pixels from the top, 25 per cent from the left and zero pixels from the
> right.
> 
> In Opera 7.54, it is possible to zoom the web page by up to one thousand
> per cent or ten times its original size. This causes the text in my web
> page to spill out beyond its containing div.
> 
> As recommended by the list, I tried basing width on the unit em. This,
> for reasons that are unclear to me, does not work. The em unit is based
> on letter size and should produce the relative scaling that is required.
> 
> I am not so keen on introducing scroll bars but may have to.
> 
> I have looked at other web pages and what interests me is that pages
> that survive this degree of scaling (up to 1000 per cent) all seem to
> use tables rather than CSS to achieve their layout. Is it conceivable
> that tables might be better after all? Please say it ain't so.
> 
> John Fitzgibbon
> 
> Galway Public Library
> Island House
> Cathedral Square
> Galway
> Ireland
> 
> p: 00 353 91 562471
> f: 00 353 91 565039
> w: http://www.galwaylibrary.ie 
> 
> ******************************************************************* 
> T� eolas at� pr�obh�ideach agus r�nda sa r�omhphost seo 
> agus aon iat�n a ghabhann leis agus is leis an duine/na daoine
> sin amh�in a bhfuil siad seolta chucu a bhaineann siad. 
> Mura seola� th�, n�l t� �daraithe an r�omhphost n� aon iat�n 
> a ghabhann leis a l�amh, a ch�ip�il n� a �s�id. 
> M� t� an r�omhphost seo faighte agat tr� dhearmad, 
> cuir an seolt�ir ar an eolas thr� aischur r�omhphoist 
> agus scrios ansin � le do thoil. 
> 
> This e-mail and any attachment contains information which is 
> private and confidential and is intended for the addressee 
> only. If you are not an addressee, you are not authorised 
> to read, copy or use the e-mail or any attachment. 
> If you have received this e-mail in error, please notify 
> the sender by return e-mail and then destroy it. 
> *********************************************************************
> 
> 
> 

-- 
-------------------------------------------
Justin Rounds
Graphic Design and Digital Media Specialist
Digital Library Development Center
University of Chicago
1100 East 57th Street
Chicago, Illinois 60637
(773)702-4391
-------------------------------------------