Floating works fine in firefox but not IE !

marSoul · #1 (**permalink**) Dec 18th, 2007, 14:10

Hi guys,
I was playing with css to crate a floating divs that one will overlap another one, it works fine in firefox but in IE it wont show correctly, i will put the code here, so please help me !

HTML: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" title="default" href="styles.css" type="text/css">
</head>
<body>
<div id="top">
  <div id="navbar">
    <ol>
      <li>home</li>
      <li>about</li>
      <li>services</li>
      <li>projects</li>
      <li>contact</li>
    </ol>
  </div>
</div>
<div id="content">
  <div id="con_head">
    <h1>Welcome to my Website !</h1>
  </div>
  <div id="main_con">
    <p>Lorem ipsum dolor sit amet, urna vulputate purus pede facilisis accumsan wisi, enim mauris. Justo ac, lorem enim lectus dictum bibendum vel sed, sed enim lectus wisi, praesent id neque odio fermentum, non volutpat sit rutrum. Massa praesent diam quisque habitasse nam. Vel ut quis massa posuere consectetuer, ipsum est proin id. Venenatis dui id amet justo pede justo, facilisi id. Auctor sollicitudin pellentesque varius hendrerit, sed tristique eu. Turpis lorem ut et lectus dolor sed, vitae ligula eleifend in. Laoreet ut vitae tellus vitae dui justo, sem tortor bibendum non diamlorem molestie, deserunt fames ultrices suspendisse magnis. Quam vivamus dolor facilisi ut, nec ac lacinia odio elit quam varius, sapien rutrum sed rhoncus, consectetuer morbi amet nonummy elit, posuere vel ligula leo aspernatur nulla maecenas. A congue eget in erat cursus. Diam etiam.
      
      Justo amet. Placerat a, a mi turpis aliquam, aenean sed enim eget dolor. Nibh lectus, ipsum dolor ac nec, in bibendum. Elementum sem, ut dictum donec quisque tortor imperdiet viverra, phasellus eros congue a magnis felis maecenas, orci proin interdum elit neque lectus mi, aptent venenatis dolor dolor. Et sollicitudin dolorem nibh purus nullam, odio donec mauris justo, leo est sit sodales sagittis erat nam, velit montes faucibus dignissim, molestie donec eu. Pulvinar pellentesque a placerat enim nulla, sed id. Semper tempus felis cupidatat, risus placerat, lorem suspendisse quam eros nulla et aliquam, vestibulum vitae montes. Ipsum curabitur massa erat sed turpis elit, donec lorem donec nonummy quis, praesent accumsan sociis quisquam, pellentesque cras nibh per odio, integer ultricies vivamus vestibulum lorem mi. Erat omnis, euismod gravida velit ultricies erat commodo, magna vitae luctus dui semper.</p>
  </div>
  <div id="sidebar">
    <p>Lorem ipsum dolor sit amet, urna vulputate purus pede facilisis accumsan wisi, enim mauris. Justo ac, lorem enim lectus dictum bibendum vel sed, sed enim lectus wisi, praesent id neque odio fermentum, non volutpat sit rutrum. Massa praesent diam quisque habitasse nam. Vel ut quis massa posuere consectetuer, ipsum est proin id. Venenatis dui id amet justo pede justo, facilisi id. Auctor sollicitudin pellentesque varius hendrerit, sed tristique eu. Turpis lorem ut et lectus dolor sed, vitae ligula eleifend in. Laoreet ut vitae tellus vitae dui justo, sem tortor bibendum non diamlorem molestie, deserunt fames ultrices suspendisse magnis. Quam vivamus dolor facilisi ut, nec ac lacinia odio elit quam varius, sapien rutrum sed rhoncus, consectetuer morbi amet nonummy elit, posuere vel ligula leo aspernatur nulla maecenas. A congue eget in erat cursus. Diam etiam.</p>
  </div>
</div>
<div id="footer">
  <div id="navbar">
    <ol>
      <li>home</li>
      <li>about</li>
      <li>services</li>
      <li>projects</li>
      <li>contact</li>
    </ol>
  </div>
</div>
</body>
</html>

and here css :

Code: Select all

@charset "utf-8";
/* CSS Document */

