...

View Full Version : Coding Problem (CSS)



Nimrod EX
04-02-2009, 12:02 AM
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:




#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!

PitbullMean
04-02-2009, 12:25 AM
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




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;
}




HTML
<body>
<div id="wrapper">
<div id="sidebar"></div>
<div id="content_center"></div>
</div>

Excavator
04-02-2009, 01:24 AM
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

Nimrod EX
04-05-2009, 04:54 PM
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 ^ ^):




@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;
}

Excavator
04-05-2009, 06:27 PM
It would sure help to see your entire code, instead of just the CSS.

Nimrod EX
04-05-2009, 08:16 PM
HTML




<!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:




@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;
}

Excavator
04-05-2009, 09:02 PM
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 -
<!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>

Nimrod EX
04-05-2009, 11:34 PM
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?

Excavator
04-06-2009, 04:03 AM
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.

Nimrod EX
04-06-2009, 03:25 PM
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


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

Excavator
04-06-2009, 05:14 PM
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.

abduraooft
04-06-2009, 05:20 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum