143 users online (0 members and 143 guests)  

> > > > A really simple problem - but I can't solve it!

  Results 1 to 2 of 2

Related

  1. Solve Traffic Problems. TE&Networking With A New Twist    Forum: Internet Services
    Replies: 0
  2. simple xml problem    Forum: PHP Forum
    Replies: 2
  3. Keep It Simple S****d    Forum: HTML Forum
    Replies: 3
  4. Simple Javascript Problem - I think...    Forum: Javascript Forum
    Replies: 3
  5. Theres a problem i cant solve    Forum: CGI Perl Forum
    Replies: 4
  1. 03-10-2007, 11:01 PM #1
    JayUSA
    JayUSA is offline
    JayUSA's Avatar
    New User
    Status
    Offline
    Join Date
    Mar 2007
    Posts
    1

    Red face 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
    Reply With Quote Reply With Quote
  2. 03-11-2007, 01:01 PM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732

    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>
    I would strongly advise you to get into the habit of always using a DOCTYPE, to help ensure cross browser compatibility.


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread