Wed, 2005-10-19 20:03
Hi all, I designed a dropdown menu in CSS and its not displaying correctly on MAC computers, Windows is fine but when its on a mac, there is not enough space between each sublink on the dropdown menu. Heres the link:
http://ramapocustomcarpentry.com/liquisite/css/index.htm
any help would be much appreciated, thanks!
Wed, 2005-10-19 20:26
#1
Dropdown menu not right for mac, but ok for windows
Welcome.
First of all, I am impressed with the design. It is nice, clean and pleasing to the eye.
Now...the issue...
I assume that you mean it works fine in Win/IE, because I checked it in FF first and it is not fine. I am not accessible to my Mac at the moment, so I don't know which browser you are referring to...is it IE/Mac, Safari, etc.
I am afraid, because you designed for IE and not FF, you have other issues like overlapping when viewed in FF.
Just a couple of things that you will need to take care of before you go any further...
- the page did not validate, due to several errors...validate it first 
- </img> is not a valid tag...you do not need to close an <img> tag
- the <body> is in the wrong spot...it needs to be after </head> and before the <div id="container">
- I am suspecting 'line-height:24px' and no 'padding' could be the issue.
Start with this and then go from there. 
- r
Sat, 2005-10-22 17:30
#2
Dropdown menu not right for mac, but ok for windows
Please don't cross post. I went ahead and deleted the other since you already have an answer on this one and we can continue from here.
I've worked on the problem and fixed the errors in your css. Let me know when you are finished fixing the mistakes that ragamuffin mentioned and I'll go through my updates and list them.
Sat, 2005-10-22 17:54
#3
Dropdown menu not right for mac, but ok for windows
Sorry for the double post.
Ok, it is html validated.
The link is here:
http://ramapocustomcarpentry.com/liquisite/css/indexmac.htm
I fixed all of the validation errors, and the drop down submenu sizes are ok now, but as you can see if you are using FireFox, that the links are too bunched together. Any ideas?
Sat, 2005-10-22 18:28
#4
Dropdown menu not right for mac, but ok for windows
Ynksrock510 wrote:
Yep, here ya go:
I fixed all of the validation errors, and the drop down submenu sizes are ok now, but as you can see if you are using FireFox, that the links are too bunched together. Any ideas?
li {
float: left;
position: relative;
display: block;
}
li ul li{
float: left;
display: block;
width: 111px;
text-indent: 5px;
border-top: 1px solid #aabcd7;
}
Hope this helps.
Sat, 2005-10-22 18:29
#5
Dropdown menu not right for mac, but ok for windows
This solution is excellent!
Thank you very much!
Sat, 2005-10-22 18:40
#6
Dropdown menu not right for mac, but ok for windows
I took you at your word but you still have 18 errors to fix in your markup.
Sat, 2005-10-22 19:25
#7
Dropdown menu not right for mac, but ok for windows
Thats because I forgot to upload it. Sorry
Validated:
Thanks again for the solution.
Sat, 2005-10-22 22:18
#8
Dropdown menu not right for mac, but ok for windows
Nice work.
There is only one error in your css:
li ul {
font: 10px, Verdana, Arial, Helvetica, sans-serif;
display: none;
position: absolute;
float: left;
top: 24px;
left: 6px;
width: 100px;
background: #d8f983;
}
there should be no comma after 10px in your font declaration.
Sat, 2005-10-22 22:21
#9
Dropdown menu not right for mac, but ok for windows
Oops, I totally missed your misuse of position: absolute.
Sorry about that. Here is why it is a bad idea (see attachment).
Increasing the text size breaks the layout. It is an accessibility issue.
Sat, 2005-10-22 22:27
#10
Dropdown menu not right for mac, but ok for windows
So I should take position:absolute out of the code? do i need to replace it with anything?
Sat, 2005-10-22 22:45
#11
Dropdown menu not right for mac, but ok for windows
If you do take it out you are going to have to make your page stretch to fit any text size.
Basically, scrap what you've got and start again. 
It's up to you.
There are also better ways to fit text around a curve without hard line breaks.
Sat, 2005-10-22 23:04
#12
Dropdown menu not right for mac, but ok for windows
If i was to scrap what I got, and start again, how would I work a way around it?
Sat, 2005-10-22 23:22
#13
Dropdown menu not right for mac, but ok for windows
Sun, 2005-10-23 00:40
#14
Dropdown menu not right for mac, but ok for windows
That might help some.Yes, and the original: http://www.meyerweb.com/eric/css/edge/curvelicious/demo.html
Ynksrock510 wrote:
I'm not saying you have to scrap the whole thing, just that it is not ideal and if you want it to look and act professional then a re-write is in order. If i was to scrap what I got, and start again, how would I work a way around it?
I really like the layout it's just that it won't work with text resizing in its present form.
Sun, 2005-10-23 00:53
#15
Dropdown menu not right for mac, but ok for windows
Thanks!