...

View Full Version : Resolved Mystery CSS behaviour



quartzy
02-16-2011, 02:42 PM
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



#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


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

VIPStephan
02-16-2011, 02:54 PM
Maybe it’s this CSS error?


height: auto; /* For IE */;

quartzy
02-16-2011, 03:07 PM
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.

abduraooft
02-16-2011, 04:31 PM
Please post a link or your complete HTML+CSS.

quartzy
02-16-2011, 05:12 PM
Its not uploaded yet, but I will post all of my styles and html

Layout.css


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


.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


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

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

Excavator
02-16-2011, 05:26 PM
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 -
<!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>

quartzy
02-16-2011, 10:51 PM
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.

Excavator
02-16-2011, 11:24 PM
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...

quartzy
02-16-2011, 11:25 PM
I have fixed it, added height: 100% to the bodyblock div and it now works. Miracle to find it.

Excavator
02-16-2011, 11:36 PM
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.

quartzy
02-16-2011, 11:45 PM
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.

Candygirl
02-17-2011, 12:25 AM
Hello,

That still sounds like a float clearing issue.
I agree with Excavator:

I have the html, body, bodyblock, container, and content on this page, the content is the main element and that has overflow: hidden;





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



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


#bodyblock {overflow:hidden;}

On your other pages you have probably the footer inside #bodyblock with a clear, or something like that.

quartzy
02-17-2011, 12:47 AM
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.

Excavator
02-17-2011, 01:14 AM
I dont understand clearing floats at all, or why I need to,

This (http://www.quirksmode.org/css/clearing.html) is a good site that explains it very well.

quartzy
02-17-2011, 01:51 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum