No replies
jotrys
Offline
newbie
Last seen: 14 years 23 weeks ago
Timezone: GMT+2
Joined: 2008-04-18
Posts: 5
Points: 0

Hello there, from this newbie.

In the process of making my menu, I am getting a difference in the display of
a background image between FireFox and IE7.
In FireFox 2 it displayes allright, but in IE7 the gif is displayed
off center toward the bottom (due to the line-height).

See:
http://webleer.nl/css/case01/index.html

What I want to accomplish is:
a) display the in-line text "advice" (from an anchor) in the bottom left corner of the container. (specifically at 5px from the left of the container and 15 px from the bottom of the container.)
b) display the bulls eye centered on the right of the container

This is what I am currently using to position within the container:
To change the height of the text, I am using the line-height.
To change the horizontal positioning of the text I am using the span.

How can I accomplish what I want to do?

cheers,
jotrys

HTML index.html:

css-discuss v0.1




CSS style.css:

/* css-discuss version 0.1 */

* { padding: 0; margin: 0; }

body{
font-family: "Lucida Sans", Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.7;
}

a {
text-decoration: none;
font-weight: bold;
}

.nav a {
display:block;
float:left;
height: 54px;
width: 239px;
font-size: 12px;
font-weight: bold;
margin-left:20px;
margin-top: 20px;
text-align:left;
line-height: 80px;
overflow:hidden;
background-image: url(active_trans.gif);
background-repeat: no-repeat;
background-position: right center;
color: #FFFFFF;
background-color: #66CCFF;
}

.nav a span {
margin-left: 5px;
}