Web Hosting Talk






PDA

View Full Version : [CSS] :S Weird...

JustinSmall
05-02-2008, 03:51 AM
Yes it's me again, I ask a lot of questions here... bc I know you guys are the best!

Basically, I have a a div called page, that holds all of my content together, well I added a new div at the bottom, but the background for the div page doesn't show, even though its set to auto.

It shows in IE7 just fine, just not in FF.

Heres my code


index.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" dir="ltr">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>iCandyDesigns by Justin Small | Professional Design Services</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

</head>
<body>
<div id="page">
<div id="navBar">
<div class="link">Free Quote </div>
<div class="link"><a href="#">Home</a></div>
</div>
<div id="services">
<div class="Margin"> </div>
<div class="Container">
<div class="Header">
<h2>Web Design </h2>
</div>
<div class="Content">
<p>&nbsp;</p>
</div>
</div>
<div class="Sep"> </div>
<div class="Container">
<div class="Header">
<h2>Brand Design </h2>
</div>
<div class="Content">
<p>&nbsp;</p>
</div>
</div>
<div class="Sep"> </div>
<div class="Container">
<div class="Header">
<h2>Server Side Coding </h2>
</div>
<div class="Content">
<p>&nbsp;</p>
</div>
</div>
<div class="Margin"> </div>
</div>
<div id="left">
s
</div>
</div>
</body>
</html>



Heres the CSS

/*
Theme Name: Smexy
Theme URI: http://www.icandydesigns.net
Version: 1.0
Author: Justin Small
*/

/* GENERAL STYLES */
body {
margin: 0px auto;
padding-left:10px;
color: #333;
width:770px;
background: #000 url(images/body-bg.jpg) no-repeat top center;
}
#page {
width: 770px;
height: auto;
margin-top: 275px;
background-color: #F5F5F5;
}
.clear {
clear: both;
height: 0px;
}



/* NAVIGATION */
#navBar {
margin: 0px;
height: 30px;
width: 770px;
line-height: 30px;
background: #FFF url(images/navBar_bg.jpg) repeat-x top left;
color: #919191;
font-weight: bold;
font-family: Trebuchet;
font-size: 12px;
}
.link {
float: right;
margin-right: 10px;
width: 90px;
height: 30px;
background: #FFF url(images/link_bg.jpg) no-repeat top left;
text-align: center;
display: block;
}
.link a:link {
color: #919191;
text-decoration: none;
display: block;
}
.link a:hover {
color: #919191;
text-decoration: none;
display: block;
}
.link a:visited {
color: #919191;
text-decoration: none;
display: block;
}



/* SERVICES BLOCK */
#services {
margin: 0px;
width: 770px;
height: 235px;
background: #FFF url(images/services_bg.jpg) repeat-x top left;
}
#services .Container {
float: left;
width: 250px;
height: 235px;
text-align: center;
}
#services .Header {
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 0px;
height: 40px;
width: 220px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-family: Trebuchet;
color: #565656;
background: url(images/services_header_bg.jpg) no-repeat top left;
}
#services .Content {
margin-top: 0px;
margin-left: auto;
margin-right: auto;
height: auto;
width: 220px;
text-align: left;
background: #FFF;
}
#services p {
margin: 5px;
font-size: 12px;
font-family: Trebuchet;
font-weight: bold;
font-style: italic;
color: #565656;
}
#services h2 {
margin: 0px;
line-height: 30px;
text-align: center;
font-size: 20px;
font-family: Trebuchet;
color: #565656;
font-weight: bold;
}
#services .Margin {
float: left;
width: 5px;
height: 235px;
}
#services .Sep {
float: left;
width: 5px;
height: 235px;
vertical-align: middle;
background: url(images/services_seperator.jpg) no-repeat center top;
}




/* RIGHT CONTENT */
#left {
float: left;
width: 415px;
height: auto;
margin-left: 10px;
margin-top: 10px;
background: #FFF;
}



/* RIGHT CONTENT */
#right {
float: left;
width: 335px;
height: auto;
margin-left: 10px;
margin-top: 15px;
padding-top: 2px;
background-color: #DCDDDD;
border: thick #FFF;
padding-bottom: 5px;
}
#rightBanner{
margin-top: 15px;
margin-left: auto;
margin-right: auto;
width: 317px;
height: 241px;
text-align: center;
background: url(images/icandybanner.jpg) no-repeat top left;
}

I checked all of my validators (xhtml css) both read just fine, no errors or tips...

http://icandydesigns.net to see the design!
the_pm
05-02-2008, 07:46 AM
Hey Justin,

The reason Fx is not showing the background behind the bottom div is because it is floated, which means it technically "sticks out" of the bottom of its container. IE is the only browser that interprets this incorrectly by extending the containing element (#page) below the floated <div>. While the effect on the screen is the desirable one for you, it is faulty.

To make this work in all browsers, try adding this code to the bottom of your stylesheet:

/* CLEARFIX */
#page { overflow:hidden }
* html #page { height:1% ; overflow:visible }You can add more elements that need to be self-cleared in this manner by simply adding the ID or class name to the rules, like so:

/* CLEARFIX */
#page, #whatev { overflow:hidden }
* html #page, * html #whatev { height:1% ; overflow:visible }This will not only allow container objects to clear floated objects, it will remove the need for those empty divs people like to use for clearing. This is a much more elegant solution than a bunch of empty boxes all over the place :)
JustinSmall
05-02-2008, 12:05 PM
Wow, when I first looked at the code, I was thinking... this dude is smoking crack. Then I put it in, and it worked... so thanks a lot bud, I don't understand why it does what it does... but it works.

Can someone explain to me why adding


overflow: hidden;

to #page

and

* html #page {
height: 1%;
overflow:visible
}

in there works?
JustinSmall
05-02-2008, 12:28 PM
http://icandydesigns.net/

Ok check it out now, the bottom left text has pushed the right content down, the CSS is still relatively the same... why is it doing this? and is there a way to fix it?
stripeyteapot
05-02-2008, 07:15 PM
Can someone explain to me why adding
...
in there works?

It works because you're reminding the UA that it's supposed to wrap any floated items within. The height attribute star hack is to trigger hasLayout in Ie6 and before. Unless I'm mistaken width should also do the trick but I haven't experimented with it enough to say for sure.