CSS Debug Help Part Deux
mbennett2 (425 pencils) | Wed, 2008-09-24 18:58Once again I find myself in need of a little help...
I am tasked with making this site work by debugging the code from the person who originally coded it. It is a bit of a nightmare. I am mostly finished, but there is one little thing I cannot seem to figure out:
The site in question can be seen here: http://www.classiccharter.com/redo
In the upper right hand side of the top banner, there is a two piece image of a limo photo and a small wax stamp type thing. These two images are dropping down one pixel and not aligning with the rest of the banner. I cannot figure out what is causing this or how to fix it. I was hoping somebody with fresh eyes may be able to see what the problem is...
I will apologize in advance for the hornets nest-like code. Welcome to my nightmare.
I have attached a screenshot sample so that you can narrow in on what I am talking about.
Also, this problem is occuring in FF on both Mac & PC, IE on PC, but it is ok on Safari on Mac.
| Attachment | Size |
|---|---|
 CS-sample.jpg | 26.37 KB |
Commenting on this Forum topic is closed.
You might need to hack it and do a negative margin for the top of your centered container. Or use a body topmargin="0" tag in the html?
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust
Used GreaseMonkey in FF2 to create a fix:
body
{
padding: 0px;
margin: 0px;
[added this code] margin-top: -1px;
}
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust
Thank you for the assistance. That seemed to correct it in all browsers except for Mac FF. The left side of that image is still one pixel down in that browser, but I will keep working on that later. My main concern is the PC for the moment.
Thanks again.
Sure!
This might fix it for all browsers; you have several objects on that top line, the image and the .banner elements to the left so I added another - hack to your css file:
.banner
{
background-image:url(../images/topBGpage.jpg);
height:273px;
width:100%;
/*added this code*/ margin-top: -1px;
}
If your content was all in one frame div it would be much easier to raise it all up at once, though I know how awful working on someone else's code is!
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust
Yeah, this code has been a nightmare. So many redundancies which make it all the more difficult. This site has come a long way from where it was, although it is destined to have sloppy code for life at this point.
Anyhow, I was able to fix the one image by adding a valign="top" to the table row. Yes tables. bleh. That managed to fix it in Mac FF without affecting it anywhere else.
So now it displays properly in IE PC, FF Mac & Pc, Safari Mac & PC. These are the main ones I am concerned about for the most part.
Again, thanks for the swift assistance. I can't wait to be done with this one...
Tables + divs. Sheesh!
You've been on this site for a while. I'm sure you'll be happy when it's done!
Oh goodie; I get to redesign a help desk app that's designed wholly in tables and inline styles. Lucky me. ...gurgh...
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust
Yeah, this site has been hanging around for awhile. I haven't been putting any time into at all though. I got it to about 95% finished and the client put it on hold, so it has been sitting dormant for a couple/few months.
Now I am picking it back up again and I realized that I never fixed that one little glitch. It is difficult to dive back into this crappy code and try to wrap my head around it after three months, that's for sure.
After this one gets completed, they have another site that was coded by the same guy that also needs to be converted. It won't be difficult though, because it is going to be based on this template, so the content will be the main change. It is just a different division of this same company.
Wish me luck...
I'd suggest just redoing the next site. It will be MUCH easier. Use a frame div and all css and all will be well. :) Might even take less time to debug!
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust
Their budget doesn't really allow for it, but I may do it anyways.
Tell them further changes will be cheaper if they spend a little now. But seriously, since the images are there to help the layout along, you won't have much trouble.
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust
I went ahead and rebuilt the layout the way I wanted it. You are right, it will save a ton of time later down the road, and now I am free of that mess. Thank goodness...
Hey great! Glad it worked. I find that sometimes it's better to just buy a new car than to drive a cheap one around that breaks down all the time. :)
----
Natobasso
dirtandrust.com
"Powerpoint is not a design application"
----
Dirt and Rust