Hi,
My below code looks different in IE and firefox.I wanted to get the same look as IE. I am not able to change the code so my only option is to work around with the css.
Would you please help me out and let me what is to be done to get the same look in firefox as it looks in IE.
The 2 img buttons in div "SmallPageHeadingRight" are placed to the left in FF even though the text-align is set to right.
Please do help.
The code:
<html>
<head>
<style type="text/css">
.SmallPageHeadingTable
{
width: 100%;
border-bottom: 2px solid #000066;
}
.SmallPageHeading
{
font-family: Arial;
font-weight: bold;
font-size: 15px;
color: #000066;
text-align: left;
padding-top: 6px;
padding-bottom: 3px;
padding-left: 9px;
}
.SmallPageHeadingRight
{
text-align: right;
padding-top: 6px;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 5px;
border:1px solid blue;
}
.SmallPageHeadingRightItem
{
text-align: right;
border:1px solid blue;
padding-left: 6px;
}
</style>
</head><body>
<table class="SmallPageHeadingTable">
<tbody><tr>
<td class="SmallPageHeading">The Hold</td>
<td class="SmallPageHeadingRight">
<table cellspacing="0" cellpadding="0">
<tbody><tr>
<td>
</td><td class="SmallPageHeadingRightItem">
<a href="" title="Add "The Hold" to favourites" target="_parent">
<img border="0" src="/wcm/site/img/buttons/add2favs.gif"/>
</a>
</td><td class="SmallPageHeadingRightItem">
<a href="javascript:history.back();">
<img border="0" src="/wcm/site/img/buttons/back_btn.gif" />
</a>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
Thanks
Reply With Quote
Bookmarks