Web Analytics Made Easy -
StatCounter Coding Problem (CSS) - CodingForum

Announcement

Collapse
No announcement yet.

Coding Problem (CSS)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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
    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:
    [COLOR="Red"][I][B]CSS[/B][/I][/COLOR]
    #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:
    [I][B][COLOR="Red"]HTML[/COLOR][/B][/I]
    <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.

    Comment


    • #3
      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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

      Comment


      • #4
        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; Apr 5, 2009, 12:07 PM.

        Comment


        • #5
          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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

          Comment


          • #6
            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;
            }

            Comment


            • #7
              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; Apr 5, 2009, 04:07 PM.
              Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
              Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

              Comment


              • #8
                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; Apr 5, 2009, 06:39 PM.

                Comment


                • #9
                  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 a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                  Comment


                  • #10
                    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).

                    Comment


                    • #11
                      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; Apr 6, 2009, 12:16 PM.
                      Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
                      Use a DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

                      Comment


                      • #12
                        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.
                        Digitalocean Cloud Hosting (Referral link - get $10 free credit) Fameco

                        Comment

                        Working...
                        X