Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

newbie Question Mac text color'/background image size 1

Status
Not open for further replies.
smeyer56

smeyer56

IS-IT--Management
Oct 16, 2002
206
US
I have a page that I want to use as a template for my personal site and I am trying to use CSS for everything.
My page looks fine in IE6 but looking at it in Mac IE5 my <a>'s backgrounds don't show up as the right size and the text does not appear at all. In safari and netscape I get the same button issue, but the text shows.

------------------------------------------------------------
<div id="navBar">
<div class="navButton"><span><a href="#"><br/>Professional</a></span></div>
<div class="navButton"><span><a href="#"><br/>Personal</a></span></div>
<div class="navButton"><span><a href="#"><br/>Links</a></span></div>
</div>

------------------------------------------------------------
#navBar a {
text-decoration: none;
color: #999999;
background-image: url(../images/button.gif);
background-repeat: no-repeat;
height: 50px;
width: 150px;
text-align: center;
background-position: left top;
}
#navBar a:hover {
text-decoration: none;
color: #999999;
background-repeat: no-repeat;
height: 50px;
width: 150px;
text-align: center;
background-image: none;
}
------------------------------------------------------------
Any ideas?
 
Sort by date Sort by votes
Just to confirm... those <br /> tags... you do have a space between the br and the / don't you?

Jeff
 
Upvote 0 Downvote
I didn't on those for some reason. But it didn't correct the problem when I changed it.
I wonder how it validated like that?
 
Upvote 0 Downvote
Just to let you know... I got perfect functionality on my IE 5.17 MacOS 9 setup. I didn't add any doctype to my document, and just had the snippets you posted (with the supporting <html> and <body> tags etc).

I did change the background-image to use "button.jpg" rather than a relative reference to a gif (I don't imagine any problem with that though).

I'm stumped... I can't see any place it would specifically break on a Mac (but not on a PC). Anyone else?

Jeff

 
Upvote 0 Downvote

You cannot change the width and height of an A tag properly in all browsers - most oikely because it is an inline element, not a block element.

Try adding "display:block" to both your CSS for both A and A:hover.

Hope this helps,
Dan
 
Upvote 0 Downvote
Thansk BillyRay, that worked great.
All the sudden the text appears on the Mac and the images are perfect.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
802
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
286
jjgupta915
jjgupta915
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
219
jason.lex
jason.lex
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
155
jason.lex
jason.lex

Part and Inventory Search

Sponsor

Back
Top