Help with browser quirks

Cat

Cat

Registered
Today I updated my homepage and while checking I noticed weirdness with some browsers.

While displaying correctly in Safari, Camino, Omniweb and Mozilla, Opera gave some minor quirks and Mac IE completely misrendered the text ...

My site validates correctly at the W3C for both XHTML and CSS and I can't understand what's wrong with IE ... I have yet to test in under Windows and Linux, but this bodes ill ...

Does anyone have suggestions what I could do to improve the rendering on IE?

The problem is that for some reason IE moves text to the right, as if it were indented or something ... :confused:

Incidentally I also welcome opinions about the general "design" ... :D
It's an ongoing project, and this is just an intermediate stage, but since I do not have too much time on my hands just now it will probably stay like this for a month or more, so I'd like some feedback on aesthetics and coding ...

Stupid IE :mad:
 
ie6pc : the sidebar won't display correctly. It appears bottom of the page and not beside your content div.

You need a float: left here. Also, regroup your paddings. Eg: padding: 25px 0 20px 0. Saving space and editing time.
 
Thanks Toast! I think I've got the same problem with IE5pc ... could it imply be due to something trivial as the order of the code? The sidebar is declared as last ... but it doesn't seem to matter for any other browser and IE even displays the sidebar correctly on the Mac ... *sigh* :(
 
Hmm, I see what you mean with IE, it indents your content way too much and spills it over the edge of the div.

I examined your code, and you seem to be referencing ID's that don't exist. You have a separate ID on each of your div's, but I can't find any place you've actually defined them. banner.css is simply to control the navigation, of course, but main.css is devoid of much that you need for your site's design.

I think you should move the navigation a bit more toward the edge of the window and take out the fixed width.
 
I reference those id's for internal navigation in the banner-like fixed menu. I experimented a bit with them to see how each browser would react: when I put them at the headings, they jump completely up to the edge of the screen, which I thought was ugly, so I put them on the div, which gives a little space above.
The class assigned to the div is main, which is defined in main.css.

The site is a bit "empty" and "white" still, because it serves as a starting point, I'll be adding fancy stuff later on, but first I wanted to get the basics right.

What exactly are you missing in my main.css arden?

Apropos winIE quirks, I checked the site where I got the idea from with winIE 5 and lo and behold, it misrenders, despite and notwithstanding "workarounds".

IE is the single and only browser to cause problems. :mad: stupid IE. Now I've got to do browser detection and dynamic style-sheet swapping ...
 
Well, IE before 5.5 has some problems correctly rendering CSS (so does Netscape before 6.0). You could be hitting one of those bugs.

Ones that jump out at me: first-child, and the positioning attributes...which is probably the problem there. They're kinda quirky on anything before Mac IE 5.1 or PC IE 5.5 or before Netscape 6.0 (or Mozilla 1.0).
 
I updated my CSSes today, but apparently the workarounds don't workaround ... *sigh* ... both mac and win IE are screwing up big time ... on a more positive note I've been tinkering with a styleswitcher script and the next step is to plug a browser detection into it.

This will take me some time so tomorrow I think I'll put up a nice notice about IE and standards.
 
Update: I found something that should work! Local testing seemed to work, I'll be putting up the changes ASAP (today or monday). This is the code I put in all the heads:
Code: 
<script language="JavaScript"> 
<!-- 
if ((navigator.appVersion.indexOf("Mac") != -1)) { 
document.write("<LINK REL=stylesheet HREF=\"banner.css\" TYPE=\"text/css\">"); } 
else if ((navigator.appName == "Microsoft Internet Explorer")) { 
document.write("<LINK REL=stylesheet HREF=\"winie.css\" TYPE=\"text/css\">"); } 
else { 
document.write("<LINK REL=stylesheet HREF=\"banner.css\" TYPE=\"text/css\">"); }
// --> 
</script>
In the winie CSS I simply substituted "fixed" with "absolute". I found out what the problem with MacIE was: it recursively applied the "position: relative; left: 150px;" to each new element in the div. I threw that one out and made the left-margin: 150px. AFAICT it works out the same on all browsers. I'll be doing some more testing, but this should fix my problems.
Thank you all for your time! I always appreciate feedback. Now that the technical issues hopefully are settled, I can concentrate on the design.

Toast: I like your site a lot! Very very nice.

Incidentally: does anyone know of a way to put LaTeX text online, short of images? There is MathML, I haven't tried it, because I understood it only applied to equations, while I'll be wanting to do text... I must test images: it's just B/W so shouldn't become too big ...

Edit: It's up and running. Everything should work now.
 
You must log in or register to reply here.
Back
Top