CSS Codes
CSS Layouts
Results 1 to 4 of 4

Thread: serious CSS positioning problems with Mac/Safari

  1. 12-04-2008, 03:20 AM #1
    dineonyourdesign
    dineonyourdesign is offline Junior Coders
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default serious CSS positioning problems with Mac/Safari

    i was wondering if anybody could check my source and tell me what i'm doing wrong. the few parts i am positioning (the navigation & the iframe) are not positioned correctly on screen on Mac browsers.

    http://flammabledesign.com/WhiteAugust/test/index.html

    any help would be greatly appreciated. thanks!
    Reply With Quote Reply With Quote
  2. 12-04-2008, 08:17 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    That is a very poor way to lay out a page, they're not 'positioned correctly' in any browser if the size of the browser window is narrow enough. But for a quick fix:

    Code:
    #Nav {
  position : absolute;
  left : 50%;
  margin-left: -230px;
  top : 232px;
  width : 461px;
  height : 58px;
}

#Frame {
  position : absolute;
  left : 50%;
  margin-left: -230px;
  top : 290px;
  width : 461px;
  height : 247px;
}
    The major drawback of which is that now if the window gets narrow enough (less than 460px) the whole thing will still break down. But at least it's a big improvement.

    Edit:
    Here's a much better way. I've combined all of the styles into one style section:

    Code:
    <style type="text/css">
<!--
A:Link    {color: #273691; text-decoration: none}
A:Visited {color: #273691; text-decoration: none}
A:Hover   {color: #aca095; text-decoration: underline}


body  {
  background: #293a8e url('tilebg.jpg') repeat fixed 50% 45%;
  margin: 0;
  padding: 0;
}
#container {
  background: transparent url(whiteaugust.gif) no-repeat center;
  height: 633px;
  padding-top: 40px;
}
#Nav {
  margin: 0 auto;
  padding-top: 195px;
  width: 395px;
  height : 58px;
}

#Frame {
  margin: 0 auto;
  width : 461px;
  height : 247px;
}

#dropmenudiv{
position : absolute;
border : 1px solid #273691;
border-bottom-width : 0;
font : normal 7.5pt Tahoma, Arial,Helvetica;
line-height : 8pt;
z-index : 100;
}

#dropmenudiv a{
width : 100%;
display : block;
text-indent : 14px;
border-bottom : 1px solid #273691;
padding : 1px 0;
text-decoration : none;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #273691;
}
-->
</style>
    And here's the markup:

    HTML Code:
    <body>
<div id="container">

<div id="Nav">

<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td valign="middle">

<script type="text/javascript" src="rollover.js"></script>
<a href="genie.html" target="content"><img src="01_genie_off.jpg" oversrc="01_genie_on.jpg" border="0" alt=""></a>
<a href="#" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()"><img src="02_teas_off.jpg" oversrc="02_teas_on.jpg" border="0" alt=""></a>
<img src="03_products_off.jpg" oversrc="03_products_on.jpg" border="0" alt="">
<img src="04_gifts_off.jpg" oversrc="04_gifts_on.jpg" border="0" alt="">

<img src="05_story_off.jpg" oversrc="05_story_on.jpg" border="0" alt="">
<img src="06_contact_off.jpg" oversrc="06_contact_on.jpg" border="0" alt="">

</td>

</tr>

</table>

</div>

<div id="Frame">

<iframe name="content" frameborder="0" style="border:0px solid white" width=461 height=247 src="welcome.html" scrolling=NO></iframe>

</div>


</div>
</body>
    Last edited by jscheuer1; 12-05-2008 at 03:14 AM. Reason: add alternative - later, remove top: from #Frame
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    dineonyourdesign (12-04-2008)
  4. 12-04-2008, 04:23 PM #3
    dineonyourdesign
    dineonyourdesign is offline Junior Coders
    Join Date
    Dec 2008
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    you are a lifesaver john, and you've opened my CSS eyes.
    Reply With Quote Reply With Quote
  5. 12-04-2008, 05:00 PM #4
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    One thing I forgot to mention is that for this to work in IE, you need a valid URL DOCTYPE. Since you are using iframe, that would have to be:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
    It goes as the very first thing on your page, before the opening <html> tag, as shown above.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

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

Forum Rules