Problem with nested divs and IE

  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Okay, this is the third version of this pop-up menu that I have created today. So far, every version I have created has had something wrong with it in some browser. I have tried tables (they look different in every browser), unordered lists, ordered lists, and now divs. This time, this works perfectly in Firefox, Opera, Mozilla, and Netscape. However, it doesn't even come close to working in Internet Explorer. The background only changes when I move the mouse over the text and there is way too much space between divs.

Here is a picture of the problem I am having:
http://cfparent.nffpc.org/images/IE%div%problem.gif

Being close to the stardard is very important to me but having it work in Internet Explorer is equally important.

Is there a typical way to setup a menu like this using divs and CSS? Is there something wrong with my HTML or CSS? I have validated both but something is still obviously wrong. I have never used style sheets and divs in this manner before (I've never had a need) so this is all pretty new to me. Any help would be greatly appreciated!

Doctype:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Stylesheet:

Code: [ Select ]
.menu
{
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    border: 1px solid #000000;
    width: 131px;
    margin: 0px;
    padding: 0px;
    float: left;
}

.menu a
{
    display: block;
    padding: 2px 2px 2px 5px;
background: #006600;
text-decoration: none;
}

.menu a:link, .menu a:active, .menu a:visited
{
    color: #FFFFFF;
}

.menu a:hover
{
background: #000000;
color: #FFFFFF;
}
  1. .menu
  2. {
  3.     font-size: 12px;
  4.     font-weight: bold;
  5.     font-family: Tahoma, Arial, Verdana, sans-serif;
  6.     border: 1px solid #000000;
  7.     width: 131px;
  8.     margin: 0px;
  9.     padding: 0px;
  10.     float: left;
  11. }
  12. .menu a
  13. {
  14.     display: block;
  15.     padding: 2px 2px 2px 5px;
  16. background: #006600;
  17. text-decoration: none;
  18. }
  19. .menu a:link, .menu a:active, .menu a:visited
  20. {
  21.     color: #FFFFFF;
  22. }
  23. .menu a:hover
  24. {
  25. background: #000000;
  26. color: #FFFFFF;
  27. }

The menu:

Code: [ Select ]
<div>
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 1</a></div><br clear="left">
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 2</a></div><br clear="left">
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 3</a></div><br clear="left">
<div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 4</a></div><br clear="left">
<div><img src="/images/menu/bar_menu.gif" width="131" height="10" align="top" alt=""></div>
</div>
  1. <div>
  2. <div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 1</a></div><br clear="left">
  3. <div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 2</a></div><br clear="left">
  4. <div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 3</a></div><br clear="left">
  5. <div class="menu"><a href="" onFocus="this.blur()" target="_self">Option 4</a></div><br clear="left">
  6. <div><img src="/images/menu/bar_menu.gif" width="131" height="10" align="top" alt=""></div>
  7. </div>
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • jerryscs
  • Novice
  • Novice
  • User avatar
  • Posts: 27
  • Loc: Okinawa, Japan

Post 3+ Months Ago

I think you might be having a problem with the extra 3 pixels the IE adds to the margin if floats....otherwise known as the 3 pixel jog :D

Try adding the following statement to your stylesheet.

Code: [ Select ]
* html .menu
{
  margin-bottom: -3px;
}
  1. * html .menu
  2. {
  3.   margin-bottom: -3px;
  4. }


Hope that helps...good luck.

Jerry
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

Carl:
Welcome to Ozzu!

In the future, please use the
Code: [ Select ]
CODE
tags in your posts to make reading them easier for everyone. I've fixed your post this time.

Thanks
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

jerryscs wrote:
I think you might be having a problem with the extra 3 pixels the IE adds to the margin if floats....otherwise known as the 3 pixel jog :D

Try adding the following statement to your stylesheet.

Code: [ Select ]
* html .menu
{
  margin-bottom: -3px;
}
  1. * html .menu
  2. {
  3.   margin-bottom: -3px;
  4. }


Hope that helps...good luck.

Hmmm...that didn't seem to have any effect. :( Thanks anyway though! :)

digitalMedia wrote:
Carl:
Welcome to Ozzu!

In the future, please use the
Code: [ Select ]
CODE
tags in your posts to make reading them easier for everyone. I've fixed your post this time.

Oops! Sorry about that! Thanks! :)
  • Carl
  • Beginner
  • Beginner
  • User avatar
  • Posts: 50

Post 3+ Months Ago

Well, I've found a fix for the problem I was having with the links (on Webmaster World.com):

Code: [ Select ]
.menu {
    font-size: 12px;
    font-weight: bold;
    font-family: Tahoma, Arial, Verdana, sans-serif;
    width: 131px;
    margin: 0px;
    padding: 0px;
}

.menu a {
    border: 1px solid #000000;
    display: block;
    padding: 2px 2px 2px 5px;
    background: #006600;
    text-decoration: none;
    float: left;
}

.menu a:link, .menu a:visited, .menu a:active {
    color: #FFFFFF;
}

.menu a:hover {
    background: #000000;
    color: #FFFFFF;
}

/* hide from Mac IE 5.0 */
@media all {
    * html body .menu a {
        width: 100%;
    }
}
  1. .menu {
  2.     font-size: 12px;
  3.     font-weight: bold;
  4.     font-family: Tahoma, Arial, Verdana, sans-serif;
  5.     width: 131px;
  6.     margin: 0px;
  7.     padding: 0px;
  8. }
  9. .menu a {
  10.     border: 1px solid #000000;
  11.     display: block;
  12.     padding: 2px 2px 2px 5px;
  13.     background: #006600;
  14.     text-decoration: none;
  15.     float: left;
  16. }
  17. .menu a:link, .menu a:visited, .menu a:active {
  18.     color: #FFFFFF;
  19. }
  20. .menu a:hover {
  21.     background: #000000;
  22.     color: #FFFFFF;
  23. }
  24. /* hide from Mac IE 5.0 */
  25. @media all {
  26.     * html body .menu a {
  27.         width: 100%;
  28.     }
  29. }


Code: [ Select ]
<div>
    <div class="menu"><a href="">Option 1</a></div>
    <div class="menu"><a href="">Option 2</a></div>
    <div class="menu"><a href="">Option 3</a></div>
    <div class="menu"><a href="">Option 4</a></div>
    <div class="menu"><img src="images/menu/bar_menu.gif" width="131" height="10" align="top"></div>
</div>
  1. <div>
  2.     <div class="menu"><a href="">Option 1</a></div>
  3.     <div class="menu"><a href="">Option 2</a></div>
  4.     <div class="menu"><a href="">Option 3</a></div>
  5.     <div class="menu"><a href="">Option 4</a></div>
  6.     <div class="menu"><img src="images/menu/bar_menu.gif" width="131" height="10" align="top"></div>
  7. </div>


Unfortunately, now I can't get the box to stop hugging the text in every browser EXCEPT IE. :roll: :cry:

Post Information

  • Total Posts in this topic: 5 posts
  • Users browsing this forum: No registered users and 31 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.