CSS question for background in webpage

M

Mpow540

I've created a webpage using CSS. I read a tutorial that had me us a
background.jpg image and repeat that image throughout the page as a
background. However I want to have distinction in my opening page that has a
margin on the top and bottom and not have the background extend to the tip
and bottom of the browser.

Right now my code works well in IE but in Firefox my "container" div does
not extend with the text. In IE, the container extends the lenth of the <p>
tags and keeps the background white. In Firefox, the browser doesn't
recognize the lenth of the <p> tags and stops at the HEIGHT that i gave in in
my stylesheet.

I dont wanna use tables as I am trying to achieve this look universally
thorughout all browsers with CSS.

Any suggestions in my code that I should change. Below is my style sheet
and html code: I appreciate the help!

Matt
*****************************************************8

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="mdpstyle.css" />

<body>
<!-- Begin Container -->
<div id="container"><h1>This is it</h1>
<!-- Begin LEFT -->
<div id="left">

<!-- Begin navcontainer -->
<div id="navcontainer">
<ul>
<li><a href="Home.html"id="current">Home</a></li>
<li><a href="aboutme.html">About Me</a></li>
<li><a href="Contactus.html">Contact us</a></li>
<ul>
</div>
<!-- End navcontaner -->

</div>
<!--End LEFT-->

<!-- Begin content on RIGHT -->
<div id="content">
<h2> Home </h2>
<p class="text"><img src="isl1.jpg" alt="island" width="170" height="159"
class="imageright" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur wisi
mi, rutrum sit amet, viverra vel, sodales vitae,
magna. Donec tempus felis sit amet eros. Nam urna. Duis vel orci. Mauris
placerat elit id mauris. Nullam sagittis tincidunt dolor. Nunc odio
magna, porta eu, ullamcorper ac, volutpat eget, nunc. Quisque tempus leo
at augue. Etiam feugiat massa in sem. Quisque nec diam. Nunc tempus
wisi nec risus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. In auctor. Donec imperdiet ante
in metus. Curabitur felis nisl, placerat non, mollis eget, ullamcorper sit
amet, metus. In hac habitasse platea dictumst. Nam interdum urna ut
sapien. Nulla facilisi. Mauris ut velit. Proin non arcu.</p>

<p class="text"><img src="dudeatdesk.jpg" alt="computer" width="170"
height="159" class="imageleft" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur wisi
mi, rutrum sit amet, viverra vel, sodales vitae,
magna. Donec tempus felis sit amet eros. Nam urna. Duis vel orci. Mauris
placerat elit id mauris. Nullam sagittis tincidunt dolor. Nunc odio
magna, porta eu, ullamcorper ac, volutpat eget, nunc. Quisque tempus leo
at augue. Etiam feugiat massa in sem. Quisque nec diam. Nunc tempus
wisi nec risus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. In auctor. Donec imperdiet ante
in metus. Curabitur felis nisl, placerat non, mollis eget, ullamcorper sit
amet, metus. In hac habitasse platea dictumst. Nam interdum urna ut
sapien. Nulla facilisi. Mauris ut velit. Proin non arcu.</p>

<p class="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur wisi
mi, rutrum sit amet, viverra vel, sodales vitae,
magna. Donec tempus felis sit amet eros. Nam urna. Duis vel orci. Mauris
placerat elit id mauris. Nullam sagittis tincidunt dolor. Nunc odio
magna, porta eu, ullamcorper ac, volutpat eget, nunc. Quisque tempus leo
at augue. Etiam feugiat massa in sem. Quisque nec diam. Nunc tempus
wisi nec risus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. In auctor. Donec imperdiet ante
in metus. Curabitur felis nisl, placerat non, mollis eget, ullamcorper sit
amet, metus. In hac habitasse platea dictumst. Nam interdum urna ut
sapien. Nulla facilisi. Mauris ut velit. Proin non arcu.</p>

<p class="text"><img src="img1.gif" alt="surfing" width="170" height="159"
class="imageright" />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur wisi
mi, rutrum sit amet, viverra vel, sodales vitae,
magna. Donec tempus felis sit amet eros. Nam urna. Duis vel orci. Mauris
placerat elit id mauris. Nullam sagittis tincidunt dolor. Nunc odio
magna, porta eu, ullamcorper ac, volutpat eget, nunc. Quisque tempus leo
at augue. Etiam feugiat massa in sem. Quisque nec diam. Nunc tempus
wisi nec risus. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. In auctor. Donec imperdiet ante
in metus. Curabitur felis nisl, placerat non, mollis eget, ullamcorper sit
amet, metus. In hac habitasse platea dictumst. Nam interdum urna ut
sapien. Nulla facilisi. Mauris ut velit. Proin non arcu.</p>

