PDA

Click to See Complete Forum and Search --> : page looks different in firefox

bindia
06-19-2007, 06:09 AM
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
Fang
06-19-2007, 06:45 AM
.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
{
padding-top: 6px;
padding-left: 9px;
padding-right: 9px;
padding-bottom: 5px;
border:1px solid blue;

}
.SmallPageHeadingRightItem
{
border:1px solid blue;
padding-left: 6px;
}
.SmallPageHeadingRight table
{
float: right;
}
Why tables for layout is stupid (http://www.hotdesign.com/seybold/)
WebJoel
06-19-2007, 07:47 AM
"text-align:left;" is for aligning text to the left. I do not think it will have the same effect on images unless they are part of a <p>.

<a href="" title="Add "The Hold" to favourites" target="_parent">

is in error: too many double-quotes.

Try it:

<a href="" title='Add "The Hold" to favourites' target="_parent">

Note 'single quotes' that wrap "double quotes". This will validate now.