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 15 of 15
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts

    Mystery CSS behaviour

    I have a webpage that should have a shadow border on it.
    However, for some reason this page is not displaying the border. I cant see why not, but maybe someone knows why. Thanks

    Code:
    #bodyblock {
    width: 972px;
    margin: 0 auto;
    background-image: url('../images/shadow.jpg'); 
    background-repeat: repeat-y;} 
    
    #container {
    border: 0;
    width: 57em;
    background: #fff;
    position: relative;
    margin: auto;
    height: auto; /* For IE */; 
    text-align: left; /*Hack to fix IE6 to center*/;}
    html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="en" name="language" />
    <meta content="Seniors Club entry page and Community Venue entry page" />
    <meta content="Seniors Club and Community Venue" />
    <title>Seniors Entry Page</title>
    <link href="styles/mainstyle.css" rel="stylesheet" type="text/css" />
    <link href="styles/navigation.css" rel="stylesheet" type="text/css" />
    <link href="styles/layout.css" rel="stylesheet" type="text/css" />
    </head><body>
    <div id="bodyblock">
    <div id="container">
    <div id="content">
    <h1 class="margin1">SENIORS</h1>
    <div class="left7">
    	<a href="seniors/homepage.html">
    <img alt="Seniors Club " height="106" src="images/seniors_logo.gif" width="343" /></a>
    <h2>Seniors Club</h2><br/>
    <p class="caption2">
    	<a href="seniors/homepage.html">Enter</a></p></div>
    	<div class="right5">
    		<a href="venue/home.html">
    <img class="over" alt="Seniors Community Venue" height="101" src="images/venue_logo.gif" width="201" /></a><h2>Seniors Community Venue</h2><br/><p class="caption2">
    		<a href="venue/home.html">Enter</a></p></div>
    </div><!--content--></div><!--bodyblock--></div><!--container--></body></html>
    The shadow works fine on all of the other pages, the only difference with this page is that there is no header footer or navigation links.
    Last edited by quartzy; 02-16-2011 at 11:25 PM.

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,797
    Thanks
    6
    Thanked 1,023 Times in 996 Posts
    Maybe it’s this CSS error?
    Code:
    height: auto; /* For IE */;

  • #3
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    thanks for pointing that out but alas it is not the problem. I have even placed some of the code in the head of the page, but that did not work either.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Please post a link or your complete HTML+CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    Its not uploaded yet, but I will post all of my styles and html

    Layout.css

    Code:
    body, ul, li, div, form, blockquote, table, td, th, tr {
    	margin: 0;
    	padding: 0;
    }
    html, body {
    	text-align: center;
    	height: 100%;
    	width: 100%;
    	font-family: Trebuchet, Helvicta, Arial, Sans-serif;
    	background: #FFCC00;
    	font-size: 100%;
    	line-height: 145%;
    }
    #bodyblock {
    	width: 972px;
    	margin: 0 auto;
    	background-image: url('../images/shadow.jpg');
    	background-repeat: repeat-y;
    }
    #container {
    	border: 0;
    	width: 912px;
    	background: #fff;
    	position: relative;
    	margin: auto;
    	height: auto; /* For IE */;
    	text-align: left; /*Hack to fix IE6 to center*/
    }
    #header {
    	height: 10em;
    	width: 100%;
    	margin: 0;
    	padding: 0;/*holding page*/
    }
    .logo_venue {
    	padding-left: 1em;
    	padding-top: 0.75em;
    	float: left;
    	display: inline;
    	width: 14.643em;
    }
    .logo_seniors {
    	width: 343px;
    	padding-top: 3em;
    	padding-left: 0.50em;
    }
    .top2 {
    	float: left;
    	display: inline;
    	width: auto;
    }
    p.tagtitle {
    	font-style: italic;
    	text-align: center;
    	margin-left: 2.143em;
    	padding-top: 2.857em;
    }
    address.top {
    	border: 1px solid #CCC;
    	position: absolute;
    	width: 11em;
    	top: 3em;
    	right: 0.55em;
    	text-align: right;
    	background-image: url('../images/box_strip_sm.jpg');
    	background-repeat: repeat-x;
    	padding: 0.60em;
    }
    a:link {
    	color: #CC9900;
    	text-decoration: underline;
    }
    a:visited {
    	color: #CC9900;
    	text-decoration: underline;
    }
    a:hover {
    	color: #000;
    	text-decoration: none;
    	background: #CCC;
    }
    #header p.head_right {
    /*holding page*/ 	position: absolute;
    	top: 2.143em;
    	left: 39.286em;
    }
    #content {
    	width: 85%;
    	float: left;
    	display: inline;
    	background: #fff;
    	overflow: hidden;
    	padding: 3.50em;
    	margin: 0 auto;
    }
    #footer {
    	width: 100%;
    	color: #fff;
    	clear: both;
    	height: 3.10em;
    	background-image: url('../images/box_foot.jpg');
    	background-repeat: repeat;
    	text-align: center;
    	width: 100%;
    }
    footer p {
    	text-align: center;
    	font-weight: bold;
    }
    mainstyle.css

    Code:
    .notice {
    	width: 80%;
    	margin: 0 auto;
    	height: auto;
    }
    .inner {
    	width: 97.30%;
    	height: auto;
    	float: left;
    	display: inline;
    	margin-top: -1.45em;
    	margin-bottom: 1em;
    	padding: 0 0.50em;
    	border: 1px solid #CCC;
    }
    p.inner2 {
    	margin-top: 40px;
    }
    img a {
    	border: none;
    }
    .bookings {
    	width: 17.857em;
    	float: right;
    	border: 1px solid #CCC;
    	margin-top: 3em;
    	padding-top: 0;
    }
    .bookings p {
    	padding: 0.700em;
    }
    .clear {
    	clear: both;
    	font-size: 0;
    	line-height: 0px;
    }
    .contacts {
    	margin-left: 30px;
    	width: 14.50em;
    	float: left;
    	display: inline;
    	margin-top: 3.75em;
    }
    .left, .left1 {
    	float: left;
    	width: 48%;
    	display: inline;
    	margin-bottom: 1.25em;
    	overflow: hidden;
    }
    .right, .right7 {
    	width: 48%;
    	float: right;
    	overflow: hidden;
    }
    .right7 {
    	margin-top: 1em;
    	padding: 1em;
    	width: 45%;
    	border: 1px dotted #666;
    }
    .left2, .left4, .left5 {
    	background: #F4F4F4;
    	border: 1px dotted gray;
    	width: 16em;
    	padding: .500em;
    	float: left;
    	display: inline;
    	margin-top: 3em;
    	margin-left: 60px;
    }
    right1 {
    	width: 40%;
    	float: left;
    }
    .left2 {
    	background: url('../images/box_strip_bg.jpg');
    	background-repeat: repeat-x;
    }
    .left4 {
    	margin-top: 0;
    	background: #fff;
    	border: 0;
    }
    .left5 {
    	margin-left: 0;
    	width: 28em;
    	margin-top: 0;
    	background: #fff;
    	border: 0;
    }
    .left1 {
    	float: left;
    	width: 45%;
    }
    .right2, .right4 {
    	border: 1px dotted gray;
    	width: 21em;
    	float: left;
    	padding: 1em;
    	height: auto;
    	margin-left: 2.80em;
    }
    .right4 {
    	border: 0;
    	padding-top: 3.75em;
    }
    .left3, .right3 {
    	margin-bottom: 0;
    	width: 12em;
    	padding: .313em;
    	float: left;
    	display: inline;
    }
    .left6, .right6 {
    	width: 15em;
    	float: left;
    	display: inline;
    }
    .right5 {
    	width: 41%;
    	border-top: 3px solid #CCC;
    	border-left: 1px solid #CCC;
    	float: right;
    	padding: 1em;
    	text-align: center;
    }
    .left7 {
    	float: left;
    	width: 43%;
    	display: inline;
    	border-right: 1px solid #CCC;
    	border-top: 3px solid #CCC;
    	padding: 1em;
    }
    .right5 h2 {
    	text-align: center;
    	border: 2px dotted #CCC;
    	margin-top: 3em;
    	padding-top: 1em;
    	padding-bottom: 1em;
    }
    .left7 h2 {
    	text-align: center;
    	border: 2px dotted #CCC;
    	margin-top: 3em;
    	padding: 1em;
    }
    img.border {
    	border: 1px solid #CCC;
    	padding: .188em;
    }
    a img {
    	border-style: none;
    }
    .image {
    	height: 21.25em;
    	float: right;
    	padding: 0.313em;
    	overflow: hidden;
    	margin: 1em;
    }
    .image2 {
    	float: right;
    	margin: 1em;
    	overflow: hidden;
    	width: auto;
    }
    .image3 {
    	float: left;
    	display: inline;
    	margin: 0 1em 1em 1em;
    	overflow: hidden;
    	width: auto;
    }
    p.ques, span.ques {
    	font-style: italic;
    	font-weight: bold;
    	font-size: 1.25em;
    	color: #666;
    }
    p {
    	margin-bottom: 1em;
    	margin-top: 0;
    	padding-top: 0;
    }
    p.caption {
    	text-align: center;
    	font-size: 0.75em;
    }
    p.caption2 {
    	margin-bottom: 6em;
    	text-align: center;
    	font-size: 1.50em;
    	margin-top: 80px;
    }
    p.margin {
    	margin-bottom: 23em;
    }
    p.margin2 {
    	margin-bottom: 10em;
    }
    .margin3 {
    	margin-bottom: 5em;
    }
    .margin1 {
    	margin-bottom: 2em;
    }
    p.office {
    	border-top: 1px solid #CCC;
    	background-image: url('../images/box_strip_sm.jpg');
    	background-repeat: repeat-x;
    	font-style: italic;
    	margin: 0;
    	padding: 0.214em;
    }
    p.clearp {
    	clear: both;
    	padding-top: 0.50em;
    }
    p.shaded {
    	border: 1px solid #CCC;
    	padding: 1em;
    	background-image: url('../images/box_strip_sm.jpg');
    	background-repeat: repeat-x;
    }
    p.right {
    	padding: 0.30em;
    	text-align: right;
    }
    p.donate {
    	border: 1px dotted #CCC;
    	padding: 1em;
    	font-style: italic;
    	background-image: url('../images/box_strip_bg.jpg');
    	background-repeat: repeat-x;
    	width: 45%;
    }
    h4.booking_box, h4.booking_box2 {
    	text-align: center;
    	color: #FFF;
    	background-image: url('../images/box.jpg');
    	background-repeat: repeat-x;
    }
    div#info {
    	width: 260px;
    	height: 300px;
    	overflow: scroll;
    	padding: 0.50em;
    	margin: 0;
    	float: right;
    }
    p.ticker {
    	width: 240px;
    	border-bottom: 1px dashed #ccc;
    	padding-bottom: 1em;
    	margin: 0;
    	padding-top: 5px;
    }
    h4.booking_box2 {
    	text-align: left;
    }
    h4.charges {
    	color: white;
    	width: 27em;
    	margin: 0;
    	padding: 0;
    	background-image: url('../images/box2.jpg');
    	background-repeat: repeat-x;
    	height: 25px;
    }
    h1 {
    	color: #000;
    	margin-top: -0.714em;
    }
    h2 {
    	color: #666;
    	padding-top: 12px;
    }
    h3 {
    	color: #808080;
    }
    h2.center {
    	width: 95%;
    	text-align: center;
    	margin: 0;
    	padding: 0;
    }
    h4 {
    	margin: 0;
    	padding: 0;
    }
    ul.foot_list {
    	width: 100%;
    	display: inline;
    	margin: 0;
    	padding: 0;
    }
    .foot_list li {
    	margin-left: 43%;
    	font-size: 0.88em;
    	list-style: none;
    	display: inline;
    	padding: 0.214em 0.357em;
    }
    ul.list3 li {
    	background-image: url('../images/bullet.jpg');
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding: 0 0 0 1.786em;
    	list-style-position: outside;
    	list-style: none;
    }
    ul.list2 li {
    	background-image: url('../images/star_bullet.gif');
    	background-repeat: no-repeat;
    	background-position: left center;
    	padding: 0 0 0 1.786em;
    	list-style-position: outside;
    	list-style: none;
    }
    ul.list {
    	list-style-position: outside;
    	padding-left: 0.80em;
    }
    .available {
    	width: 26.85em;
    	float: left;
    	display: inline;
    	border: 1px dotted #CCC;
    }
    ul.list1 {
    	list-style-position: outside;
    	padding: 1.50em;
    }
    blockquote.charges {
    	padding: 1em;
    	font-weight: bold;
    	font-size: 0.88em;
    	border-top: 1px solid #CCC;
    }
    label span {
    	color: #000;
    }
    table.timetable {
    	width: 95%;
    	border: 1px solid #CCC;
    	font-size: 0.88em;
    }
    table.timetable tr.table_header {
    	background-image: url('../images/box2.jpg');
    	background-repeat: repeat-x;
    	color: #fff;
    	text-align: center;
    }
    table.timetable th {
    	padding: 0.214em;
    	font-weight: bold;
    }
    table.timetable td {
    	padding: 0.214em;
    	width: 20%;
    	border: 1px solid #CCC;
    	vertical-align: top;
    }
    table.hire, table.nested {
    	width: 27em;
    	padding: 0.50em;
    	border: 1px dotted #CCC;
    }
    table.nested {
    	border-top: 0;
    }
    table.hire tr.eve {
    	width: 60%;
    }
    html

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="en" name="language" />
    <meta content="Seniors Club entry page and Community Venue entry page" />
    <meta content="Seniors Club and Community Venue" />
    <title>Seniors Entry Page</title>
    <link href="styles/mainstyle.css" rel="stylesheet" type="text/css" />
    <link href="styles/navigation.css" rel="stylesheet" type="text/css" />
    <link href="styles/layout.css" rel="stylesheet" type="text/css" /></head>
    <body>   
    <div id="bodyblock">
    <div id="container">
    <div id="content">
    <h1 class="margin1">SENIORS</h1>
    <div class="left7">
    <a href="seniors/homepage.html">
    <img alt="Seniors Club " height="106" src="images/seniors_logo.gif" width="343" /></a>
    <h2>Seniors Club</h2><br/>
    <p class="caption2">
    <a href="seniors/homepage.html">Enter</a></p></div>
    <div class="right5">
    <a href="venue/home.html">
    <img alt="Seniors Community Venue" height="101" src="images/venue_logo.gif" width="201" /></a><h2>Seniors Community Venue</h2><br/><p class="caption2">
    <a href="venue/home.html">Enter</a></p></div>
    </div><!--content--></div><!--container--></div><!--bodyblock--></body></html>
    I have been working on it, but I cant find anything, I have never known anything like this.

    I also have the navigation.css
    Code:
    .indentmenu {
    	width: 100%;
    	margin: 0;
    	padding: 0;
    }
    .indentmenu ul, .indentmenu2 ul {
    	float: left;
    	margin: 0;
    	padding: 0;
    	display: inline;
    	width: 100%;
    	background: #000 url('../images/box3.jpg') repeat;
    	position: relative;
    }
    .indentmenu2 ul {
    	background: #666 url('../images/box2.jpg') repeat-x;
    }
    .indentmenu ul li, .indentmenu2 ul li {
    	display: inline;
    }
    .indentmenu ul li a, .indentmenu2 ul li a {
    	float: right;
    	color: white;
    	font-weight: bold;
    	margin: 0;
    	width: auto;
    	padding: 5px 11px;
    	text-align: center;
    	text-decoration: none;
    	border-left: 1px solid #fff;
    	display: block;
    }
    .indentmenu ul li.first a, .indentmenu2 ul li.first a {
    	border-left: 0;
    }
    .indentmenu2 ul li a {
    	float: left;
    	display: inline;
    	padding: 4px 11px;
    	text-transform: uppercase;
    }
    .indentmenu ul li a:visited {
    	color: white;
    }
    .indentmenu ul li a:hover, .indentmenu2 ul li a:hover {
    	color: white;
    	padding-top: 6px;
    	padding-bottom: 4px;
    	background-image: url('../images/box4.jpg');
    	background-repeat: repeat-x;
    }
    .indentmenu2 ul li a:hover {
    	padding-top: 3px;
    	padding: bottom: 3px;
    	background-image: url('../images/box1.jpg');
    	background-repeat: repeat-x;
    	background-position: center center;
    }
    Last edited by quartzy; 02-16-2011 at 05:16 PM.

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello quartzy,
    Have you checked that shadow.jpg is actually there, the path to it is correct and the spelling/file extension are right?

    Assuming the image is there, this should work -
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    html, body {
    	background: #fc6;
    }
    #bodyblock {
    	width: 972px;
    	margin: 0 auto;
    	background: url(../images/shadow.jpg) repeat-y;
    }
    #container {
    	width: 57em;
    	margin: auto;
    	background: #fff;
    	position: relative;
    }
    #content {height: 400px;}
    </style>
    <title>Seniors Entry Page</title>
    </head>
    <body>
        <div id="bodyblock">
            <div id="container">
                <div id="content">
                <!--content--></div>
            <!--bodyblock--></div>
        <!--container--></div>
    </body>
    </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

  • #7
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    The shadow.jpg is there, I can see shadow when viewing in my web editor preview page. But when I view in the browser the page does not have the shadow. I have checked the files are correct, and all of the css works except for the shadow, it is a right mystery.

    It works for my other pages, except the pages, that do not have navigation, footer or header, so it is this page and one other the sitemap page.

    Nontheless I added the code you gave in the html and the shadow still did not show. Something very complicated is going on with it. I have even tried adding the header div in and then the shadow only displayed on the header section.
    Last edited by quartzy; 02-16-2011 at 11:07 PM.

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    I have even tried adding the header div in and then the shadow only displayed on the header section.
    I haven't actually looked at that bunch of code you posted, much prefer a link over all the time it takes to re-assemble all that and try to reprocuce a problem with images I don't have.
    When you say the shadow shows up as far as the header section that really sounds like you are not clearing your floats. Are you floating everything in the containing element that should be expanding your shadow and leaving off the clearing element on the one offending page?

    In otherwords, if all your pages that work have a footer that has clear:both; and the page that doesn't work doesn't have the footer...
    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

  • #9
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I have fixed it, added height: 100% to the bodyblock div and it now works. Miracle to find it.

  • #10
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    I have fixed it, added height: 100% to the bodyblock div and it now works. Miracle to find it.
    That still sounds like a float clearing issue. If so, height: 100%; is not going to work unless it never has to scroll.
    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:

    quartzy (02-17-2011)

  • #11
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I have the html, body, bodyblock, container, and content on this page, the content is the main element and that has overflow: hidden;

    The way I have fixed it is that there is no scroll on the entry page or the sitemap page but that is ok as I do not need a scroll on these pages. I also dont need a header footer or navigation on these pages.

    I tried to add clear: both; to the bodyblock div but that did nothing when I removed the height, ie the same problem so I removed it and added the height: 100%; back in. This may cause a problem for all of my other pages, so maybe I will give it a individual class when I check each page.

  • #12
    Regular Coder Candygirl's Avatar
    Join Date
    Apr 2008
    Location
    Switzerland
    Posts
    184
    Thanks
    3
    Thanked 56 Times in 56 Posts
    Hello,
    Quote Originally Posted by Excavator View Post
    That still sounds like a float clearing issue.
    I agree with Excavator:
    Quote Originally Posted by quartzy View Post
    I have the html, body, bodyblock, container, and content on this page, the content is the main element and that has overflow: hidden;
    Quote Originally Posted by quartzy View Post
    Code:
    #bodyblock {
    	width: 972px;
    	margin: 0 auto;
    	background-image: url('../images/shadow.jpg');
    	background-repeat: repeat-y;
    }
    #container {
    	border: 0;
    	width: 912px;
    	background: #fff;
    	position: relative;
    	margin: auto;
    	height: auto; /* For IE */;
    	text-align: left; /*Hack to fix IE6 to center*/
    }
    #content {
    	width: 85%;
    	float: left;
    	display: inline;
    	background: #fff;
    	overflow: hidden;
    	padding: 3.50em;
    	margin: 0 auto;
    }
    Code:
    <body>   
    <div id="bodyblock">
    <div id="container">
    <div id="content">
    [...]
    </div><!--content--></div><!--container--></div><!--bodyblock--></body></html>
    The content is the one that float. You must apply the overflow (or any property that establish new block formatting contexts) at the parent (or ancestor):
    Code:
    #bodyblock {overflow:hidden;}
    On your other pages you have probably the footer inside #bodyblock with a clear, or something like that.
    Last edited by Candygirl; 02-17-2011 at 12:28 AM.
    "Imagination was given to man to compensate for what he is not;
    a sense of humour to console him for what he is."
    -Francis Bacon

  • Users who have thanked Candygirl for this post:

    quartzy (02-17-2011)

  • #13
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I dont understand clearing floats at all, or why I need to, but I removed the code I had and tried the overflow:hidden; and it works fine, so saved me a bit of extra coding. My footer is inside the bodyblock div on the other pages, and it has a clear: both; on it.

    I thought I had done so well to have found a way of sorting it and all.

  • #14
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by quartzy View Post
    I dont understand clearing floats at all, or why I need to,
    This is a good site that explains it very well.
    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

  • #15
    Regular Coder
    Join Date
    May 2009
    Posts
    813
    Thanks
    123
    Thanked 24 Times in 24 Posts
    I have read that page before, but I do not understand how it could have applied to this sitution, the bodyblock div did not have a float, the only div on the page that has a float was the content div and that div had an overflow:hidden on it.

    So if the fix was on the content, why did it not work, there is no mention of placing it on the parent. But as Candy said I should do that. Now I know it has to go on the parent, I can do that.

    thanks


  •  

    Posting Permissions

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