Welcome to the MacNN Forums.

OptimusG4 · Apr 17, 2003, 10:50 PM

Can someone help me out here? I am working on a portfolio site and doing some simple CSS stuff for links. It looks great in Safar (v73) but not IE 5.2.2. Please help me figure out what I'm doing wrong. Thanks!

http://www.monkeyboycreation.net/

edit: heres some pics for clarification.

Safari:

IE:

Rainy Day · Apr 17, 2003, 11:30 PM

Try eliminating "Transitional" from the DOCTYPE, and correcting these errors (particularly #1):

Code:
1.	Line 14, column 6: required attribute "TYPE" not specified . 
  &lt;style&gt;
        ^

2.	Line 57, column 35: there is no attribute "LEFTMARGIN" . 
  &lt;body bgcolor="#4D2E01" leftmargin="0" topmargin="0" marginwidth="0" marginheigh
                                     ^

3.	Line 57, column 49: there is no attribute "TOPMARGIN" . 
  ...r="#4D2E01" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" sty
                                          ^

4.	Line 57, column 65: there is no attribute "MARGINWIDTH" . 
  ...margin="0" topmargin="0" marginwidth="0" marginheight="0" style="margin:0px..
                                          ^

5.	Line 57, column 82: there is no attribute "MARGINHEIGHT" . 
  ...gin="0" marginwidth="0" marginheight="0" style="margin:0px;"&gt;
                                          ^

6.	Line 63, column 99: required attribute "ALT" not specified . 
  ..." width="175" height="128" border="0"&gt;&lt;/center&gt;&lt;/td&gt;
                                          ^

OptimusG4 · Apr 17, 2003, 11:40 PM

Nothing. Fixed the erros, its HTML validated and CSS validated. Any other options? Thanks though.

Simon Mundy · Apr 17, 2003, 11:45 PM

Originally posted by OptimusG4:
Can someone help me out here? I am working on a portfolio site and doing some simple CSS stuff for links. It looks great in Safar (v73) but not IE 5.2.2. Please help me figure out what I'm doing wrong. Thanks!

http://www.monkeyboycreation.net/

Not really your fault.

It's IE5.2's oh-so-close-but-painfully-not-quite implementation of CSS that has given me cause to howl on more than one occasion.

IE5.2 for mac has a habit of ballsing up CSS where widths are not explicit (i.e. % and inherits). You can see this in action if you create a floating box that has a width of 100% - BAM goes your horizontal scroll bars. It can be worked around with the famous (infamous?) negative margin hack... But I digress...

Suffice to say you'll need to adjust your approach on this one. IE is using the left margin of the surrounding block level element to start rendering the border, rather than correctly using the left margin of your inline element. Sigh. After a bit of tinkering with your code, I've come to the following recommendations:

a) Settle for a solid underline on your text

The CSS2 specs do have a caveat for border rendering for certain elements in HTML rendering agents. Live and learn.

or

b) Rather than using 1/2 measures on CSS, remove all the old HTML 3.2 tags and rely purely on CSS to solve your problem. What potential client is worth having that uses Netscape 4.5 to browse the web for eye candy?

Wrap your link text in a DIV, and give that DIV a width of 200px, give the id/class for that DIV the border attributes and keep the a:hover effects for the text only. Give the left and right margins a value of auto so it centers correctly.

Hope that helps?

OptimusG4 · Apr 17, 2003, 11:53 PM

Its a tough choice. IE 6 for Windows renders properly, as well as Netscape 7, OmniWeb, and Safari. I'll see what I can do. Thanks!