body {
    margin:0;
    padding:0;
    background-color:#99FF00;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}
div#top {
    background-color:#6666FF;
    border:thin solid #000000;
}
div#navbar {
    padding : 5px;
    text-align:right;
}
div#navbar li {
    display:inline;
    font-size : 12px;
    padding: 1em;
    color : #FFFF00;
}
div#con_head {
    font-size:1em;
    font-style:italic;
    color:#000000;
    background-color:#FFFFFF;
    width: 30em;
}
div#main_con {
    font-size:1em;
    background-color:#FFFFFF;
    float:left;
    padding: 1em 30em 1em 1em;
}
div#sidebar {
    background-color:#666666;
    color:#FFFFFF;
    padding:1em;
    float:right;
    width: 20em;
    margin: 0 0 0 -28em;
}
div#footer {
    background-color:#FF0000;
    clear:both;
}

danny322 · #2 (**permalink**) Dec 18th, 2007, 15:48

Have you got a link? What are u trying to overlap?

karinne · #3 (**permalink**) Dec 18th, 2007, 15:50

Yeah ... for the lazy people, a link would be nice!

marSoul · #4 (**permalink**) Dec 18th, 2007, 16:17

here is the link :
http://www.marsoul.com/uploads/test.html

if you see the gray box works fine in FF but in IE it acts strange !
Also the red footer works fine in FF not IE !

MikeHopley · #5 (**permalink**) Dec 18th, 2007, 16:29

You're probably suffering from one of IE's float bugs. They are legion.

Read this excellent explanation.

Meanwhile, validate your code. You've used an ID twice.

marSoul · #6 (**permalink**) Dec 18th, 2007, 16:32

thnx again mike for ur tip, but its just an practice

But the link is not working properly ! :s

MikeHopley · #7 (**permalink**) Dec 18th, 2007, 16:49

Validation should always be the first step in solving a bug. You'd be surprised how many bugs are caused by seemingly unrelated errors.

As soon as one of my pages goes wrong, my eye flicks to the corner, looking for the little red cross that tells me my code is invalid. It's a knee-jerk reaction by now, and it's saved me a lot of time.

The link works fine for me.

marSoul · #8 (**permalink**) Dec 18th, 2007, 17:39

No ! I cant see the link !

karinne · #9 (**permalink**) Dec 18th, 2007, 17:40

Link works for me as well ...

And I agree with Mike, validate your site first!

marSoul · #10 (**permalink**) Dec 18th, 2007, 18:05

Now its validated ! both css and html ! but still not working in IE !
I HATE IE !!!

karinne · #11 (**permalink**) Dec 18th, 2007, 18:08

I don't see much difference in IE6 and FF?!?! Apart from the footer where the colors are inverted.

FF
FF.jpg

IE6
IE6.jpg

marSoul · #12 (**permalink**) Dec 18th, 2007, 18:10

I am seeing it in IE7, really IE6 renders it like FF ?!?!!!

marSoul · #13 (**permalink**) Dec 18th, 2007, 18:33

here are my screen shots from IE7 and FF
Look at the gray box and footer and you will notice the difference between them !

By the way karinne why don't you turn on clear type rendering method for windows xp, your text will look nicer !

karinne · #14 (**permalink**) Dec 18th, 2007, 18:37

Quote:

Originally Posted by marSoul

By the way karinne why don't you turn on clear type rendering method for windows xp, your text will look nicer !

Probably because I'm not on an XP box right now

As for your problem, this looks like a clearing floats issue

You can either use a clearing div or the overflow method explained in the CC newsletter - I have a wrapper and 2 floating divs but my border from my wrapper doesn't "wrap" around the floating div?

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
IE6 Ignoring some styles but IE7 works fine??	swillicott	Web Page Design	4	May 14th, 2008 11:35
Strange gaps in FF (IE works fine)	Donny Bahama	Web Page Design	18	May 28th, 2007 15:31
CSS works fine with FF but not in IE..whats the problem?	AnoxiA	Web Page Design	3	Apr 3rd, 2007 20:56
IE issues with my layout, works fine in Firefox :[	st3ady	Web Page Design	6	Aug 18th, 2006 21:18
Margin area not tranparent in Firefox (works fine in IE6)	Breazile	Web Page Design	2	Nov 6th, 2005 17:09

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Floating works fine in firefox but not IE !