...

View Full Version : how to vertically align in IE/Mac



DJWiktor
08-26-2005, 12:53 AM
Hi,

I'm usung CSS to vertically position a few divs in the middle of the page. Everything works good in IE, Firefox, Netscape and Opera. Problems appear in IE/Mac where divContainer and divContent overlap and float to the right of the screen.


Here's my code:


<style type="text/css">
#wrapper {
padding: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#intro {
position: absolute;
top: 50%;
left: 50%;
width: 740px;
margin-left: -370px; /*half of the width*/
margin-top: -240px; /*half of the height (480)*/
}
#divContainer {
position:absolute;
width:400;
height:280;
overflow:hidden;
top:230;
left:180;
clip:rect(0,400,250,0);
visibility:hidden
}
#divContent {
position:absolute;
top:235;
left:311
}
#divUpControl {
position:absolute;
width:30;
left:590;
top:325;
z-index:1;
text-align: right
}
#divDownControl {
position:absolute;
width:30;
left:590;
top:356;
z-index:1;
text-align: right
}
</style>
Since I don't have day-to-day access to Mac I can't find any solution thru trial and error method. Can anyone help?

Here is the html code of the page:


<div id="wrapper">
<div id="intro">
<!-- begin absolutely positioned scrollable area object-->
<div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-7)" onMouseOut="CeaseScroll()"><img src="templates/button_up.gif" hspace="0" vspace="0" border="0" id="buttonup"></a></div>
<div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(7)" onMouseOut="CeaseScroll()"><img src="templates/button_down.gif" hspace="0" vspace="0" border="0" id="buttondown"></a></div>
<div id="divContainer">
<div id="divContent">
<? require_once('content.php'); ?>
</div>
</div>
<!-- end absolutely positioned scrollable area object -->
</div>
</div>

You can view the page in action at:
http://www.kuzniapr.pl/index2.php?page=details&section=whoweare

_Aerospace_Eng_
08-26-2005, 07:24 AM
IE for Mac doesn't like the negative margins. You might need to use some javascript or something. I think just making the page center will be fine for mac IE users. Its what they get for even using that browser. They probably won't even notice that its supposed to be vertically centered as well. Just hide the necessary CSS from IE Mac using the commented backslash rule.

gsnedders
08-26-2005, 02:29 PM
Look at http://www.brunildo.org/test/vertmiddle.html

bazz
08-26-2005, 02:33 PM
I've no access to a mac so I can't give you complete advice but, I did notice that most of your positioning is absolute. Have you tried using position: relative or leaving the positioning off altogether?

Bazz



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum