Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > How do you keep divs from overlapping?
536998755_Inactive (New Admin) 4/22/2005 3:13 AM EST : How do you keep divs from overlapping?
536998755_Inactive
Posts: 328
Fingers of Fury!

name="5469069">

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>

TopBottom

Szleynix (New Admin) 4/23/2005 2:14 PM EST : RE: How do you keep divs from overlapping?
Szleynix
Posts: 2231
Zomgawsh Poster

If you're gonna increase the text size using an IE  feature (or something else used for accessibility) try using % for font size. Perhaps Heading 1 is 110%, Heading 2 100%, Normal 80% etc.

Not sure that will resolve the issue you have tho, IE does need some 'hacks' to get it to work with CSS properly.


Also not sure about the coding there

<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>

Should be something like this in IE

<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>Downloads></li
   ><li>Forum</li
   ><li>Links</li
   ></ul>

Yes, breaking that last </li> tag is intentional.
TopBottom

536998755_Inactive (New Admin) 4/25/2005 12:41 AM EST : RE: How do you keep divs from overlapping?
536998755_Inactive
Posts: 328
Fingers of Fury!

Tried that awhile back, didn't work.  Also tried changing positioning to relative or static, and that just makes things worse.

I guess I could always just not make my site friendly for the vision impaired (Force sizes through specifying them in pixels rather than em or percents)... It's not like I personally use text size modification, and it's their problem for using IE. 

Anyway, this kinda confuses me:

Szleynix said:

Should be something like this in IE
...
...
Yes, breaking that last </li> tag is intentional.


What's the point in it?  I don't really understand why you would want to do it, and it appears to be working fine right now.
TopBottom

Szleynix (New Admin) 4/27/2005 4:17 AM EST : RE: How do you keep divs from overlapping?
Szleynix
Posts: 2231
Zomgawsh Poster

Zagreus said:

What's the point in it?  I don't really understand why you would want to do it, and it appears to be working fine right now.


If it's ok with your code atm, then leave it.

Breaking the tag up like this is a hack to fix the way IE displays menu bars that use lists and divs - otherwise you can often end-up with ugly spaces between menu items.
TopBottom

536998755_Inactive (New Admin) 4/27/2005 4:24 AM EST : RE: How do you keep divs from overlapping?
536998755_Inactive
Posts: 328
Fingers of Fury!

name="5521885">

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;
}

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%