Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1906
    I'm having terrible trouble getting a page to display correctly on Safari and IE on Macs. The page validates, as does the css but it still goes horribly wrong.

    here's the page: http://www.fo2pix.com/main.php

    here's one where I forced in a table: http://www.fo2pix.com/more.php

    and here's the stylesheet: http://www.fo2pix.com/main.css

    On Macs, the orange bar that's supposed to occur at the bottom of the centre box is floating in the middle of the page. here's the code for that:

    #copyright
    { position:relative;
    width:710px !important;
    height:26px;
    left:0px;
    right:0px;
    bottom:0px;
    font-family: verdana, trebuchet,sans-serif;
    font-size: 9px;
    FONT-WEIGHT: bold;
    text-align:left;
    padding: 5px;
    z-index:5;
    background-color: #CC3300;
    border: 1px none #000000;
    /* box hack - first width above is for everyone - width below is for IE 6only. */
    width /**/:720px;
    }
    /* "And Opera's width is here". */
    html>body #copyright {width:710px;}

    I've also got pages without the "box hack": http://www.fo2pix.com/applications/applications.php

    but I believe it does the same.

    Can anyone shed any light? I'd be ever so grateful.

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Never use relative positions when you want cross-browser compatibility. They all treat relative positioning differently.

    Either switch to position:absolute or make a different CSS for each browser and load it dynamically.

  4. #3
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1906
    damn. absolute wouldn't work with a centred layout like I have, would it?

    I have a feeling I'm going to have to go back to tables. How very disappointing...

  5. #4
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    lol... if you want a centered layout, you have to use relative.... OR

    You can use something like this:
    Code:
    <div style="position: absolute; top: 0px; left: 0px width: 100%; text-align: center;">
        <element></element>
    </div>
    <div style="position: absolute; top: 20px; left: 0px width: 100%; text-align: center;">
        <element></element>
    </div>
    That way, you're centering the contents within the divs and using them only for vertical positioning

  6. #5
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1906
    Hmm, I thought that was what I was doing, to be honest.

    Code:
    <div align="center" id="content">
    
    <div id="topNav"><div id="topContents"><phpinclude></div></div>
    <p></p>
    <p></p>
    <div id="entries">Bunchatext</div>
    
    <div id="menuRight"><span class="menuitems"><php include></span></div>
    <!--end top row of pullout boxes-->
    
    <p></p>
    <p></p>
    
    <!--middle row of pullout boxes-->
    <div class="pullouts">
    
    <div class="pullSmall"><php stuff></div>
    
    <div class="pullSmall"><php stuff></div>
    
    <div class="pullLarge"><php stuff></div></div>
    <!--end middle row of pullout boxes-->
    <p></p>
    <p></p>
    
    <!--bottom row of pullout boxes-->
    
    <div class="pullouts">
    
    <div class="pullMedium"><php stuff></div>
    
    <div class="pullMedium"><php stuff></div>
    
    <div class="pullMedium"><php stuff></div>
    
    </div>
    <!--end bottom row of boxes-->
    
    <div id="copyright">copyright 2003 Fo2PiX ltd.</div>
    </div>
    What is it that that I've got wrong? Can I just take out the relative positioning for the boxes? Will they still line up next to each other? Float seems different from browser to browser as well (or am I just doing it wrong, do you think?)

    Thanks for the help, by the way!

  7. #6
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    No time to look at it right now... maybe tomorrow... meanwhile, if anyone else wants a crack at it :-P

  8. #7
    Junior Member
    Join Date
    Jun 2003
    Posts
    4
    Member #
    1906
    Actually, I've been playing around with it and I think I see what you mean now. It's a little disappointing that the page won't automatically "enlarge" with its contents, though (if you know what I mean).

    And, of course, I have to get the small boxes to stack next to each other. :-)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 01:32 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com