Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML/CSS problem

    Hi all,

    I'm new to HTML/CSS. I've been learning through Lynda.com. So far so good... until I came across this problem. Basically I'm testing the CSS "box model". This is the code that I'm using:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <?xml version="1.0" encoding="utf-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Untitled Document</title>
    <style>
    div#content {
    	margin: 0 auto;
    	width: 200px;
    	padding: 12px;
    	background-color:#0000CC;
    	border: 10px solid black;
    }
    
    div#box {
    	float: left;
    	width: 100px;
    	height: 200px;
    	background-color:#00CCFF;
    }
    	
    div#box2 {
    	float: left;
    	width: 100px;
    	height: 200px;
    	background-color:#330066;
    }
    
    div#box2 p {
    	color: #FFFFFF;
    	margin-top: 80px;
    	text-align: center;
    }
    
    div#box p {
    	color: #006699;
    	margin-top: 80px;
    	text-align: center;
    }
    
    p.clear {
    	clear:both;
    	height: 0;
    	margin: 0;
    	padding: 0;
    }
    
    </style>
    </head>
    
    <body>
    <div id="content">
    <div id="box">
    <p>test</p>
    </div>
    <div id="box2">
    <p>test</p>
    </div>
    <p class="clear"></p>
    </div>
    </body>
    
    </html>
    In dreamweaver the design looks correct, which should look like this:


    But when I preview in IE6, it looks like this (which has added space to the container at the bottom?):


    What's even funnier is, if I delete the "p class clear" it looks right in IE6 but wrong in Dreamweaver, and presumably wrong in other browswers. I'm at work right now and they only have IE6. I am hoping to get this to preview correctly in all moderns browsers including IE6.

    I'm at my wits end on this one. I've tried searching online for possible answers but no luck.
    Last edited by lgndsgn; 06-03-2010 at 08:03 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Hi,

    First off don't bother using Dreamweaver to preview the pages if you mean you are using the "design" tab to have a look. The "code" tab is fine but to preview just use the actual browsers (File > Preview in Browser).

    I think the IE6 problem is because it is keeping some space for the paragraph, or some other IE6 bug maybe hasLayout i'm not too sure....

    However a clearing element (whose purpose is just to clear floats) is very rarely needed (infact I don't think it is at all anymore), so to make sure the container encloses around it's content, you can just add overflow:auto; to the container, then there is no need for the clearing DIV.

    Edit, here's a few articles on clearing/enclosing floats:
    http://www.quirksmode.org/css/clearing.html
    http://www.positioniseverything.net/easyclearing.html
    http://gtwebdev.com/workshop/floats/...ing-floats.php
    Last edited by Scriptet; 06-03-2010 at 08:34 PM.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I know you said not to worry about how it looks in the design tab, but I took out the clears and put in the overflow and it looks like this in Dreamweaver now.



    But what I don't get is, it looks right in IE6 without the Overflow:auto OR the clear. So I'm just having a hard time understanding the purpose of the clear/autoflow, because in the tutorial I'm following on Lynda.com it says this error will happen without the clear, and here it is working without it (in IE6 at least), yet it looks screwed up (how the tute said it would) in the design view in Dreamweaver.

    Really confusing.
    Last edited by lgndsgn; 06-03-2010 at 09:07 PM.

  • #4
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Quote Originally Posted by lgndsgn View Post
    I know you said not to worry about how it looks in the design tab, but I took out the clears and put in the overflow and it looks like this in Dreamweaver now.

    You're correct I did say forget about the Dreamweaver design view!
    Trust me just forget it, it does not relate to a browser and is very misleading on how the page will look. Infact if it looks good in DW design view, there's a good chance it will look bad in some browsers.

    If you add the overflow and remove the clearing DIV you end up with the following code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <?xml version="1.0" encoding="utf-8"?>
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Untitled Document</title>
    <style>
    div#content {
    	margin: 0 auto;
    	width: 200px;
    	padding: 12px;
    	background-color:#0000CC;
    	border: 10px solid black;
    	overflow:auto;
    }
    
    div#box {
    	float: left;
    	width: 100px;
    	height: 200px;
    	background-color:#00CCFF;
    }
    	
    div#box2 {
    	float: left;
    	width: 100px;
    	height: 200px;
    	background-color:#330066;
    }
    
    div#box2 p {
    	color: #FFFFFF;
    	margin-top: 80px;
    	text-align: center;
    }
    
    div#box p {
    	color: #006699;
    	margin-top: 80px;
    	text-align: center;
    }
    </style>
    </head>
    
    <body>
    <div id="content">
    <div id="box">
    <p>test</p>
    </div>
    <div id="box2">
    <p>test</p>
    </div>
    </div>
    </body>
    
    </html>
    Now i've personally tested this and it looks as expected in all browsers: IE6, IE7, IE8, Chrome, Opera, Firefox and Safari but DW design view is messed up as you posted!

    But what I don't get is, it looks right in IE6 without the Overflow:auto OR the clear.
    This is another IE bug because IE incorrectly encloses all floats automatically!

    I use Dreamweaver CS4 but never even touch the design tab it has no real use believe me, just use the code tab and preview your code in the browsers not the design tab.

  • Users who have thanked Scriptet for this post:

    lgndsgn (06-03-2010)

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you!

    It's frustrating when you're following a tutorial and the method they say works, doesn't work consistently. AND they fail to mention the important fact that design view is pointless, which judging from Lynda.com they're big supporters of Adobe, so I doubt they would ever say such a thing even if they knew it was true...
    Last edited by lgndsgn; 06-03-2010 at 10:48 PM.

  • #6
    Regular Coder
    Join Date
    Apr 2008
    Posts
    685
    Thanks
    15
    Thanked 105 Times in 104 Posts
    Yep, I think if you check the "Live View" tab it provides a bit more of an accurate depicition on how it might look in a browser, but still there's no need to use it, whenever you need to check just do it in the actual browser!

    The clearing element was the old solution, but the newer solution is to give the container a width and overflow:auto; which means there is no need for the empty extra paragraph you had. So if the tutorial is still teaching this then it can't be that reliable!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •