Problems With Css And Design Showing Right

[webgyrl]

Hi gang,

 

I have run into the strangest error with a design I am working on and I am hoping someone out there can shed some light on the matter.

 

I have a new layout that I have designed in Photoshop and then sliced in Fireworks and exported to Dreamweaver.

 

In Dreamweaver I have made this design a template and have been testing pages created from the template. Everything was going smoothly until I added in my CSS stylesheet link using the following code:

><link rel= "stylesheet" type="text/css" media="screen" href="http://www.natfunkmusic.com/mbstia/styles/main.css" />

 

When I test the design in the IE 6 and Firefox browsers with the stylesheet linked:

http://www.natfunkmusic.com/mbstia/test.htm

There is a one pixel line running along the top of the page and down the side.

 

When I take the stylesheet out, the design is fine and that one pixel line at the top and right side is gone:

http://www.natfunkmusic.com/mbstia/testnocss.htm

 

Is there any explanation for this behavior? I can't for the life of me figure it out.

 

Thanks

[TweezerMan]

The line at the top is a 1px tall table row, filled with your transparent spacer.gif. The line on the right is a 1px wide table column, also filled with your transparent spacer.gif.

 

These are showing as white lines, because in your stylesheet:

>table {
background-color: #ffffff;
}

...your table has a white background, which is showing through the transparent spacer.gifs.

 

Change the background color of the table to match the page's background color:

>table {
background-color: #01547c;
}

...and that should make the lines go away.

 

Hope this helps...

[webgyrl]

David!

 

Thank you so much for pointing that out. That was the culprit. Sometimes you just can't see the forest for the trees.... errr or the CSS!

 

Thanks again

[TCH-Don]

Nat,

you probably did this, but

when using tables it sometimes helps to turn on the table border,

or even setting the table background color to a bright color.

 

Or if you have firefox web developer extension

you can use it to see the table and cells.

[webgyrl]

Don,

 

You know, I didn't actually do that with this design because of the zillion slices I make in Fireworks to export to Dreamweaver. I do usually use that technique, but when there are a lot of slices it usually renders the design all funky in the DW view.

 

What's the Firefox extension and where can I get it?

 

Thanks

[GroovyFish]

Hi Nat,

 

You can get the Firefox Web Developer Extension here:

 

http://chrispederick.com/work/firefox/webdeveloper/

[TCH-Don]

When you have the extension,

goto tools > web developer > outline and select tables or cells.

[webgyrl]

Ok Wow... I just found a whole buncha goodies!

 

Thanks for the heads up on those guys.

 

Man, Microsoft had better come up with something REALLY good to compete with what Mozilla is doing. It's a pitty we even have to make our sites IE "friendly". Oh well.