11 replies [Last post]
bryanptcs
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2007-07-19
Posts: 29
Points: 0

I am having trouble with the layout in Firefox. It is putting a space in between my nav bar and the text. It checks out fine in IE 7, and everything but a "onload" tag validates. The site is www.yourlooklaptops.com.

Here is my html

index_sliced


 


 


 

 
















Home




How it works




Pricing




Some Examples




Here is how you can contact us








 




Welcome to YourLookLaptops.com brought to you by Palm Tree Computer Systems. Your Look Laptops allows you to fully customize your laptop cover. Unlike others, this is not a sticker that you place on the cover. This is a wrap which completely covers your laptop lid seamlessly.


Allow our professionals to customize your laptop today at Palm Tree Computer Systems. We can take your logo, family picture, or graphic and design a laptop cover that will be unique and individualized for you.





 


 


 








Here is my css:

/* 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;
}

#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;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Collapsing margins - add

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

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

bryanptcs
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2007-07-19
Posts: 29
Points: 0

I made that change and it

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;

}

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

bryan, what's with the table

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




Welcome to YourLookLaptops.com brought to you by Palm Tree Computer Systems. Your Look Laptops allows you to fully customize your laptop cover. Unlike others, this is not a sticker that you place on the cover. This is a wrap which completely covers your laptop lid seamlessly.


Allow our professionals to customize your laptop today at Palm Tree Computer Systems. We can take your logo, family picture, or graphic and design a laptop cover that will be unique and individualized for you.




bryanptcs
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2007-07-19
Posts: 29
Points: 0

The table is keeping all the

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

welcome to the future. You

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!

drhowarddrfine
Offline
Leader
Last seen: 12 years 36 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

The gap is caused by that

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.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

bryanptcs
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2007-07-19
Posts: 29
Points: 0

Ok, I am trying to use a

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

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 8 years 23 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

good for you for trying to

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.

bryanptcs
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2007-07-19
Posts: 29
Points: 0

Ok, I think I finally got

deleted due to ignorance

bryanptcs
Offline
Regular
Last seen: 14 years 16 weeks ago
Joined: 2007-07-19
Posts: 29
Points: 0

I will understand all this soon enough..

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

Welcome to YourLookLaptops.com brought to you by Palm Tree Computer Systems. Your Look Laptops allows you to fully customize your laptop cover. Unlike others, this is not a sticker that you place on the cover. This is a wrap which completely covers your laptop lid seamlessly.

Allow our professionals to customize your laptop today at Palm Tree Computer Systems. We can take your logo, family picture, or graphic and design a laptop cover that will be unique and individualized for you.

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;
}

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 43 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

It's because of the height

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.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference