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 12 of 12
  1. #1
    New Coder
    Join Date
    Dec 2008
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Coding Problem (CSS)

    Well, I'm working with dreamweaver, and it has detected 2 problems with my code.

    "Floating non-float bug"


    If a non-floated element with a specified width directly follows a left-floated element with a specified width, the non-floated container will appear to the right of the floated element instead of allowing the floated element to overlap it.

    Affects: Internet Explorer 6.0, 7.0; Internet Explorer for Macintosh 5.2
    Likelihood: Likely
    and

    "Float drop problem"

    If a container (including the browser window itself) is not wide enough to accommodate both a float with a specified width and any content with a specified width that follows it, the content after the float will drop below the float rather than wrapping around it.

    Affects: Internet Explorer 6.0, 7.0
    Likelihood: Likely

    Dreamweaver underlines only 1 line of text, the one I called "content_wrapper" (the Div tag linking to a certain CSS file), so I'll just post the CSS thingies that have something to do with the content_wrapper:

    Code:
    #wrapper {
    
    	width: 961px;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    
    
    #sidebar {
    	background:#d6d6d6;
    	float:left;
    	width:180px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    	
    #content_wrapper {
    	width: 953px;
    	margin: 0px auto 0px;
    	padding-left:7px;
    	padding-top:7px;
    	padding-bottom:20px;
    	}	
    	
    	
    	
    #content_center {
    	float:right;
    	width:740px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}

    Could somebody please tell me whats wrong? XD

    (I'm not posting my HTML because I didn't put any text in there or anything, I'm just working on the layout right now.)

    Thanks in advance!

  • #2
    Regular Coder
    Join Date
    Oct 2007
    Location
    Glencoe, Ontario, Canada
    Posts
    340
    Thanks
    19
    Thanked 27 Times in 27 Posts
    well if all u want is the sidebar and the content to be aligned together all u need to do is remove the content wrapper div. cause this is what I have put in my dreamweaver and all looks good


    Code:
    CSS
    #wrapper {
    	width: 961px;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    
    
    #sidebar {
    	background:#d6d6d6;
    	float:left;
    	width:180px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    	
    #content_center {
    	float:right;
    	width:740px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    Code:
    HTML
    <body>
    <div id="wrapper">
    	<div id="sidebar"></div>
    			<div id="content_center"></div>
    </div>
    Eric "PitbullMean" Melo
    Always Start your layout with*{border:0; margin:0; padding:0;}
    Be sure to Thank ALL Users who give assistance.

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello Nimrod EX,
    Your #sidebar at a total width of 192px
    and #content_center at 752px
    add up to 944px and that fits in your 961px wide #wrapper.
    That works, as Pitbull has shown you.

    I'm not sure where your 960px wide #content_wrapper is supposed to go. (you should have posted your html also).

    Have a look at one method for doing a 2 column layout - http://nopeople.com/CSS/equal_length_columns/index.html
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    New Coder
    Join Date
    Dec 2008
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks alot for your help Pitbull, but now ANOTHER problem has arised.


    Well I used your code (only change I made was to put content_wrapper BEFORE content_center) and it fixed the 2 original problems, but now I get a DIFFERENT error that says this:

    It underlines Content_Wrapper:

    Name:
    Three Pixel Text Jog
    When anonymous line boxes (boxes that contain inline content) are adjacent to a float, a 3px gap appears between the line box and the edge of the float. This gap disappears when the content clears the float, causing the content to "jog" three pixels in the direction of the float. Note that the gap may be difficult to see when left-aligned text is adjacent to a right float, but it does exist -- and it can lead to "float drop" in tight layouts.

    Affects: Internet Explorer 6.0
    Likelihood: Likely
    Any idea on what THIS means now?

    <EDIT> Oh, and here's my code (forgot ^ ^):

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #body {
    	
    	font-size: 14px;
    	font-family: Verdana, Helvetica, Sans-Serif;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    
    #header {
    	
    	background: #333333 url(bannar.jpg);
    	width: 962px;
    	height: 180px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	text-align: center;
        text-transform: uppercase;
    
    
    }
    
    
    #wrapper {
    	width: 961px;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    
    
    #sidebar {
    	background:#d6d6d6;
    	float:left;
    	width:180px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    	
    #content_center {
    	float:right;
    	width:740px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    	
    	
    #content_center {
    	float:right;
    	width:740px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}	
    	
    	
    #content{
    padding-top:5px;
    padding-bottom:15px;
    }
    
    #newsbar{
    background:#d6d6d6;
    padding:10px;
    height:10px;
    border-top-style:solid;
    border-top-width:1px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    }
    
    #news {
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    font-size:14px;
    
    }
    
    #newsbottom{
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    }
    .news_header{
    float:left;
    width:300px;
    }
    .news_date{
    float:right;
    text-align:right;
    width:300px;
    }
    Last edited by Nimrod EX; 04-05-2009 at 05:07 PM.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It would sure help to see your entire code, instead of just the CSS.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    New Coder
    Join Date
    Dec 2008
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    HTML

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="Start.css" rel="stylesheet" type="text/css"  />
    </head>
    
    <body>
    
    <div id="wrapper">
    
    <div id="header"> </div>
    
    	<div id="sidebar">
        
        <ul>
        <li> Home </li>
        <li> About us </li>
        </ul>
        
        </div>
        
     
        
        
        <div id="content_wrapper">
    
    			<div id="content_center">
                
                
                 <div id="newsbar"><div class="news_header"><strong>News Title:</strong> Display Page</div><div class="news_date"><strong>Posted On:</strong> 28/02/2009</div><div style="clear:both;"></div></div>
      <div id="news">I have implemented a new system when going through the rom archive. You will now notice at the bottom of each rom page there is a numbered page system. This was done after a few complaints that it was too hard to look through the archive.<br>So i hope this makes things a little easier.<br><br>
    Thanks<br>
    Admin</div>
    
      <div style="clear:both;"></div>
      <div id="newsbottom"><div class="news_header"><strong>Posted By:</strong> Admin</div><div class="news_date"><strong>Comments:</strong> 0 (<a class="contentlink" href="index.php?page=news_comments&nid=77">Post A Comment</a>)</div><div style="clear:both;"></div>
        <br />
      </div>
    </div>
    
    </div>
    
    <div id="footer">
    
    </div>
    
    </div>
    
    
    </body>
    </html>
    CSS:

    Code:
    @charset "utf-8";
    /* CSS Document */
    
    #body {
    	
    	background:#39F;
    	font-size: 14px;
    	font-family: Verdana, Helvetica, Sans-Serif;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    
    #header {
    	
    	background: #333333 url(bannar.jpg);
    	width: 962px;
    	height: 180px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	text-align: center;
        text-transform: uppercase;
    
    
    }
    
    
    #wrapper {
    	width: 961px;
    	margin: 0px auto 0px;
    	padding: 0px;
    	}
    
    
    #sidebar {
    	background:#d6d6d6;
    	float:left;
    	width:180px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    	
    #content_center {
    	float:right;
    	width:740px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}
    	
    	
    #content_center {
    	float:right;
    	width:740px;
    	border-style:solid;
    	border-width:1px;
    	padding:5px;
    	}	
    	
    	
    #content{
    padding-top:5px;
    padding-bottom:15px;
    }
    
    #newsbar{
    background:#d6d6d6;
    padding:10px;
    height:10px;
    border-top-style:solid;
    border-top-width:1px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    }
    
    #news {
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    font-size:14px;
    
    }
    
    #newsbottom{
    padding-right:10px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:15px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-left-style:solid;
    border-left-width:1px;
    border-right-style:solid;
    border-right-width:1px;
    }
    .news_header{
    float:left;
    width:300px;
    }
    .news_date{
    float:right;
    text-align:right;
    width:300px;
    }
    
    #footer
    
    {
    	
    margin-left:auto;
    margin-right:auto;
    clear:both;
    margin-top: 15px;
    background: #333333 url(images/topbar.gif);
    width: 961px;
    color: #FFFFFF;
    padding: 10px 0px 10px 0px;
    text-align: center;
    }

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    That's better, now we can see what the CSS is styling even though we don't have the images.
    I took your code and moved some borders around, laid it out like that 2 column layout I linked to earlier... also some shorthand and indentation of your markup and embedded the CSS just for ease of posting here.
    Try it like this once -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    body {	
    	background:#39F;
    	font: 14px Verdana, Helvetica, Sans-Serif;
    }
    #header {
    	width: 962px;
    	height: 180px;	
    	background: #333333 url(bannar.jpg);
    	margin: 0 auto;
    	padding: 0;
    	text-align: center;
        text-transform: uppercase;
    }
    #wrapper {
    	width: 961px;
    	margin: 0 auto;
    	padding: 0px;
    	border: 1px solid #000;
    	background: #d6d6d6;
    }
    #sidebar {
    	width:180px;
    	float:left;
    	padding:5px;
    }	
    #content_center {
    margin: 0 0 0 190px;
    	padding:5px;
    	background: #fff;
    	border-left: 1px solid #000;
    }	
    #content{padding: 5px 0 15px;}
    #newsbar{
    	background:#d6d6d6;
    	padding:10px;
    	height:10px;
    	border: 1px solid #000;
    	border-bottom: none;
    }
    #news {
    	padding: 5px 10px 5px 15px;
    	border-left: 1px solid #000;
    	border-right: 1px solid #000;
    	font-size:14px;
    }
    #newsbottom{
    	padding: 5px 10px 5px 15px;
    	border: 1px solid #000;
    }
    .news_header{
    	float:left;
    	width:300px;
    }
    .news_date{
    	float:right;
    	text-align:right;
    	width:300px;
    }
    #footer {	
    	width: 961px;
    	margin: 0;
    	padding: 10px 0px 10px 0px;
    	clear:both;
    	background: #333333 url(images/topbar.gif);
    	color: #FFFFFF;
    	text-align: center;
    }
    </style>
    </head>
    <body>
    	<div id="wrapper">
            <div id="header"> </div>
                    <div id="sidebar">    
                        <ul>
                            <li> Home </li>
                            <li> About us </li>
                        </ul>    
                    <!--end sidebar--></div>   
                <div id="content_center">            
                    <div id="newsbar">
                        <div class="news_header"><strong>News Title:</strong> Display Page</div>
                        <div class="news_date"><strong>Posted On:</strong> 28/02/2009</div>
                            <div style="clear:both;"></div>
                    <!--end newsbar--></div>
                <div id="news">
                    <p>
                        I have implemented a new system when going through the rom archive. You will now 
                        notice at the bottom of each rom page there is a numbered page system. This was 
                        done after a few complaints that it was too hard to look through the archive.<br />
                        So i hope this makes things a little easier.
                    </p>
                    <p>Thanks<br />Admin</p>
                <!--end news--></div>
                    <div style="clear:both;"></div>
                    <div id="newsbottom">
                        <div class="news_header"><strong>Posted By:</strong> Admin</div>
                        <div class="news_date"><strong>Comments:</strong> 0 (<a class="contentlink" href="index.php?page=news_comments&amp;nid=77">Post A Comment</a>)</div>
                            <div style="clear:both;"></div>
                        <br />
                    <!--end newsbottom--></div>
                <!--end content_center--></div>
            <div id="footer"></div>
    	<!--end wrapper--></div>
    </body>
    </html>
    Last edited by Excavator; 04-05-2009 at 09:07 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #8
    New Coder
    Join Date
    Dec 2008
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    It still says theres a 3 pixel jog...and I copy pasted what you said... (only thing I did was make the CSS an external style sheet...but I double checked that I didn't miss anything).

    Oh, and I'm not sure exactly what you did, but the way the site looks when I'm NOT on live view is really strange, there are large gaps between different <divs>, and their dotted lines are over-riding eachother (the live view looks the same only with borders this time), it just gives me an unstable feeling...are you sure everything about the code should be fine?
    Last edited by Nimrod EX; 04-05-2009 at 11:39 PM.

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    It worked fine in FF3, IE8 and IE7. We can make it look better in IE6 like this -
    http://nopeople.com/test/nimrodEx.html

    You should be testing in a standards compliant browser, like FireFox, and not believing DW's design view so much. DW is famous for redering code completely different from any browser.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    Nimrod EX (04-06-2009)

  • #10
    New Coder
    Join Date
    Dec 2008
    Posts
    24
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    It worked fine in FF3, IE8 and IE7. We can make it look better in IE6 like this -
    http://nopeople.com/test/nimrodEx.html

    You should be testing in a standards compliant browser, like FireFox, and not believing DW's design view so much. DW is famous for redering code completely different from any browser.
    Ok thanks alot mate, I won't pay attention to DW in this specific case :P

    But could you please explain to me why everything seems to wierd when I'm not in live view? there are huge gaps between everything.

    I tried changing 1 line of code that I saw you added

    Code:
     #content_center {
    margin: 0 0 0 190px;
    And that stopped the gaps, but completely messed up the positioning of the site.

    Could you explain a little what that line of code is doing? And if there is any way to fix the huge gaps (it just gives me an uneasy feeling).

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,673
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Maybe if you take a screenshot... I'm not seeing huge gaps in any of the 4 browsers I'm looking at this with. It might help if you would mention what browser your having trouble with.

    margin: 0 0 0 190px; was in the last version. Did you look at the new version I linked you to in my last post?
    That line was changed to margin: 5px 5px 5px 190px; and it's just making room for the left column.
    Last edited by Excavator; 04-06-2009 at 05:16 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,802
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Ok thanks alot mate, I won't pay attention to DW in this specific case :P

    But could you please explain to me why everything seems to wierd when I'm not in live view? there are huge gaps between everything.
    Don't trust DW's design view. It's not a browser, so you can't expect a right display from that tool. Instead check your site on some browsers, to ensure the layout/display compatibility.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Nimrod EX (04-06-2009)


  •  

    Posting Permissions

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