Mozilla displays code not correctly, IE does

suse · #1 Jul 14th, 2008, 15:54

Hi all,
I am stuck here with a problem with my columns. IE 6.0 displays it the way I want it (for a change), Firefox 2.0.0.15 doesn't!

Here is the CSS (CSS and HTML are W3 valid):

Code: Select all

 body    {
font-size: 90%;    }

#wrapper {
width: 55em;
margin: 0 auto;
padding: 1.25em 0 0 0.63em; 
border: black 0.1em solid;     }

#content1    {
width: 54.4em;
height: auto;
margin: 0 0 0.63em 0;
background: red;
border-bottom: 0.1em #d8d8d8 solid;    
font-family: Helvetica, Verdana, Arial, sans-serif;
font-size: 1em; }


#col1    {
float: left;
width: 17.5em;    
padding-right: 0.53em;
border-right: 0.1em #d8d8d8 solid;    
padding-top: 0.1em;
padding-bottom: 0.1em;    }

#col2    {
float: left;
width: 17.3em;
padding-right: 0.43em;
padding-left: 0.5em;    
border-right: 0.1em #d8d8d8 solid;    
padding-top: 0.1em;
padding-bottom: 0.1em;    }

#col3    {
float: left;
width: 17.3em;
padding-right: 0.03em;
padding-left: 0.5em;    
padding-top: 0.1em;
padding-bottom: 0.1em;        }

And here is the HTML for it:

HTML: Select all

 <div id="wrapper">

        <div id="content1">

            <h1> Our Services</h1>

            <div id="col1">
                lksdjf jsdfj lsjdf lsjd l sdflkjdsf lksdjf slk sd lsdkjf flsdjf slf sdfl sfkjsdf sf
            </div>

            <div id="col2">
                lksdjf jsdfj lsjdf lsjd l sdflkjdsf lksdjf slk sd lsdkjf flsdjf slf sdfl sfkjsdf sf
            </div>

            <div id="col3">
                lksdjf jsdfj lsjdf lsjd l sdflkjdsf lksdjf slk sd lsdkjf flsdjf slf sdfl sfkjsdf sf
            </div>

        </div>
    </div>

Does anyone have a clue what I could be doing wrong???

CloudedVision · #2 Jul 14th, 2008, 20:32

What exactly do you want it to display like?

suse · #3 Jul 15th, 2008, 09:24

Oh dear, sorry, I forgot to describe the actual problem!

At the moment IE displays it as it should: the 3 columns are inside the (red) content area. However Firefox displays the columns below.

Has anybody advise why Firefox displays them OUTSIDE my definded "content" area?

I would be very very thankful for hint what I could try or any clues WHY this is actually happening.

suse · #4 Jul 15th, 2008, 10:07

I have got it!

The solution is to clear the last column with:

<br style="clear:both" />

Cheerio!

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Asp code in XHTML displays English, then switches to a different language	mboston72	Classic ASP	4	Jan 21st, 2008 01:11
Displays wrong in Firefox	JustinStudios	Web Page Design	7	Jun 28th, 2007 20:56
code not workingin mozilla firefox	svrajmane	JavaScript Forum	0	Jun 1st, 2007 11:08
Displays wrongly in Firefox?	spon	Web Page Design	5	Feb 15th, 2007 18:19
script runs on IE but not correctly on Opera,Mozilla	ranjan	JavaScript Forum	1	Jun 20th, 2005 21:44

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Mozilla displays code not correctly, IE does