i want it too look same in firefox..........Tricky SOLVE IT

Discussion in 'CSS' started by flawlessking, Apr 20, 2009.

0
  1. #1
    This is the little CSS coding i was trying out but failed to achieve what i wanted...i am a newbie in css....please try to figure out what is wrong with this Coding...............in IE its working but in firefox its not........THANKS

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .one {
    height:auto;
    width: 200px;
    background-color:#FF0000;


    }
    .two {
    height:200px;
    width: 100px;
    background-color:#999999;
    float:right;

    }
    -->
    </style>
    </head>

    <body>
    <div class="one">asdfsdfasf<div class="two">asdfasfasf</div></div>
    </body>
    </html>
     
    flawlessking, Apr 20, 2009 IP
  2. drhowarddrfine

    drhowarddrfine Peon

    Messages:
    5,428
    Likes Received:
    95
    Best Answers:
    7
    Trophy Points:
    0
    #2
    The problem, as always, is IE. IE is expanding the parent element, .one, to contain floated elements. This is a bug in IE. If you wish more modern browsers to imitate IEs bug, add 'overflow:auto' to the parent element.

    Never, ever look at IE for how things should work. It's 11 years behind all other browsers in modern standards and practices.
     
    drhowarddrfine, Apr 20, 2009 IP
  3. flawlessking

    flawlessking Well-Known Member

    Messages:
    136
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    101
    #3
    great reply Drhowarddrfine thankssssss
     
    flawlessking, Apr 21, 2009 IP
  4. sizzlefire

    sizzlefire Member

    Messages:
    397
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    35
    #4
    For future reference btw, if you have a problem with a code in one language, you can always do something like this: 

    
<!--[if IE ]>
  <link href="iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
    Code (markup):
     
    sizzlefire, Apr 21, 2009 IP
  5. Kooi Designs

    Kooi Designs Peon

    Messages:
    32
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    A very good suggestion.

    Conditional Comments...I fall back on this from time to time. Microsoft knows they messed up and offer this fix. You can learn more about it on their site...

    http://msdn.microsoft.com/en-us/library/ms537512.aspx
     
    Kooi Designs, Apr 21, 2009 IP