1 reply [Last post]
raven`
Offline
newbie
Last seen: 15 years 18 weeks ago
Joined: 2004-06-12
Posts: 1
Points: 0

Here's a CSS sample:
.rightblock
{
text-align: left;
}

.rightblock a:hover
{
color: black;
background-color: #42D661;
text-decoration: none;
}
.rightblock a
{
display: block;
width: 200px;
}

There's more styling, but the essential part is just that.
What is it for? It is used for the div that is exactly 200px wide (column with links), and it makes sure that each link occupies its own row, and that the row is highlighted when mouse is hovering over it. That's it, the whole row from the left column border to the right column border.

Everything works normally with Opera, Mozilla and IE 5-6.

What I need to do now is to add indent to the link text, cause at the moment links just stick to the left border and that surely doesn't look good.
I tried adding it using two ways

1) padding.
Problem with padding is that for some ungodly reason, Mozilla considers padding to be outside the body of the element, so, instead of just moving the text in the link row to the right it also expands the element itself to the right, ruining the whole layout look.

2) text-indent.
This seems to be the right thing to do, and in fact adding
text-indent: 15px;
to the .rightblock a definition solves the problem for IE 6, Mozilla and Opera. However, IE 5, in turn, considers the indent to lie outside the boundaries - and so the div gets expanded and the whole column is shifted to the bottom of the page cause it doesn't fit the container block when its width is increased.

How can I solve this problem (well apart form adding spaces before each link Wink )?
Is there some other way I am overlooking?

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 7 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

IE 5 vs IE 6 vs Mozilla problem...

Hi raven,
You could add p tags around the text and give them a margin.

Hope That helps