css debug help...
mbennett2 (425 points) | Mon, 2008-02-25 23:12I am tasked with cleaning up a site that was coded by somebody else. They didn't finish the job and now I am left with the job of picking through their code and trying to fix the things that weren't working and getting the site up and running.
I have most of it complete, but there is one item that I can't seem to figure out how to fix.
In Firefox, on both Mac and PC, there is about a 10px white border around the top and sides of the site. It works fine in Safari-mac and IE-pc. Does anybody know what is causing this and how to fix it?
I seem to remember coming across this before on another site, but can't remember for the life of me what causes it.
Apologies in advance for the sloppiness of the code. Welcome to my pain...
The site is right here
I also have an example image attached. Thanks
Commenting on this Forum topic is closed.
| Attachment | Size |
|---|---|
| statusexample.jpg | 55.16 KB |
Have you tried removing the top and left margins from the first body tag?
Also, one css file, banner, has a padding top of 5px.
Make sure to set the container/wrapper css, wherever that is!, to margin: 0px so you can eliminate that as a culprit. IE tends to forgive certain padding/margin items while Firefox is pretty strict.
I see some inline styles with the div Title and padding 15px:
This definitely complicates things. Try to remove all inline styles if you can and get them out to your css files. I'd even make all css files into one if you can.
Opera shows the site correctly (as does IE) so it is something in how Firefox reads the margin code.
Make an img group in your css code and set border to zero. Then all images will default to that. I wonder if Firefox is defaulting the image border to more than zero? This might fix that possibility.
----
Powerpoint is not a design application
My latest web design work
----
Dirt and Rust
The other problem I noticed is there's CSS styles mixed with Tables! Yuck! Might also be causing the border in Firefox. Maybe you use the * hack to keep IE margins at 0 and you set left, top and right margins for Firefox and other browsers.
Though I don't like recommending hacks, so you can probably ignore the advice here. :)
----
Powerpoint is not a design application
My latest web design work
----
Dirt and Rust
I stripped some code and threw this in the banner.css:
.body {padding: 0px;
margin: 0px;}
img {border: 0px}
That seems to have fixed it. Thanks.
Awesome!
You can also do:
*
{padding: 0;
margin: 0;}
This sets a default of 0 for both site-wide.
----
Powerpoint is not a design application
My latest web design work
----
Dirt and Rust