This is just a general web design question, not guildportal specific, sorry!

I've been messing with CSS and div positioning to get a nice layout, but they keep overlapping if I change my text size (Internet Explorer View->Text Size->Largest).

Does it have to do with positioning or specifying sizes with em instead of px or some other identifier?

In the example below, everything looks just fine and dandy... until you change the text size.


Here's an example of how I define the style properties for the divs:


#Header {

 position: absolute;
 top:  0;
 left:  0;
 height:  10em;
 width:  775px;
}

#Navigation {

 position:  absolute;
 left:  8px;
 margin-top: 3.75em;
 width:  10em;
 border-color: #DCDCAD;
 border-style: solid;
 border-width: 1px;
}

The actual text of my those two divs are as follows:


 <div id="Header">

 <h1>Zagreus' Portalis Information</h1>

</div>

<div id="Navigation">

 <ul>
  <li>Documentation</li>
  <li><ul class="submenu">
   <li>About MUDs</li>
   <li>About SMAUG</li>
   <li>About Portalis</li>
   <li>Newbie Guide</li>
  </ul></li>
  <li>Downloads></li>
  <li>Forum</li>
  <li>Links</li>
 </ul>

Ahh, I see.. Maybe I don't have that problem because I use list-style: none in my CSS for Navigation.ul and Navigation.li... Here's the complete version:

#Navigation {
 position:  absolute;
 left:  8px;
 margin-top: 56.25px;
 width:  150px;
 border-color: #DCDCAD;
 border-style: solid;
 border-width: 1px;
 font-size: 15px;
}

#Navigation ul{
 list-style: none;
 margin-left: 0;
 padding-left: 0;
}

#Navigation ul.submenu {
 text-indent: 15px;
}

#Navigation li {
 border-color: white;
 border-style: solid;
 border-width: 1px;
 background-color: #900;
 color:  white;
 font-size: 15px;
}