CSS onmouseover effect not working in FF

Discussion in 'CSS' started by Tim_Myth, Dec 12, 2008.

0
  1. #1
    The following code validates with the W3 Validator and works in IE. It almost works in FF, but the bottom two divs move when you mouse over the upper left div. How do I get the bottom two divs to stay motionless when the upper left div is moused over when using firefox?
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Page</title>
<style type="text/css">
#menu {
  width: 301px;
  height: 200px;
  border: 1px dotted black;
}

.wrapper_right {
  width: 148px;
  height: 80px;
  float: right;
  margin: 0px;
}

.wrapper_left {
  width: 148px;
  height: 80px;
  margin: 0px;
}

#menu a {
  text-decoration: none;
}

#menu_xhtml {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #fff;
  border-left: 20px solid #fff;
  border-right: 20px solid #376edc;
  border-bottom: 20px solid #376edc;
  text-align: right;
}

#menu_javascript {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #fff;
  border-left: 20px solid #6EDC37;
  border-right: 20px solid #fff;
  border-bottom: 20px solid #6EDC37;
  text-align: left;
}

#menu_xml {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #DC376E;
  border-left: 20px solid #fff;
  border-right: 20px solid #DC376E;
  border-bottom: 20px solid #fff;
  text-align: right;
}

#menu_css {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #DBA437;
  border-left: 20px solid #DBA437;
  border-right: 20px solid #fff;
  border-bottom: 20px solid #fff;
  text-align: left;
}
</style>
</head>
<body>
<div id="menu">
  <div class="wrapper_right" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_javascript"
      onmouseover="this.style.marginTop='20px'; this.style.marginBottom='0px'; this.style.marginLeft='0px';"
      onmouseout="this.style.marginTop='10px'; this.style.marginBottom='10px'; this.style.marginLeft='10px';">
      Home
    </div>
  </div>
  <div class="wrapper_left" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_xhtml"
      onmouseover="this.style.marginTop='20px'; this.style.marginBottom='0px'; this.style.marginRight='0px';"
      onmouseout="this.style.marginTop='10px'; this.style.marginBottom='10px'; this.style.marginRight='10px';">
      About Us
    </div>
  </div>
  <div class="wrapper_right" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_css"
      onmouseover="this.style.marginTop='0px'; this.style.marginLeft='0px';"
      onmouseout="this.style.marginTop='10px'; this.style.marginLeft='10px';">
      Contact Us
    </div>
  </div>
  <div class="wrapper_left" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_xml"
      onmouseover="this.style.marginTop='0px'; this.style.marginRight='0px';"
      onmouseout="this.style.marginTop='10px'; this.style.marginRight='10px';">
      My Account
    </div>
  </div>
</div>
</body>
</html>
    HTML:

     
    Tim_Myth, Dec 12, 2008 IP
  2. Ludus

    Ludus Active Member

    Messages:
    105
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    95
    #2
    I've seen on FF your page. Only the About us div move on mouse over.

    I solved in this way:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>New Page</title>
<style type="text/css">
#menu {
  width: 301px;
  height: 200px;
  border: 1px dotted black;
}

.wrapper_right {
  width: 148px;
  height: 80px;
  float: right;
  margin: 0px;
}

.wrapper_left {
  width: 148px;
  height: 80px;
  float: left;
  margin: 0px;
}

#menu a {
  text-decoration: none;
}

#menu_xhtml {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #fff;
  border-left: 20px solid #fff;
  border-right: 20px solid #376edc;
  border-bottom: 20px solid #376edc;
  text-align: right;
}

#menu_javascript {
  margin: 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #fff;
  border-left: 20px solid #6EDC37;
  border-right: 20px solid #fff;
  border-bottom: 20px solid #6EDC37;
  text-align: left;
}

#menu_xml {
  margin: 20px 10px 10px 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #DC376E;
  border-left: 20px solid #fff;
  border-right: 20px solid #DC376E;
  border-bottom: 20px solid #fff;
  text-align: right;
}

#menu_css {
  margin: 20px 10px 10px 10px;
  padding: 5px;
  font-size: 18px;
  color: #0000ff;
  border-top: 20px solid #DBA437;
  border-left: 20px solid #DBA437;
  border-right: 20px solid #fff;
  border-bottom: 20px solid #fff;
  text-align: left;
}
</style>
</head>
<body>
<div id="menu">
  <div class="wrapper_right" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_javascript"
      onmouseover="this.style.marginTop='20px'; this.style.marginBottom='0px'; this.style.marginLeft='0px';"
      onmouseout="this.style.marginTop='10px'; this.style.marginBottom='10px'; this.style.marginLeft='10px';">
      Home
    </div>
  </div>
  <div class="wrapper_left" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_xhtml"
      onmouseover="this.style.marginTop='20px'; this.style.marginBottom='0px'; this.style.marginRight='0px';"
      onmouseout="this.style.marginTop='10px'; this.style.marginBottom='10px'; this.style.marginRight='10px';">
      About Us
    </div>
  </div>
  <div class="wrapper_right" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_css"
      onmouseover="this.style.marginTop='10px'; this.style.marginLeft='0px';"
      onmouseout="this.style.marginTop='20px'; this.style.marginLeft='10px';">
      Contact Us
    </div>
  </div>
  <div class="wrapper_left" onmouseover="this.style.color='red';" onmouseout="this.style.color='blue';">
    <div id="menu_xml"
      onmouseover="this.style.marginTop='10px'; this.style.marginRight='0px';"
      onmouseout="this.style.marginTop='20px'; this.style.marginRight='10px';">
      My Account
    </div>
  </div>
</div>
</body>
</html>
    Code (markup):
    It works good on FF and IE.
     
    Ludus, Dec 13, 2008 IP
    Tim_Myth likes this.
  3. Tim_Myth

    Tim_Myth Peon

    Messages:
    741
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    0
    #3
    THANK YOU!! I've been pulling my beard out for almost two days trying to get that to work. :D
     
    Tim_Myth, Dec 13, 2008 IP
  4. justinlorder

    justinlorder Peon

    Messages:
    4,160
    Likes Received:
    61
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Buddy, the document type is transitional document , not strict document type .
    The strict document type declaration should be like this

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
     
    justinlorder, Dec 16, 2008 IP
    Tim_Myth likes this.
  5. mypsdtohtml

    mypsdtohtml Guest

    Messages:
    96
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Use a strict document type, that's right
     
    mypsdtohtml, Dec 16, 2008 IP
    Tim_Myth likes this.
  6. Tim_Myth

    Tim_Myth Peon

    Messages:
    741
    Likes Received:
    52
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Yeah, unfortunately I can't change the doctype. This is for a whypark template. Think of it like a myspace layout but different. :)
     
    Tim_Myth, Dec 16, 2008 IP