I have got a problem on my position absolute property on IE7. My notification box move to right align in IE7 it’s work fine in IE8, ie-9 and all other browser but problem in IE7
My HTML is
<!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 is
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 fiddle http://jsfiddle.net/rizwanabbasi/jGHZK/
My screen shot
In your CSS,
.notification-bubble, you have defined the margin twice (margin:10px auto;andmargin-left:62px;). Try to delete them and just type :left:62px