Back To Website Design Forum

position compatibility for IE and Firefox

  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 8th, 2008, 12:08 pm

I did the searches for positioning in the forum but they're all telling me not to use position: absolute; instead to use inline, unfortunately I don't think I can do this because I need a container div around all my contents to position everything in the center. The problem is my "content" and "navbar" divs are way too high in IE but are positioned where they should be in firefox.


html:
Code: [ Select ]
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>BorgBand.com We Are Borg!</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="loadContent.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="loadContent('page_home.html', 'content');">
    <div id="horizon">
    <div id="inset">
        <div id="imghorizon">
        <img src="images/background.jpg" id="bgimage" />
        </div>
    <div id="container">
        <table cellspacing="0" cellpadding="0">
        <tr>
        <td rowspan="2">
            <div id="content">            </div>        </td>
        </tr>
        <tr>
        <td>
            <div id="navbar">
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_home.html', 'content');">Home</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_events.html', 'content');">Upcoming Events</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_about.html', 'content');">About The Band</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
            <p>-----------</p>
            <p><a href="#" onclick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
            <p>-----------</p>
            </div>        </td>
        </tr>
        </table>
    </div>
    </div>
    </div>
</body>
</html>
 
  1.      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>BorgBand.com We Are Borg!</title>
  6. <link href="style.css" rel="stylesheet" type="text/css" />
  7. <script src="loadContent.js" type="text/javascript"></script>
  8. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  9. </head>
  10. <body onload="loadContent('page_home.html', 'content');">
  11.     <div id="horizon">
  12.     <div id="inset">
  13.         <div id="imghorizon">
  14.         <img src="images/background.jpg" id="bgimage" />
  15.         </div>
  16.     <div id="container">
  17.         <table cellspacing="0" cellpadding="0">
  18.         <tr>
  19.         <td rowspan="2">
  20.             <div id="content">            </div>        </td>
  21.         </tr>
  22.         <tr>
  23.         <td>
  24.             <div id="navbar">
  25.             <p>-----------</p>
  26.             <p><a href="#" onclick="loadContent('page_home.html', 'content');">Home</a></p>
  27.             <p>-----------</p>
  28.             <p><a href="#" onclick="loadContent('page_events.html', 'content');">Upcoming Events</a></p>
  29.             <p>-----------</p>
  30.             <p><a href="#" onclick="loadContent('page_about.html', 'content');">About The Band</a></p>
  31.             <p>-----------</p>
  32.             <p><a href="#" onclick="loadContent('page_sponsors.html', 'content');">Sponsors</a></p>
  33.             <p>-----------</p>
  34.             <p><a href="#" onclick="loadContent('page_contact.html', 'content');">Contact Us</a></p>
  35.             <p>-----------</p>
  36.             </div>        </td>
  37.         </tr>
  38.         </table>
  39.     </div>
  40.     </div>
  41.     </div>
  42. </body>
  43. </html>
  44.  


CSS:
Code: [ Select ]
*{
    margin: 0;
    padding: 0;
    z-index: 1;
}
 
body{
    background-color:#000066;
    color: #CCCCCC;
    overflow: hidden;
    background-image: url(images/bgstripe.jpg);
}
 
a{
    color: #CCCCCC;
}
 
a:hover{
    color: #CC6633;
}
 
#horizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
}
 
#inset{
    width:800px;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: -400px;
    overflow: visible;
}
 
#bgimage{
    overflow: visible;
    z-index: -1;
    width: 800px;
    height: 600px;
}
 
#imghorizon{
    position: absolute;
    top: 50%;
    width: 100%;
    height: 1px;
    overflow: visible;
    z-index: -2;
}
 
#container{
    width: 800px;
    height: 100%;
    padding-left: 30px;
    padding-top: 190px;
    margin-left: 0px;
    margin-top: 10%;
}
 
#content{
    padding-left: 10px;
    margin-top: 40px;
    width: 510px;
    height: 400px;
    margin-right: 30px;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    background-color: transparent;
}
 
.contentcell{
    margin-top: 20px;
    overflow: scroll;
    height: 235px;
    width: 500px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    background-color: transparent;
}
 
#navbar{
    padding-left: 10px;
    padding-top: 0px;
    width: 180px;
    margin-left: 10px;
}
 
#navbar a:link, a:visited{
    color:#CCCCCC;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
}
 
#navbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
}
 
#aboutnavbar a:link, a:visited{
    color:#CCCCCC;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
}
 
#aboutnavbar a:hover{
    background-color: #993300;
    border: dashed thin #FF0000;
    color: #CCCCCC;
    text-align: center;
}
 
#abouttext{
    padding-top: 15px;
}
 
.abouttextcell{
    height: 233px;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: inherit;
    padding-left: 15px;
}
 
