Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    FireFox issue with CSS.

    Can anybody help me. Why does this work in IE6 and IE7 and not in firefox is it not really CSS compliant?

    Code:
    <head runat="server">
        <title>Untitled Page</title>
        <style type='text/css'>
        .haqrb
        {
            float:left;
        }
        .haqa
        {
            float:left;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="float:left;width:500px; border-left-color: lime; border-bottom-color: lime; border-top-style: solid; border-top-color: lime; border-right-style: solid; border-left-style: solid; border-right-color: lime; border-bottom-style: solid;">Hello World</div>
        <div style="float:left;">
        <div style="float:left; text-align:right; border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;">
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div style="clear:both;"></div>
        <div style="float:left">Left</div>Right
        </div>
        </div>
        </form>
    </body>
    This is what the code should look like.


    But in FireFox the words "Left" and "Right" are put together on the left of the div. When they should be text-aligned RIGHT!

    Thanks,
    Darren

  • #2
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Firefox is CSS compliant, far more so than IE (which makes a mess of things)

    I always say design on FireFox and hack for IE

    It seems the reason that Firefox isn't doing as you require is because this is invalid code.

    You should put the left aligned and right aligned text into different divs and then have one as right aligned and one as left. You must make sure your boxes aren't clearing.

    Code:
    <html>
    <head>
    <style>
    .right_aligned
    {
      float:right;
     clear:none;
     text-align:right;
    
    }
    
    .left_aligned
    {
     float:left;
     clear:none;
     text-align:left;
     
    }
    </style>
    </head>
    <body>
    <div style="width:500px; float:left; border:1px solid blue;">
        <div class="left_aligned" >
        
         Left 
        </div>
    
        <div class="right_aligned">
         Right 
        </div>
    </div>
    </body>
    </html>
    PS if all sides of the box are the same solid and blue then you only need one line in your CSS as shown below.

    use:
    Code:
     border:1px solid blue;

    instead of:
    Code:
    border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;
    You can not say you know how to do something, until you can teach it to someone else.

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I'd probably put those left and right floated elements in to spans rather than divs to keep them as inline. Also, to the thread starter, you don't need to float text left to get it to align next to each other. Text automatically positions inline until it reaches a set width or is given an HTML rule to create a line-break or block.

    (Also, don't forget the doctype, which Tim didn't put into his example code out of laziness )
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your suggestions. So I changed the code to use a <span> float left and a <span> float right, but then I've actually tried that before and this is the result. ( I omitted the DOCTYPE for brevity )

    Code:
    <head>
        <style type='text/css'>
        .haqrb
        {
            float:left;
        }
        .haqa
        {
            float:left;
        }
        </style>
    </head>
    <body>
        <form id="form1">
        <div style="float:left;width:500px; border-left-color: lime; border-bottom-color: lime; border-top-style: solid; border-top-color: lime; border-right-style: solid; border-left-style: solid; border-right-color: lime; border-bottom-style: solid;">Hello World</div>
        <div style="float:left;">
        <div style="float:left; border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;">
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div class="haqrb">Text</div>
        <div style="clear:both;"></div>
        <span style="float:left">Left</span><span style="float:right">Right</span>
        </div>
        </div>
        </form>
    </body>
    </html>


    On Firefox it would even wrap to the next line so the box would be displayed one above and one below. I would like the blue box to maintain the size of the "texttexttext" stuff. But when I float right it will take up the entire space on the browser. But I don't know how wide the texttexttext stuff is going to be so I can't set it in pixels. Any ideas?

    Thanks,
    Darren

  • #5
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok here is a solution I could live with. Thank you for your suggestions because they helped me come to this one. Get rid of the DIVs for Spans and then centre horizontally which is OK. It works in Firefox as well.

    The Green and Blue Borders are just for refrence and yeah I could have just used border:. The design program I use does that.

    Code:
    <head>
        <style type='text/css'>
        .haqa
        {
            float:left;
        }
        </style>
    </head>
    <body>
        <form id="form1">
        <div style="float:left;width:500px; border-left-color: lime; border-bottom-color: lime; border-top-style: solid; border-top-color: lime; border-right-style: solid; border-left-style: solid; border-right-color: lime; border-bottom-style: solid;">Hello World</div>
        <div style="float:left;width:309px;">
        <div style="text-align:center; border-left-color: blue; border-bottom-color: blue; border-top-style: solid; border-top-color: blue; border-right-style: solid; border-left-style: solid; border-right-color: blue; border-bottom-style: solid;">
        <span class="haqrb">Text2</span>
        <span class="haqrb">Text2</span>
        <span class="haqrb">Text2</span>
        <span class="haqrb">Text2</span>
        <span class="haqrb">Text2</span>
        <span class="haqrb">Text2</span>
        <span class="haqrb">Text2</span>
        <span style="float:left">Left</span><span style="float:right">Right</span>
        </div>
        </div>
        </form>
    </body>
    </html>

  • #6
    Senior Coder timgolding's Avatar
    Join Date
    Aug 2006
    Location
    Southampton
    Posts
    1,517
    Thanks
    114
    Thanked 110 Times in 109 Posts
    Good! however you should sort your CSS out as suggested
    You can not say you know how to do something, until you can teach it to someone else.


  •  

    Posting Permissions

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