Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

My websites look wrong in Mac

M

madmacman

macrumors newbie
Original poster
Dec 21, 2007
7
0
Hi all, I've just got my 1st Mac, last night, and wasn't surprised to see my site looked wrong on text resize. I haven't a clue about hacks or Macs. My homesite is
http://www.zealmonline.co.uk The WC3 said CSS validated and the HTML as 4001 transitional. I'd be so grateful for advice. I don't know where to start.
 
Looks OK in Safari on Mac.

Does not look too good in Firefox in windows.

Part of the job of designing a web site is to ensure it is not messed up in different browsers and OS.
 
Nothing "looks" wrong. Can you elaborate on what's different to you?

As a note, valid code does not mean it accomplishes what you wanted it to, it just means the code is structurally sound. Valid HTML and CSS can still look horrible, but still a good goal to have validation of course.
 
Thanks all for replies. Don't really understand. Should I be using strict doctype? If so, I'll try to find out how it differs from transitional.
 
“my site looked wrong on text resize”

What exactly looks wrong?

It looks fine to me.
 
Ellpa, the nav thingy on the left overlaps instead of wrapping. Hope I've described it properly. BTW When I've looked at other people coding on Macs they seem to have voice-family-inherit stuff and I don't know what it means.
 
madmacman said:
Ellpa, the nav thingy on the left overlaps instead of wrapping. Hope I've described it properly. BTW When I've looked at other people coding on Macs they seem to have voice-family-inherit stuff and I don't know what it means.
Click to expand...

Voice family inherit is hack to target internet explorer.

The better way to handle IE is to use conditional comments.

Code: 
#leftnav ul { list-style-type:none;  margin:0; padding:0;line-height:1px;}

The other browsers you tested on must "handle" text resizing by ignoring the fact the line height is set to 1 pixel.

WebKit (Safari) respects this setting, so when the text in the navigation list wraps to a new line it calculates (because you told it to!) 1px as the height for the previous line (the actual line height is obviously quite a lot taller than 1px) – hence the overlap.

Of course this all makes for perfectly valid CSS, as there is nothing invalid pre se about specifying a line height of one pixel. It is just not very sensible.

By the way, Webkit is one of the a leading browsers for standards support, so if a page doesn't look right in Safari, you've generally done something wrong, not the browser.
 

Attachments

  • Picture 1.png
    Picture 1.png
    51.2 KB · Views: 84
Thank you, elppe (sorry for spelling your name wrongly before). I'll read EM's piece. BTW I have no recollection ever of putting line-height at 1px. Checking it out now.
 
Elppa, can't thank you enough for poring over my code enough to spot what was wrong. Owe you a drink, several drinks. Doesn't overlap now. I've looked in FF, O and IE 7, 6, 5.5 in W, and Safari on Mac. Thank you mega.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back