Click to See Complete Forum and Search --> : Minor IE spacing problems


wamboid
03-04-2006, 05:30 PM
I'm having 3 minor spacing problems in IE, of course it looks correct in FF. I'm not getting paid much for the job, so I don't want to spend too much time on it. The person it's for drew up how they wanted the page to look and I'm just doing the grunt work. Anyway, here is the url for a page with all 3 problems on it: www.martin-weldingcom (http://www.martin-welding.com/pastjobs.html).

First, there should be a 25px border around the bottom like the one on top.

Second, the first row of pics in the agriculture section is 1 or 2 px off to the right from the 2nd row.

Third, in the horizontal menu there is slightly less space between the current link and the one to its right.

The last two problems are on every page. Thanks in advance for any help. Btw, I've probably made a hash of the css already in trying different things to fix this.

WebJoel
03-04-2006, 06:41 PM
Hey, -nice-looking page! I like it, -esp. the background.

brb

WebJoel
03-04-2006, 07:02 PM
For starters, you have the 7 images in a <li> with nothing to govern them.
try adding

<style>
li img {margin:10px}
</style>
to your Styles.
Img #7 (that centered one hugging the two right above it) is actually correctly spaced, -if it were to the left with a companion to it's right. In img #8's absence, it 'centers', thus giving the appearance of being 'too close' to the two above it.
The above style corrects this.

Also, I might change the Content style to this:

#Content {
margin:25px 100px;
padding:160px 45px 20px 20px; (etc)

( note: padding-right is now 45px )

This puts more 'space' to the right, centering the images a bit better. Of course it puts more space to the right of everything, so you're facing tweakage on all other things as well (<p>'s etc).
I wonder though, since you're using a <li> for EACH image and there are TWO images per 'row' in that middle part, if you'd not be better off just putting TWO images in each <li>, thus not having the images 'break down' when the browser is re-sized smaller, and smaller markup still... (img #7 would be in a li all by itself, and therefore be 'centered' as it is currently)
That way, you could add a 'white-space:nowrap' to the <li img> styles and keep the page from going radically-vertical when sized very narrow (under about 450px).

I also noticed that several pages' content section is different widths...

HOME / PORTABLE / PAST JOBS are one width, while
IN SHOP / CONTACT US are another width. (easily corrected).

I probably did not answer any of your questions, though... :o
-Joel

pcthug
03-04-2006, 07:52 PM
Box Model (http://www.w3.org/TR/REC-CSS2/box.html)

wamboid
03-04-2006, 09:57 PM
Thanks Joel. Problem #2 corrected. Just adding the li img style fixed it. I've left them at 1 image per li so that on a larger screen more would go across. The sections below that with only 1 li in the ul bother me a bit, but eventually he will add more pictures. I'm not sure what you meant about the different pages being different widths. What browser and resolution are you using?
Hey, -nice-looking page! I like it, -esp. the background.
Thanks, it was thrown together really fast. Scanning pics for the guy took longer than putting it together.

As far as the box model, like I said, it looks correct in FF, which usually follows the rules. Anything in particular I should look at?

wamboid
03-06-2006, 07:00 AM
Still having the slight problem with the menu and the padding on the bottom. Again, it looks correct in FF, but not IE. It's not that big of a problem, and the client probably doesn't even notice or care, but it annoys me. I'm off to my real job now, so I may not get back to anyone very quickly. If I don't get it working the way I want today, I'll just close my eyes and call it done!