CSS link style problems in safari

I want to create links with backgrounds that change colour when they are rolled over - similar to the ones on the macromedia homepage (shortcuts etc).

I have created links which work like this using css a:link/a:hover etc. These links work exactly as I want them to in IE 5.2 on my mac.

However when I preview in Safari V1.1 the property relating to box width and height is ignored. This means that instead of my link boxes being consistent widths (say 200 pix) the backgrounds and borders only appear directly behind the type itself.

What makes this extra confusing is that I know you CAN get this to work in safari as proved by the mm homepage which works perfectly in the same copy of Safari!

Anyone familiar with this problem? Know how to get it working?

Another little thing, I have been using type/lineheight to vertically centre my link type in a fixed height box.
Is this the right way to do it? I thought that block/vertical alignment/middle might do the trick but it doesn't seem to work. Lineheight does the trick in IE but again Safari seems to ignore this and type stays up a the top of the box.

Your help advice would be appreciated...thanks.

It would help if you showed us the CSS and HTML you are using. Can you show
that to us?

As for the centering vertically thing, there really isn't a style attribute
to do that. Line height is just that...line height. My guess is Safari is
rendering that correctly, as the first line should change, only subsequent
lines.

-Darrel

Heh... macromedia has some very advanced CSS techniques.

I shortend the URLs, but here is the topmost table which is used to display those items:

<ul id="globalnav-help-menu">
<li id="help" class="last"><a href="/go/gnav_help" tabindex="4">Help</a></li>
<li id="international"><a href="/go/gnav_intl" tabindex="3">International</a></li>
<li id="cart"><a href="/go/gnav_cart" tabindex="2">Cart</a> <span id="cart-items">0</span></li>
<!-- membership -->
<li id="sign-out" class="first"><a href="/go/gnav_sign_out" tabindex="2">Sign Out</a></li>
<li id="sign-in" class="first"><a href="/cfusion/membership/index.cfm" tabindex="2">Sign In</a></li>
<li id="account" class="first"><a href="/go/gnav_your_account" tabindex="2">Your Account</a></li>
<li id="greeting" class="first">Welcome, <span id="screen-name">Guest</span></li>
</ul>

And I was shocked to discover that it is actually a bulleted list with the bullets taken away and the list items are somehow horizontal. I don't quite understand how they did this one myself. But it is some serious coding indeed.

/* ********* help menu ********* */
#globalnav-help-menu {
position: absolute;
top: 0; right: 0;
list-style: none;
color: #fff;
padding: 0;
border: 0;
margin: 11px 8px 0 0;/* \*/
margin: 11px 0 0 0; /* */
width: 478px;
height: 32px;
}
#globalnav-help-menu li {
display: block;
float: right;
padding: 0;
border-left: 1px solid #8e9ba2;
margin: 0;
height: 14px;
}
#globalnav-help-menu li.first {
border-left: 0;
}
#globalnav-help-menu li a {
padding: 2px 9px 2px 8px;
margin: 0;
height: 14px;
}
#globalnav-help-menu a,
#globalnav-help-menu a:link,
#globalnav-help-menu a:visited {
color: #fff;
text-decoration: none;
}
#globalnav-help-menu a:visited:hover,
#globalnav-help-menu a:hover {
background-color: #8e9ba2;
color: #fff;
text-decoration: none;
}
/* **** help menu :: memebership **** */
#globalnav-help-menu li#sign-in,
#globalnav-help-menu li#sign-out,
#globalnav-help-menu li#greeting,
#globalnav-help-menu li#cart {
display: none;
}
#globalnav-help-menu li#greeting {
padding: 0 9px 0 8px !important;
padding: 2px 9px 0 8px;
}

/* ********* globalnav menu ********* */
ul#globalnav-menu {
position: absolute;
top: 32px; left: 0;
list-style: none;
color: #000;
background-image: url(/images/globalnav/emx_globalnav.gif);
background-position: top left;
background-repeat: no-repeat;
padding: 0 0 0 5px;
border: 0;
margin: 0;
width: 756px !important;
width: 759px;
height: 35px;
}
ul#globalnav-menu li {
display: block;
float: left;
line-height: 31px !important;
line-height: 30px;
padding: 0;
border: 0;
margin: 0;
height: 35px;
}
ul#globalnav-menu li.first {
padding: 0;
border: 0;
margin: 0;
width: 11px;
height: 35px;
}

ul.globalnav-submenu li.first {
border-right: 1px solid #8e9ba2;
}


MiKE.
Looking for freelance work | mike[at]mzanime.com
$i = &quot;fun&quot;; while($i &gt; $possibilities) { $code; $code++; }

Hi Mike

thanks for the info but I don't think I was clear about the links I was talking about on the mm homepage. I didn't mean the top level nav bar and the 2nd level stuff that appears beneath it on rollover. I think (but I'm not completely sure) the code you posted above relates to that. I actually meant the links on the main body of the page - products, solutions, shortcuts etc.

However I did find your reply fascinating as trying to work out how they do that was going to be my next little project! ...now possibly postponed indefinitely having seen what's involved!

thanks

What is the best way to create vertical lines in mx?

Do I need to insert an image or can I some how colour one side of a layer/table etc.

Is there a quick way?

regards,

Ratkin.

Do I need to insert an image or can I some how colour one side of a
layer/table etc.

Please learn how to use a newsgroup reader and stop hijacking other people's
threads and SPAMMING us with this question will ya!?

-Darrel

And I was shocked to discover that it is actually a bulleted list with the
bullets taken away and the list items are somehow horizontal. I don't quite

understand how they did this one myself. But it is some serious coding
indeed.

It's not that difficult:

http://alistapart.com/articles/taminglists/

-Darrel

What is the best way to create vertical lines in mx?

Do I need to insert an image or can I some how colour one side of a layer/table etc.

Is there a quick way?

regards,

Ratkin.

What is the best way to create vertical lines in mx?

SHUTUPSHUTUPSHUTP!

In article <bqo8qc$ck$1 (AT) forums (DOT) macromedia.com> , "richatkin"
webforumsuser (AT) macromedia (DOT) com wrote:

What is the best way to create vertical lines in mx?

Please stop barging into unrelated threads with this question. Someone will
see it where you originally posted it and answer it or not. Jumping into
unrelated threads is rude and may predispose people from helping you.

-- James M. Shook
http://www.jshook.com