.aboutpics{
    height: 234px;
    width: 124px;
    border: #B4B4B4 medium solid;
}
  1. *{
  2.     margin: 0;
  3.     padding: 0;
  4.     z-index: 1;
  5. }
  6.  
  7. body{
  8.     background-color:#000066;
  9.     color: #CCCCCC;
  10.     overflow: hidden;
  11.     background-image: url(images/bgstripe.jpg);
  12. }
  13.  
  14. a{
  15.     color: #CCCCCC;
  16. }
  17.  
  18. a:hover{
  19.     color: #CC6633;
  20. }
  21.  
  22. #horizon{
  23.     position: absolute;
  24.     top: 50%;
  25.     width: 100%;
  26.     height: 1px;
  27.     overflow: visible;
  28. }
  29.  
  30. #inset{
  31.     width:800px;
  32.     height: 200px;
  33.     position: absolute;
  34.     left: 50%;
  35.     margin-left: -400px;
  36.     top: -400px;
  37.     overflow: visible;
  38. }
  39.  
  40. #bgimage{
  41.     overflow: visible;
  42.     z-index: -1;
  43.     width: 800px;
  44.     height: 600px;
  45. }
  46.  
  47. #imghorizon{
  48.     position: absolute;
  49.     top: 50%;
  50.     width: 100%;
  51.     height: 1px;
  52.     overflow: visible;
  53.     z-index: -2;
  54. }
  55.  
  56. #container{
  57.     width: 800px;
  58.     height: 100%;
  59.     padding-left: 30px;
  60.     padding-top: 190px;
  61.     margin-left: 0px;
  62.     margin-top: 10%;
  63. }
  64.  
  65. #content{
  66.     padding-left: 10px;
  67.     margin-top: 40px;
  68.     width: 510px;
  69.     height: 400px;
  70.     margin-right: 30px;
  71.     padding-top: 0px;
  72.     font-family: Arial, Helvetica, sans-serif;
  73.     background-color: transparent;
  74. }
  75.  
  76. .contentcell{
  77.     margin-top: 20px;
  78.     overflow: scroll;
  79.     height: 235px;
  80.     width: 500px;
  81.     overflow: scroll;
  82.     overflow-x: hidden;
  83.     overflow-y: inherit;
  84.     background-color: transparent;
  85. }
  86.  
  87. #navbar{
  88.     padding-left: 10px;
  89.     padding-top: 0px;
  90.     width: 180px;
  91.     margin-left: 10px;
  92. }
  93.  
  94. #navbar a:link, a:visited{
  95.     color:#CCCCCC;
  96.     font-weight: bold;
  97.     font-family: Arial, Helvetica, sans-serif;
  98.     font-size: small;
  99. }
  100.  
  101. #navbar a:hover{
  102.     background-color: #993300;
  103.     border: dashed thin #FF0000;
  104.     color: #CCCCCC;
  105. }
  106.  
  107. #aboutnavbar a:link, a:visited{
  108.     color:#CCCCCC;
  109.     font-family: Arial, Helvetica, sans-serif;
  110.     font-size: 12px;
  111.     text-align: center;
  112. }
  113.  
  114. #aboutnavbar a:hover{
  115.     background-color: #993300;
  116.     border: dashed thin #FF0000;
  117.     color: #CCCCCC;
  118.     text-align: center;
  119. }
  120.  
  121. #abouttext{
  122.     padding-top: 15px;
  123. }
  124.  
  125. .abouttextcell{
  126.     height: 233px;
  127.     overflow: scroll;
  128.     overflow-x: hidden;
  129.     overflow-y: inherit;
  130.     padding-left: 15px;
  131. }
  132.  
  133. .aboutpics{
  134.     height: 234px;
  135.     width: 124px;
  136.     border: #B4B4B4 medium solid;
  137. }


any ideas?

here's a link so you can see on both browsers http://mindfullsilence.angelfire.com/#
Use your words like arrows to shoot toward your goal.
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 8th, 2008, 12:08 pm

  • gonzoka
  • Student
  • Student
  • No Avatar
  • Joined: Jul 30, 2005
  • Posts: 75
  • Loc: Bristol, UK
  • Status: Offline

Post August 11th, 2008, 2:03 am

You can position elements center without using absolute - (more difficult to center vertically though, so I'm hoping you're not asking for that).

Use CSS such as:

Code: [ Select ]
body { text-align:center; }
#container {
    text-align:left;
    width:800px;
    margin:0 auto;
    border:1px solid red;
    height:200px; }
}
  1. body { text-align:center; }
  2. #container {
  3.     text-align:left;
  4.     width:800px;
  5.     margin:0 auto;
  6.     border:1px solid red;
  7.     height:200px; }
  8. }


and HTML such as:
Code: [ Select ]
<body>
    <div id="container">
        <!-- All of your content here -->
    </div>
</body>
  1. <body>
  2.     <div id="container">
  3.         <!-- All of your content here -->
  4.     </div>
  5. </body>


I've added a height and border to the container div just so you can see where it is but those rules are not necessary.

Hope this helps - if you use this code you may find that you need to rewrite the code for the other aspects of the content in your site, but once its done you'll find it a lot easier to maintain and update.
  • mindfullsilence
  • Professor
  • Professor
  • User avatar
  • Joined: Aug 04, 2008
  • Posts: 846
  • Status: Offline

Post August 11th, 2008, 6:00 am

thank you gonzoka, unfortunately I do need to center the container div vertically. Not to worry though, centering vertically was something I had already figured out. I needed everything inside the div which is centered vertically to render in the same spot on both browsers, I figured it out though, stupid mistake really. I set all divs inside the container div to absolute and now they're positioned where they should be in both browsers.
Use your words like arrows to shoot toward your goal.

Page 1 of 1

Post Information

  • Total Posts in this topic: 3 posts
  • Users browsing this forum: No registered users and 63 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.