Problem with firefox

Discussion in 'CSS' started by Sina, Feb 18, 2007.

0
  1. #1
    hello all

    how i can see this page like a IE on the firefox :

    http://www.7arcade.com/css/test.php

    please help me, thanks :)
     
    Sina, Feb 18, 2007 IP
  2. unitedrokz

    unitedrokz Peon

    Messages:
    86
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #2
    remove the float:left from the efg class...you dont need it in this case
     
    unitedrokz, Feb 18, 2007 IP
  3. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #3
    The float element is not in the flow; the parent doesn't have knowledge of its existence. As far as the parent is concerned, it is an empty element. There are several methods that will cause the parent to enclose its float child. See Enclosing Float Elements for a demo.

    IE does it all wrong. It is a Bad Idea® to use a buggy browser to test your code. You will end up writing buggy code. Use a modern browser, such as Firefox for your testing. It is much simpler to have proper code and add work-arounds for stupid browsers like IE, than it is to start with buggy code and try to make it work for the good browsers.

    As a quick fix, 
    
.abc {
    overflow: hidden;
    background-color: #FFFFCC;
    width: 90%;
    border: 1px solid #000000;
    }
    Code (markup):
    cheers,

    gary
     
    kk5st, Feb 18, 2007 IP
  4. Clive

    Clive Web Developer

    Messages:
    4,507
    Likes Received:
    297
    Best Answers:
    0
    Trophy Points:
    250
    #4
    Here, <br clear="all" /> is the key: 
    <!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=iso-8859-1" />
<title>css test</title>
<style type="text/css">
<!--
.abc {
	background-color: #FFFFCC;
	width: 90%;
	border: 1px solid #000000;
}
.efg {
	background-color: #FFCCFF;
	float: left;
	width: 500px;
}
-->
</style>
</head>

<body>
<div class="abc">
<div class="efg">this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test this is a test 
</div><br clear="all" />
</div>
</body>
</html>
    Code (markup):
     
    Clive, Feb 19, 2007 IP