CSS problem in firefox

Discussion in 'CSS' started by banzaicat, Aug 8, 2008.

0
  1. #1
    First off, hello everyone, i'm new to this forum and kind of new to CSS. Before posting I've searched for some time a solution for a problem i had, and found it when i saw a post in this forum redirecting to this website, which is awesome and helped me a lot: http://www.graphicson.com/html/portfolio.html,layouts

    I tried to change one of the layouts to what i wanted it to be like, and another problem came up.

    In Internet Explorer, it works really well, like this:
    IE: http://www.flickr.com/photos/25024145@N03/2743140863/sizes/o/

    But in Firefox, it seems that the background can't keep up with the contents:
    Firefox: http://www.flickr.com/photos/25024145@N03/2743140835/sizes/o/

    What i pretend is to have two columns, the left one with 200px and the right one with 600px, and have it change it's height dynamically acording to the contents placed in there.

    I'm using Firefox 3.0.1., and both css and html are W3C Validated.

    Here's the HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>Layout 027 - Liquid Width of CSS Layouts</title>
        <link rel="stylesheet" type="text/css" href="style2.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>
        <div id="wrapper">
            <div id="header"></div>         
            <div id="navigation"></div>
            <div id="spacer"></div>            
            <div id="bar"></div>
            <div id="central">
                <div id="leftcolumn">
                    <div id="content">
                        <div class="innertube">
                            Left Column<br />adasd<br />
                        </div>
                    </div>
                </div>
                <div id="main">
                    <div id="content2">
                        <div class="innertube">
                            Content<br />dsda<br />dasd<br />
                        </div>
                    </div>
                </div>
            </div>
            <div id="footer"></div>
        </div>
    </body>
</html>
    Code (markup):
    And here's the CSS:
    body {
	margin:0;
	padding:0;
	font: 12px tahoma;
	background-color:#666666;
	color:#000000;
	text-align:center;
}

#wrapper { 
	width:824px;
	margin:0 auto;
}

#header {
	background:url(55878/images/Untitled-1_03.png); 
	width:100%; 
	height:52px; 
	margin:0 0 0px 0;
}

#navigation{ 
	background:url(55878/images/Untitled-1_05.png);
	width:100%; 
	height:103px; 
	margin:0 0 0px 0;
}

#spacer {
	background:url(55878/images/Untitled-1_06.png);
	width:100%; 
	height:12px;
}

#bar {
	background:url(55878/images/Untitled-1_07.png);
	width:100%; 
	height:145px; 
}

#central {
	background:url(55878/images/Untitled-1_06.png); 
	background-repeat:repeat-y;
	width:100%; 
	height:100%;
}

#leftcolumn {
	float:left;
	display:inline;
	width:200px;
	height:100%;
}

#main {
	float:left;
	display:inline;
	width:600px;
	height:100%;
}

#content {
	margin:0 0px 0 0px;
	height:100%;
}

#content2 {
	margin:0 0px 0 0px;
	height:100%;
}

.innertube {
	margin:0 0px 0 0px;
}

#footer {
	background:url(55878/images/Untitled-1_11.png); 
	background-repeat:no-repeat;
	width:100%; 
	height:16px; 
}
    Code (markup):
     
    banzaicat, Aug 8, 2008 IP
  2. kk5st

    kk5st Prominent Member

    Messages:
    3,497
    Likes Received:
    376
    Best Answers:
    29
    Trophy Points:
    335
    #2
    That's because you've not coded it correctly. IE seems to work because it has a major bug that your code depends on. Real browsers don't enclose their float elements without being told to.

    See containing float elements for the correct methods and the reasons.

    This is why it is so important to use a modern browser for your primary testbed. IE is not a modern browser.

    cheers,

    gary
     
    kk5st, Aug 8, 2008 IP
  3. banzaicat

    banzaicat Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well, i managed to solve the problem using that website, if anyone has the same problem as me, the solution is simple.

    Just add overflow:hidden; in the class #central, and it works fine.

    Thanks everyone
     
    banzaicat, Aug 11, 2008 IP