CSS Layout issue between IE and Firefox

macu · #1 (**permalink**) Aug 22nd, 2007, 12:10

Following is a simplefied version of a page I am having an issue with. In IE it displays OK without the display:table, but requires it to display OK in Firefox. Problem is that the display:table is interferring with a componentart grid I'm using in the left column, it causes my right column to wrap underneath.

I suspect there's a problem with something I'm doing to require the display:table in the first place but I can't see what. Does anyone know how to get this displaying in Firefox with the outer most div's border around all contained divs without the display:table??

Thanks!

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Test</title>

<style type="text/css">
    
.Frame
{
    width: 710px;
    margin: 10px auto auto auto;
    border: thin solid black;
    /*display: table;*/
}

.ContentListingMain
{
    width: 600px;
    padding: 2px;
    float: left;
}

.ContentListingButtons
{
    width: 100px;
    padding: 2px;
    text-align: right;
    float: left;
}
    
</style>

</head>

<body>
<div class="Frame">
    <div class="ContentListingMain">Grid goes here</div>
    
    <div class="ContentListingButtons"><input type="button" value="Do" /></div>
</div>
</body>
</html>

karinne · #2 (**permalink**) Aug 22nd, 2007, 12:27

Why are you using the display: table?

(Your class names should be all lowercase.)

This code works fine. I added the overflow: hidden; to you .frame class to clear the floats

Code: Select all

<!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" lang="en-CA" xml:lang="EN-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    .frame {
        width: 710px;
        margin: 10px auto auto;
        border: thin solid #000;
        /*display: table;*/
        overflow: hidden;
    }
    
    .contentlistingmain {
        width: 600px;
        padding: 2px;
        float: left;
    }
    
    .contentlistingbuttons {
        width: 100px;
        padding: 2px;
        text-align: right;
        float: left;
    }
    </style>
    
</head>

<body>

<div class="frame">
    <div class="contentlistingmain">Grid goes here</div>
    
    <div class="contentlistingbuttons"><input type="button" value="Do" /></div>
</div>

</body>
</html>

macu · #3 (**permalink**) Aug 22nd, 2007, 13:14

That's great, thanks very much. I was only using display:table as I read about it as a "workaround" for this (non) issue.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS Layout Issue (in Firefox only)... probably simple but its driving me crazy!	alfandango	Web Page Design	4	Mar 8th, 2008 17:11
Major layout issue	thewebkid	Web Page Design	23	Dec 22nd, 2007 03:31
Question about layout/IE7 issue	bluetech	Web Page Design	3	Jul 3rd, 2007 15:37
Help with a layout issue	Kirryn	Web Page Design	9	Jun 21st, 2007 17:27
Homepage layout issue	webwiz2000	Web Page Design	2	Feb 28th, 2006 17:49

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
CSS Layout issue between IE and Firefox