Background Images

**samo1215** · 04-22-2008, 01:46 AM

I have been reading and working and then reading some more but I feel I have reached another impasse. Here is my revised code:

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- Test Website Version 1.0 ---> 
<head>
   
    <title>Test - Home</title>
    <link rel="shortcut icon" href="/favicon.ico" />
    <link href="stylemain.css" type="text/css" rel="stylesheet" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
        var image1=new Image()
        image1.src="images/pageimage1.jpg" 
        var image2=new Image()
        image2.src="images/pageimage2.jpg" 
        var image3=new Image()
        image3.src="images/pageimage3.jpg"
    </script>
    
</head>

<body>

<div id="pagecontainer">

<div id="header">
    <img src="images/header.gif" alt="Test Website Header Graphic" />
</div>

<div id="nav">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="About">About Us</a></li>
        <li><a href="Properties">Properties</a></li>
        <li><a href="Landgroup">Landgroup</a></li>
        <li><a href="Foundation">Foundation</a></li>
        <li><a href="Contact">Contact</a></li>
    </ul>
</div>

<div id="content">
    <h2>Welcome</h2>
    <p>Insert more text here...</p>
</div>

<div id="pageimage">
    <img src="images/pageimage1.jpg" name="slide" />
</div>

<script>
    var step=1
    function slideit(){
    if (!document.images)
    return
    document.images.slide.src=eval("image"+step+".src")
    if (step<3)
    step++
    else
    step=1
    setTimeout("slideit()",3000)
    }
    slideit()
</script>

<div id="footer">
Copyright 2008. All Rights Reserved.
</div>

</div>

</body>

</html>

CSS

Code:

/* Test Style Sheet */

#pagecontainer
{
width: 1024px;
margin-left: 20px;
margin-right: 20px;
}

/*Navigation Bar Code Begins */
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
}

#nav ul li
{
display: inline;
}

#nav ul li a:link
{
background: url(images/background.gif);
font: 10px/20px, "lucida grande", verdana, sans-serif;
text-decoration: none;
color: black;
padding: .2em 4.97em;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}

#nav ul li a:hover
{
background: url(images/backgroundhover.gif);
font: 10px/20px, "lucida grande", verdana, sans-serif;
text-decoration: none;
color: black;
padding: .2em 4.97em;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
}

/*Navigation Bar Code Ends */

#content
{
font-family: helvetica, arial, sans-serif;
font-size: small;
border: 2px solid gray;
float: left;
width: 160px;
height: 300px;
position: relative;
margin-top: 3%;
padding: 1em;
}

#content h2 
{ 
margin: 0;
padding: 0; 
}

#pageimage
{ 
float: left;
position: relative;
margin-top: 4%;
margin-left: 3%;
height; 300px;
width; 720;
max-width: 36em;
}

#footer
{
clear: both;
float: left;
width: 930px;
position: relative;
margin-top: 2%;
padding: 0.5em;
text-align: center;
font-size: x-small;
background-color: #ddd;
border-top: 1px solid gray;
}

First of all, as you can see I have some gaps between each navigation item. I have tried eliminating the padding and margins to no avail. Ideally I want it to span the entire length of the header image (which currently is 930px) with no gaps between each item. It's not a big deal but I still have a gap between the header and nav bar as well. Any idea how to eliminate it?

Second, the layout is still falling about in IE6. The main issue is still the navigation bar which wraps around to another line and screws up my entire page. Also, the centering looks off and doesn't translate from well from what I see in Firefox. Sorry to be a bother, I'm putting together my first site and trying to learn all of this stuff at the same time.

**LadynRed** · 04-22-2008, 12:09 PM

Your nav is spilling over in IE6 because you've got a nearly 5em padding on the links inside nav - which means 10em total for left and right. They are too wide to fit in the space you've defined for the page.

From what I can see, you don't have anything set to center the container. You need margin: 0 auto; to center #pagecontainer.

You have some syntax errors in your CSS.

IE6 does NOT support min/max width/height. You have to have a separate css file that you call with conditional comments that will contain ONLY the hacks needed to make IE6 behave. For IE6, you'll have to specify a height instead of max-height.

You should not use font sizing like x-small, small, medium - browsers don't all render the font sizing the same. You should also NOT specify font sizes with PX because IE6 users will not be able to resize the text if they want to.

This works:

Code:

body{
    margin:0;
    padding: 0;
}

#pagecontainer
{
width: 1024px;
/*margin-left: 20px;
margin-right: 20px;*/
margin: 0 auto;
background: #fff;
}

/*Navigation Bar Code Begins */
#nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
height: 1.5em;
border: 1px solid red;

}

#nav ul li
{
display: inline;
padding: 0;
margin: 0;
float: left;
width: 10em;
text-align: center;
border: 1px solid black;
}

#nav ul li a:link
{
background: url(images/background.gif);
font: .80em normal "lucida grande", verdana, sans-serif;
text-decoration: none;
color: black;
/*padding: .2em 4.97em;*/
padding: .5em 0;
height: 1.5em;
}

#nav ul li a:hover
{
background: url(images/backgroundhover.gif);
font: .70em "lucida grande", verdana, sans-serif;
text-decoration: none;
color: black;
padding: .2em 0;
background: #e0ffff;
}

/*Navigation Bar Code Ends */

#content
{
font-family: helvetica, arial, sans-serif;
font-size: small;
border: 2px solid gray;
float: left;
width: 160px;
height: 300px;
position: relative;
margin-top: 3%;
padding: 1em;
}

#content h2 
{ 
margin: 0;
padding: 0; 
}

#pageimage
{ 
float: left;
position: relative;
margin-top: 4%;
margin-left: 3%;
height: 300px;
width; 720;
max-width: 36em;
}

#footer
{
clear: both;
float: left;
width: 930px;
position: relative;
margin-top: 2%;
padding: 0.5em;
text-align: center;
font-size: x-small;
background-color: #ddd;
border-top: 1px solid gray;
}

.brclear { /* Use a break with this class to clear float containers on both sides */ 
clear:both; 
height:0; 
margin:0; 
font-size: 1px; 
line-height: 0; 
}

HTML - just add the clearing break to clear the floats:

Code:

<div id="nav">
    <ul>
        <li><a href="Home">Home</a></li>
        <li><a href="About">About Us</a></li>
        <li><a href="Properties">Properties</a></li>
        <li><a href="Landgroup">Landgroup</a></li>
        <li><a href="Foundation">Foundation</a></li>
        <li><a href="Contact">Contact</a></li>
    </ul>
    <br class="brclear" />
</div>

Then here:
</div>
<br class="brclear" />
</body>