15 replies [Last post]
Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

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!

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 45 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

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 Smile
- </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. Laughing out loud

- r

Anonymous
Anonymous's picture
Guru

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.

Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

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?

Anonymous
Anonymous's picture
Guru

Dropdown menu not right for mac, but ok for windows

Ynksrock510 wrote:
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?
Yep, here ya go:

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. Smile

Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

Dropdown menu not right for mac, but ok for windows

This solution is excellent!

Thank you very much!

Anonymous
Anonymous's picture
Guru

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.

Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

Dropdown menu not right for mac, but ok for windows

Anonymous
Anonymous's picture
Guru

Dropdown menu not right for mac, but ok for windows

Nice work. Smile

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.

Anonymous
Anonymous's picture
Guru

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.

Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

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?

Anonymous
Anonymous's picture
Guru

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. Sad

It's up to you.

There are also better ways to fit text around a curve without hard line breaks.

Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

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?

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 15 years 16 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Dropdown menu not right for mac, but ok for windows

Anonymous
Anonymous's picture
Guru

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:
If i was to scrap what I got, and start again, how would I work a way around it?
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. Smile

I really like the layout it's just that it won't work with text resizing in its present form.

Ynksrock510
Offline
Regular
Last seen: 13 years 42 weeks ago
Joined: 2005-10-19
Posts: 32
Points: 0

Dropdown menu not right for mac, but ok for windows

Thanks!