</div>
<!-- End content on RIGHT -->

</div>
<!-- End Container -->

<!-- Begin Footer -->
<div id="footer">
<h2>Copyright</h2>
</div>
<!-- End Footer -->

</body>
</html>

**********************************************************
CSS STYLESHEET:

body{
background: #ABABAB;
}

#container{
margin: 0px auto;
margin-top: 30px;
text-align: center;
background: #E1DCC8;
height: 400px;
width: 860px;
border-bottom: 10px solid #F7F7F6;
border-top: 10px solid #F7F7F6;
border-left: 10px solid #F7F7F6;
border-right: 10px solid #F7F7F6;
text-align: left;
}

h1 {
width: 860px;
height: 200px;
text-indent: -9999px;
background: url(b1.jpg);
border-bottom: 10px solid #F7F7F6;
margin: 0;
padding: 0;
}


#left{
width: 162px;
float: left;

}

#navcontainer{
width: 162px;
background: #5C604D;
margin: 10px 0 0 5px;
}

#navcontainer ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 14px/22px Verdana, Arial, Helvetica, sans-serif;
letter-spacing: 1px;
text-indent: 12px;
position: absolute;
}


#navcontainer a:link, #navcontainer a:visited{
color: #5C604D;
text-decoration: none;
}


#navcontainer a:hover {
color: #7597BA;
text-decoration: none;
}

#navcontainer li a#current {
color: #7597BA;
text-decoration: none;
}

#content{
width: 665px;
float: left;
padding: 15px 10px 15px 10px;
}

#content h2{
font: normal 18px Georgia, Times New Roman, Times, serif;
color: #6E6145;
width: 630px;

margin: 0;
}

#form{
width: 665px;
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;

}

..text {
font: 11px/18px Verdana, Arial, Helvetica, sans-serif;
color: #000000;
margin-bottom: 10px;
}

..imageright{
float: right;
padding: 4px;
background-color: #F7F7F6;
border: 1px solid #bac1a3;
margin-left: 10px;
}

.imageleft{
float: left;
padding: 4px;
background-color: #F7F7F6;
border: 1px solid #bac1a3;
margin: 0 10px 10px 0;
}

#footer {
width: 860px;
background: #1E669C;
margin: 0px auto;
clear: both;
position: relative;
padding: 8px 0;
border-left: 10px solid #F7F7F6;
border-right: 10px solid #F7F7F6;
border-bottom: 10px solid #F7F7F6;
}

#footer h2{
text-align: center;
margin: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}
 
M

Murray

In Firefox, the browser doesn't
recognize the lenth of the <p> tags and stops at the HEIGHT that i gave in
in
my stylesheet.
Click to expand...

This is the correct behavior.

You have errors in your HTML -

No </head> tag.
Improperly terminated <ul></ul> tag.

You need to clear your floats before closing the container div. I'll post
an example page in a few....
 
M

Mpow540

Thanks! It worked great! Why was it that I need a break command? And what
did it clear?

Also....it seems that mozilla always seems to interpret my code the way it
wants. I use it as a default browser so i have to make sure that it is
compatable.

Thanks again. I appreciate it
 
M

Murray

Mozilla interprets your code according to standards. It's you, who write it
(or direct FP to write it) in a non-standard way.

The important element in my page was the style applied to the <br> tag -

When an element is floated, it is removed from the flow of the code on the
page in such a way that its container will no longer contain it, instead
collapsing to the next smallest non-floated element. This means that when
you have a container within which there are floated elements, you must clear
the floats before closing the container, which forces the container to
recognize that, although floated, the element that would poke through must
now be contained.

That's what the style rule I put on the <br> tag did -

..clearer { height:0;line-height:0;font-size:0;clear:both; }

The height stuff is just to make sure that the <br> contributes nothing to
the height of that content.
 
M

Mpow540

Thanks alot for all the help! I continue to learn everyday from this
discussion group. Thanks again.

Matt
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

a test posting 0
a test posting 0
Outlook adds additional line breaks in plain text emails 1
a test posting 0
Bad wordwrap in quoted text 3
Applying style to first portion of a paragraph only 3
Style driven, in-line "verse numbering" - possible? 6
A funny thing happened on the way to MS Word 2002 Outliner.... 0

Top