I have a problem with absolute position property in IE7. My notification block moves right in IE7, it works fine in IE8, i.e. -9, and in all other browsers, but the problem is in IE7
My html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <body> <div align="center"> <div class="notification-bubble"> <div class="chat-bubble-arrow-border"></div> <div class="chat-bubble-arrow"></div> This should be on top in all browser </div> <div class="gray-form-box"> <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> "Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet" <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p> <div class="seperator-line"></div> <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> "Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet" <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p> <div class="seperator-line"></div> <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> "Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet" <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p> <div class="seperator-line"></div> <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> "Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet" <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p> <div class="seperator-line"></div> <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> "Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet" <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p> <div class="seperator-line"></div> <p class="notification-text"><span class="notification-group"></span><a href="#">User Name:</a> "Aliquam erat volutpat. Aliquam eu massa id augue tincidunt accumsan. Cras cursus imperdiet tempus. Integer in libero mi, quis condimentum tellus. Aliquam augue quam, tincidunt at imperdiet" <a href="#" class="notification-time"> 03 June 6:12 pm. </a></p> </div> </div> </body> </html>
My css
body { margin:0px; padding:0px; } .notification-bubble { background-color:#ffffff; border:1px solid #c1c1c1; font-size:35px; height:269px; margin:10px auto; position:absolute; text-align:center; width:280px; margin-top:45px; -moz-box-shadow: 0px 0px 10px #666666; -webkit-box-shadow: 0px 0px 10px #666666; box-shadow: 0px 0px 10px #666666; margin-left:62px; } .chat-bubble-arrow-border { border-color: transparent transparent #c2c2c2 transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; top:-21px; right:30px; } .chat-bubble-arrow { border-color: transparent transparent #ffffff transparent; border-style: solid; border-width: 10px; height:0; width:0; position:absolute; top:-19px; right:30px; } .gray-form-box { width:800px; height:100%; background-color:#f5f5f5; border:1px solid #e5e5e5; float:left; margin-bottom:30px; } .notification-group { width:26px; height:26px; margin:10px; float:left; margin-top:2px; background-color:#FF0000; } .notification-text { font-family:Arial, Helvetica, sans-serif; font-size: 13px; font-weight: normal; color: #333333; text-align: left; text-decoration:none; float:left; margin-top:10px; line-height:18px; margin-right:10px; } .notification-text a:link { font-weight: bold; color: #3366cc; text-decoration:none; } .notification-text a:visited { font-weight: bold; color: #3366cc; text-decoration:none; } .notification-text a:hover { text-decoration:underline; } .notification-text a:active { text-decoration:underline; } a.notification-time:link { font-weight: normal; color: #808080; text-decoration:none; font-size: 11px; } a.notification-time:hover { text-decoration:underline; } .seperator-line { width:90%; height:1px; background-color:#d1d0d0; display:block; float:left; margin-left:5%; }
Your help will be greatly appreciated.
Check out the script http://jsfiddle.net/rizwanabbasi/jGHZK/
My screenshot
source share