layout trouble in firefox

Collapsing margins - add padding-top: 1px to #main.

I made that change and it fixed the top portion I had a problem with, but now, it is is putting about a 1 px space in between the main area and the footer bar. I have tried the same technique for collasping margins there, but it did not fix the problem.

www.yourlooklaptops.com

Here is my style:

/* CSS Document */

body {
margin:0;
padding:0;
background-color:#eeeff0;
}
#content {
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-color: #eeeff0;
background-position:center;
height:820px;
}

#maintext {
background-image:url(images/index_24.gif);
background-repeat:repeat-y;
width:441px;
height:506px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
margin:0px;
padding-top:1px;
padding-bottom:0px;
}

#leftcol {

background-image:url(images/index_23.gif);
width:307px;
height:506px;
margin:0px;

}

#footer {
background-image: url(images/index_28.gif);
width:752px;
height:38px;
margin:0;

}

bryan,
what's with the table for layout? And all the javascript? And why the transitional doctype?

The page as is could be as simple as this:

Page Title

The table is keeping all the images together, the javascript is the rollover nav.

welcome to the future. You can and should use CSS for layout and simple behavior, like rollovers. :thumbsup:

that's the whole basis for this forum!

The gap is caused by that very bottom image under the footer being too high and not the footer image itself. Don't have time to see how to fix that.

Like many, I have trouble trying to decipher what's going on in a table layout. As implied above, never use tables for layout. Also, spacer gifs went out with the dodo bird.

Ok, I am trying to use a rollover image tutorial I found here on the forum, the regular image and hover work fine, but the active does not become active on click like it would using JS, any thoughts, www.yourlooklaptops.com/test.html

Here is my style:

/* CSS Document */

body {
margin:0;
padding:0;
background-color:#eeeff0;
background-image: url(images/bg.gif);
background-repeat: repeat-x;
background-position:center;
text-align:center;

}
#content {
width: 800px;
height:820px;
}

#header {
width: 752px;
height:175px;
padding:0;
margin:0;
}
#navbar {
background-image: url(images/test3_06.gif);
height:56px;
width: 752px;

}

#nav {
padding-left:200px;
padding-top:2px;
text-align:left;
}

a#homeLink img {
background-image: url(images/Home.gif);
height: 52px;
width: 107px;
}

a#homeLink:active img {
background-image: url(images/Home-down.gif);
height: 52px;
width: 107px;
}
a#homeLink:hover img{
background-image: url(images/Home-over.gif);
height: 52px;
width: 107px;
}

Here is my html:

Untitled Document

good for you for trying to convert it to css. :thumbsup:

I don't know what tutorial you're using, but if you're following it closely I don't think it's a good one. http://css.maxdesign.com.au/listutorial/ is a great place to learn making nav menus from lists using css.

A few comments on what you have so far:

You've combined a few images into a larger in the header area - this is good. I'd take it even further and add the lower portion of the laptop to the image. I would also make this a background image to the header.

For SEO, I'd keep the h1 and h2 I placed in the header (you could change them to an appropriate level header) and use text-indent to hide the text from view.

I see you placed a text-align center on the body. Is this to try to center the container? If so, lose it and use auto left and right margins on the container.

I would get accustomed to using css shorthand. The background styles can be combined into one declaration for instance.

I would also strongly recommend using a list for the menu (see above link).

Keep at it, there are plenty of folks here willing to help you along.

deleted due to ignorance

I have the layout seemingly working fine, my question comes with my footer. In IE 7 it puts it where I want, but in firefox, it puts it below the footer image, any ideas why?

http://www.yourlooklaptops.com

Untitled Document

CSS:

/* CSS Document */

body {
margin-top:0;
padding:0;
background-color:#eeeff0;
background-image: url(images/bg.gif);
background-repeat: repeat-x;

}
#content {
width: 800px;
height:820px;
margin-right:auto;
margin-left: auto;
}

#header {
width: 752px;
height:231px;
padding:0;
margin:0;
background-image:url(images/header_02.gif);
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;

}
h1 {
text-indent: -5000px;
}
h2 {
text-indent: -5000px;
}

#nav {
height:56px;

padding-left: 200px;
padding-top:177px;

text-align:left;
}

#nav ul {
list-style-type: none;
margin:0;
padding:0;
}
#nav ul li {

display: inline;
}

img {
border:0;
}

a#homeLink img {
background-image: url(images/Home.gif);
height: 52px;
width: 107px;
}

a#homeLink:hover img{
background-image: url(images/Home-over.gif);
height: 52px;
width: 107px;
}

a#homeLink:active img {
background-image: url(images/Home-down.gif);
height: 52px;
width: 107px;
}

a#processLink img {
background-image: url(images/process.gif);
height: 52px;
width: 108px;

}

a#processLink:hover img{
background-image: url(images/process-over.gif);
height: 52px;
width: 108px;
}

a#processLink:active img {
background-image: url(images/process-down.gif);
height: 52px;
width: 108px;
}

a#pricingLink img {
background-image: url(images/pricing.gif);
height: 52px;
width: 108px;

}

a#pricingLink:hover img{
background-image: url(images/pricing-over.gif);
height: 52px;
width: 108px;
}

a#pricingLink:active img {
background-image: url(images/pricing-down.gif);
height: 52px;
width: 108px;
}

a#galleryLink img {
background-image: url(images/gallery.gif);
height: 52px;
width: 108px;

}

a#galleryLink:hover img{
background-image: url(images/gallery-over.gif);
height: 52px;
width: 108px;
}

a#galleryLink:active img {
background-image: url(images/gallery-down.gif);
height: 52px;
width: 108px;
}

a#contactLink img {
background-image: url(images/contact.gif);
height: 52px;
width: 109px;

}

a#contactLink:hover img{
background-image: url(images/contact-over.gif);
height: 52px;
width: 109px;
}

a#contactLink:active img {
background-image: url(images/contact-down.gif);
height: 52px;
width: 109px;
}
#mainarea {
background-image: url(images/mainbg_23.gif);

height: 506px;
width: 752px;
margin-left:auto;
margin-right:auto;

}
#leftcol {

width:307px;
height:506px;
margin:0px;
padding-top:1px;
float:left;

}
#maintext {
float:left;
width:441px;
height:506px;
text-align:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:14px;
color:#000000;
margin:0px;
padding-top:15px;
padding-bottom:0px;
}

#footer {
background-image: url(images/footer_bg_25.gif);
width:800px;
height:69px;
margin-left:auto;
margin-right:auto;

}

#foottext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
text-align:center;
padding-top: 4px;
}

It's because of the height on #maintext. You shouldn't put fixed pixel heights on main content areas because if the content is longer or people increases the size of the text inside their browser, it'll overflow the specified height.