2 replies [Last post]
joism
Offline
newbie
Last seen: 17 years 47 weeks ago
Joined: 2004-08-11
Posts: 2
Points: 0

Greetings friends,

I am excited to have found this board!

Please take a look at this URL: http://demo.wjse.com/ivyleague/

This is a page I'm working on which uses images on the left side as the navigation. The way its set up is simply images with break tags separating them. Each state of the link changes the borders around the image to simulate beveling on the mouseover. If you view the source you'll see exactly how it works.

Here's the problem - its looks perfect in IE 6, but the Mozilla family browsers are adding a small space below each image.

This is odd as its usually IE that does this sort of thing.

Can someone please take a peek and maybe point out the stupid thing I'm missing?

Thank you all,

Joism

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 39 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

A simple quick question - please take a look

get rid of this <?xml version="1.0" encoding="iso-8859-1"?>
get rid of the <br /> tags after your images
add this
display:block;
to #frontPageLeftBox a:link

joism
Offline
newbie
Last seen: 17 years 47 weeks ago
Joined: 2004-08-11
Posts: 2
Points: 0

A simple quick question - please take a look

excellent, your suggestions worked, but only after the addition of adding the margin and padding declarations for all four edges of each boxz object.

I had mistakenly assumed that using this declaration:

margin: 0px;
padding: 0px;

would override the margin and padding defaults of both browsers. Clearly this is not the case.

At any rate, the lesson learned is:

1. using display:block removes the need for <br /> tags.
2. If you declare one property's style, declare them all!

Thanks you all!