No matter what I do, containing blocks never want to work for me. Maybe I'm simply looking in the wrong places? Here's some examples:
This first example is taken from a web site... somewhere. I'm stressed right now, I didn't write it down. It works fine in IE 6 but not in Firefox 1.02. Is that even possible?
<html>
<head>
<style>
div.conteneur {background-color: blue;height: 100px;width: 100px;}
div.bloc {background-color: yellow;height: 50px;width: 50px;margin-left: 20px;margin-top: 40px;}
</style>
<body>
<div class="conteneur">
<div class="bloc"><p>bli bli bli</p></div>
</div>
</body>
</html>
The next code is from the page I'm actually working on. It refuses to aline the inline block properly - I want it to use "parch" as its reference point. It was even worse earlier when it would reattach to the window whenever you reloaded, but I accidently fixed that, so I'm okay there.
<html lang="en-CA" xml:lang="en-CA">
<head>
<title>Title</title>
<style>
body {background-image: url(../images/wood-bg.jpg); margin: 0px;}
div.parch {border-style: solid; border-color: #b5a677; background-image: url(../images/parch.jpg);
margin-left: 4em; margin-right: 60px; margin-top: 4em; margin-bottom: 20px; padding-left: 1em;
padding-right: 1em; padding-top: .25em; padding-bottom: .25em;}
div.parchCorner {background-color: green; position: absolute; right: 0px;}
</style>
</head>
<body>
<div class="parch">
<div class="parchCorner">Inline Block</div>
<p>Text and stuff</p>
</div>
</body>
</html>
I know whatever I'm doing is my fault, so I'd appreciate any effort to put a stop to whatever it is I'm doing. Thanks.add position:relative; to your div.parch style.
and while you're at it, put a doctype at the top of your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
- or -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/HTML401/loose.dtd">
Actually, I cut the DTD when trying to find the mistake, but thanks for reminding me to put them back in! I guess I should have started by checking for the first step of my layout process, huh? Man, and yesterday I put a capital where it didn't belong in a style name. I am going down hill!
Anyways, thanks HaganeNoKokoro, you're a lifesaver!
This first example is taken from a web site... somewhere. I'm stressed right now, I didn't write it down. It works fine in IE 6 but not in Firefox 1.02. Is that even possible?
<html>
<head>
<style>
div.conteneur {background-color: blue;height: 100px;width: 100px;}
div.bloc {background-color: yellow;height: 50px;width: 50px;margin-left: 20px;margin-top: 40px;}
</style>
<body>
<div class="conteneur">
<div class="bloc"><p>bli bli bli</p></div>
</div>
</body>
</html>
The next code is from the page I'm actually working on. It refuses to aline the inline block properly - I want it to use "parch" as its reference point. It was even worse earlier when it would reattach to the window whenever you reloaded, but I accidently fixed that, so I'm okay there.
<html lang="en-CA" xml:lang="en-CA">
<head>
<title>Title</title>
<style>
body {background-image: url(../images/wood-bg.jpg); margin: 0px;}
div.parch {border-style: solid; border-color: #b5a677; background-image: url(../images/parch.jpg);
margin-left: 4em; margin-right: 60px; margin-top: 4em; margin-bottom: 20px; padding-left: 1em;
padding-right: 1em; padding-top: .25em; padding-bottom: .25em;}
div.parchCorner {background-color: green; position: absolute; right: 0px;}
</style>
</head>
<body>
<div class="parch">
<div class="parchCorner">Inline Block</div>
<p>Text and stuff</p>
</div>
</body>
</html>
I know whatever I'm doing is my fault, so I'd appreciate any effort to put a stop to whatever it is I'm doing. Thanks.add position:relative; to your div.parch style.
and while you're at it, put a doctype at the top of your page.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 STRICT//EN" "http://www.w3.org/TR/HTML401/strict.dtd">
- or -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN" "http://www.w3.org/TR/HTML401/loose.dtd">
Actually, I cut the DTD when trying to find the mistake, but thanks for reminding me to put them back in! I guess I should have started by checking for the first step of my layout process, huh? Man, and yesterday I put a capital where it didn't belong in a style name. I am going down hill!Anyways, thanks HaganeNoKokoro, you're a lifesaver!