www.webdeveloper.com
Results 1 to 3 of 3

Thread: page looks different in firefox

  1. #1
    Join Date
    Mar 2007
    Posts
    8

    page looks different in firefox

    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

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    .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
    At least 98% of internet users' DNA is identical to that of chimpanzees

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    "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.
    Last edited by WebJoel; 06-19-2007 at 07:53 AM.
    I build for: Firefox and tweak for IE

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles