Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2003
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how to vertically align in IE/Mac

    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:

    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:

    Code:
     <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?pa...ction=whoweare

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    Senior Coder gsnedders's Avatar
    Join Date
    Jan 2004
    Posts
    2,340
    Thanks
    1
    Thanked 7 Times in 7 Posts

  • #4
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •