SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to right-justify text better for both IE7 and FF 2.0

    Browsing to my test site with IE7 works as I want it to (the label is shifted to the right edge of the green header)

    http://www.mortgagedataweb.com/SummaryCharts/main.aspx

    With Firefox 2.0, however, the same CSS is rendered strangely.

    I've been researching and I was able to get Firefox to show more like IE7 by removing the float property from classes .accordionLink and .echoChoicesInEffect completely. While the pages look "OK" this way and the same in IE7 and FF, I would really like to have the label text be placed right-justified in the green accordionLink area.

    I added the clear: property and the white-space: property to the above classes but this doesn't solve the problem. Is there a CSS way to right-justify the text in class .echoChoicesInEffect? Thanks in advance.

    <code>
    .accordionHeader
    {
    border: 1px solid #2F4F4F;
    color: white;
    BACKGROUND: green; /* #2E4d7B; */
    font-family: Arial, Sans-Serif;
    font-size: 12px;
    font-weight: bold;
    padding: 5px;
    margin-top: 5px;
    cursor: pointer;
    width: 80%;
    }

    .accordionContent
    {
    BACKGROUND: beige; /* background-color: Gray; #D3DEEF; */
    border: 1px dashed #2F4F4F;
    border-top: none;
    padding: 5px;
    padding-top: 10px;
    width: 80%;
    }

    .accordionLink
    {
    BACKGROUND: beige; /* background-color: silver; */
    float: left;
    white-space: pre;
    clear: left;
    color: green;
    }
    .echoChoicesInEffect
    {
    float: right;
    white-space: pre;
    clear: right;
    font-style: italic;
    }
    #buttonsUnderChart
    { width: 700px }
    .ResetZoom
    { float: left }
    .ApplyAndRedraw
    {
    float: right;
    white-space: pre;
    }
    <code>

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    It is probably just the difference in the default margins and padding. If you zero those on everything at the start then the rest of the alignment code should put things in the same place on the page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You haven't cleared the floats. Floats are removed from the flow and a parent will not encompass floated children unless something solid is after the float and before the closing div of the parent.

    You could ad overflow:auto which will cause the parent to conatin its floated children but may cause conflicts in your situation.

    Code:
    .accordionHeader
    {
        border: 1px solid #2F4F4F;
        color: white;
        BACKGROUND: green;        /* #2E4d7B; */
        font-family: Arial, Sans-Serif;
        font-size: 12px;
        font-weight: bold;
        padding: 5px;
        margin-top: 5px;
        cursor: pointer;
        width: 80&#37;;
    overflow:auto
    }
    Otherwise just stick a div with clear both applied before the closing div of the parent. See the faq on floats for some better clearing methods

  4. #4
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    12
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much. This fixed it. Seems like a big subject...will do more reading.


Bookmarks

Posting Permissions

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