Results 1 to 2 of 2
Related
-
Solve Traffic Problems. TE&Networking With A New Twist Forum: Internet Services
Replies: 0 -
simple xml problem Forum: PHP Forum
Replies: 2 -
Keep It Simple S****d Forum: HTML Forum
Replies: 3 -
Simple Javascript Problem - I think... Forum: Javascript Forum
Replies: 3 -
Theres a problem i cant solve Forum: CGI Perl Forum
Replies: 4
-
03-10-2007, 11:01 PM #1
A really simple problem - but I can't solve it!
Hi Everybody,
Here is a REALLY simple problem! I am trying to float 3 colored boxes (blue, black and red) in one row so that they completely fill the width of an orange containing box (and therby fully obscure the orange box).
I have written some VERY simple HTML that you can find on the web. This website won't allow me to post the link as I am a new user (very, very annoying given all the forum notices encouraging users of this forum to post URLs). But, anyway, you can see this simple page by visiting the following pseudo-URL: "ulivewhere"+."com" +"/test"+".htm"
This simple page works fine in Firefox, but in IE6 and IE 7, the last colored box (red) drops down below the others.
Why, oh, why???
If you care to see the code, here it is:
Code:<body> <!-- Row --> <div style="height: 10px; width: 300px; background: orange"> <!-- Cell 2a--> <div style="float: left; height: 10px; width: 100px; background: blue "> </div> <!-- Cell 2b--> <div style="float: left; height: 10px; width: 100px; background : #191919"> </div> <!-- Cell 2c--> <div style="float: left; height: 10px; width: 100px; background: red "> </div> <!-- End Row --> </div>
Last edited by vinyl-junkie; 03-11-2007 at 10:15 AM. Reason: Added code tags
-
03-11-2007, 01:01 PM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: A really simple problem - but I can't solve it!
Hi there JayUSA,
and a warm welcome to these forums.
My guess, to start with, is that you are not using a DOCTYPE, which puts IE into Quirks Mode.
As for IE 6 you need to set the font-size to 0 as this browser assumes that the div will container the default font-size.
Here is your modified code...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #container { height: 10px; width: 300px; background-color:orange; font-size:0; } #Cell2a { float:left; height:10px; width:100px; background-color:blue; } #Cell2b { float:left; height:10px; width:100px; background-color:#191919; } #Cell2c { float:left; height:10px; width:100px; background-color:red; } </style> </head> <body> <div id="container"> <div id="Cell2a"></div> <div id="Cell2b"></div> <div id="Cell2c" ></div> </div> </body> </html>