Looks good in Safari, Ugly in IE

nebagakid

So, i am fooling around with doing XHTML/CSS sites and i have this site (open from 8AM-11PM daily (i need to sleep sometime)



it looks grand in Safari, but absouletly horrible. I mean, I am using these standards to make the site...



I think it is something in my class="sidebar" that is messing everything up (in the CSS, the XHTML just has the content, none of the design...)

cubedude

Yeah, I get the same problem with my site design(which I have just redesigned for the third time in the past month, I have no life outside of the computer). I think the problem is sometimes negative pixel settings.



For example:



.titlebar {

margin: -30px 0px 0px 10px;

}



http://homepage.mac.com/ryantann/



And the real problem is most of the people who go to my site(the other people in my band) use IE6.

nebagakid

thanks, will try tommorow



(nice use of CSS)

ghost_user_name

I've been working on converting some very table-heavy designs into pure XHTML/CSS with no tables at all. I tell you -- compatibility with Internet Explorer, ESPECIALLY 5.x is a BITCH.







Unfortunately, this guy wants this site to still be readable and have the same layout in as old as IE 5.5/5.0 on Windows. Jerk. The biggest problem with older versions of IE is that the box model is way out of whack. It sets bizarre padding/margin widths and ignores a lot of floating elements.



I have found a couple of links here to be of great help.



http://glish.com/css/ - see the CSS Hacks Explanation link on the right

http://css.nu/pointers/bugs-ie.html

http://www.richinstyle.com/bugs/ie5.html



Unfortunately, Internet Explorer 6 still isn't exactly up to snuff, either. The only "real" problem I've encountered in writing CSS for IE6 is that the dotted border type is rendered as dashed. Bleh. I can live with that, I guess.

nebagakid

i improved it

it looks good on IE and Safari for Mac



on Windows, the top right picture area is below the top left picture area, instead of side by side..... there is no REAL way for me to test it unless I go back to school each time I make a change...BLECH!

pais

Quote:

Originally posted by Brad

... I have found a couple of links here to be of great help.



http://glish.com/css/ - see the CSS Hacks Explanation link on the right

http://css.nu/pointers/bugs-ie.html

http://www.richinstyle.com/bugs/ie5.html



Unfortunately, Internet Explorer 6 still isn't exactly up to snuff, either. The only "real" problem I've encountered in writing CSS for IE6 is that the dotted border type is rendered as dashed. Bleh. I can live with that, I guess.

Personally, Brad, I'd strongly recommend others to write compliant HTML and CSS without the use of any hacks. While they seem to solve your problems now, most of them really just defeat web interoperability by exploiting obscure bugs in different web browsers. You can accomplish similar things without such fragile hacks.



Internet Explorer 6 also behaves appreciably better when you add a proper DOCTYPE declaration to the top of your document -- otherwise, it behaves almost exactly like IE5 (which is, as you pointed out, completely WRONG).



It's too bad this browser mess doesn't look like it'll shape up any time soon.

nebagakid

well, I got everything finished , now I just need content

placebo

Quote:

Originally posted by CubeDude

Yeah, I get the same problem with my site design(which I have just redesigned for the third time in the past month, I have no life outside of the computer). I think the problem is sometimes negative pixel settings.



For example:



.titlebar {

margin: -30px 0px 0px 10px;

}



http://homepage.mac.com/ryantann/



And the real problem is most of the people who go to my site(the other people in my band) use IE6.

Wow...that really is teh sux0r on IE...but then again, IE is teh sux0r.



BTW, there's a page I'm working on that works fine in IE, but not in Safari. Dreamweaver says that is has an "undefined scruipt attribute" that only kills Safari/Mozilla. Anyone know?