[bojangles]

Hey, all. For the first time ever, I�ve managed to design a site that�s 100% XHTML 1.1� and CSS-compatible. Frankly, the design is pretty simple, but I kinda like it that way. Unfortunately, IE doesn�t agree with me. In a rare burst of logic from the Redmond-based company, IE5.x for Mac OS and IE5+ for Windows display the page exactly the same�but horribly wrong.

Screenshots:
Safari 1.1:


Internet Explorer 5.2.3 (Mac)


As you can see, the content <div> is severely slimmed down in the IE rendering. (The text is there, but it�s so far down the page that the screenshot completely misses it.) Furthermore, the navigation links�each in their own <div>�have all been pushed off the left side of the page.

The weirdest part is that if I remove the DOCTYPE declaration from the page, the content <div> suddenly stretches appropriately! (I know IE can work with XHTML 1.1 pages; I�ve seen it happen.)

Any ideas?

[Synotic]

The xml prolog at the top of your page puts IE 6 and others into convulsive fits. If I were you, I'd switch back to XHTML 1.0 and stick with a charset of ISO-8859-1 over UTF-8. Although it may not be as recent or even XML compliant it will save you a lot of headaches in the end.

[Scifience]

Originally posted by Synotic:
even XML compliant it will save you a lot of headaches in the end.

Isn't Microsoft the company that just released a whole Office suite based on the same XML language that their browser doesn't even support properly? Thought so.

[Millennium]

Are you using Eric Meyer's technique to do this?

[bojangles]

Originally posted by Millennium:
Are you using Eric Meyer's technique to do this?

Actually, I�d never heard of Eric Meyer before just now, but yes, we are using nearly identical techniques. I actually found it at Big Baer; maybe they got it from Meyer?

Regardless, once I added the XHTML 1.1 declaration, the images didn�t stack properly in Safari or Netscape, but showed up perfectly in�of all things�Internet Explorer! I finally elected to make the image a non-repeating background and superimpose a bunch of empty <div>s. The nice thing about that is that it also decreased the download time significantly: one optimized JPEG is a lot smaller than 20 or 30 little ones!

[bojangles]

Originally posted by Synotic:
The xml prolog at the top of your page puts IE 6 and others into convulsive fits. If I were you, I'd switch back to XHTML 1.0 and stick with a charset of ISO-8859-1 over UTF-8. Although it may not be as recent or even XML compliant it will save you a lot of headaches in the end.

Sounds great. Unfortunately, I just tried that and now IE doesn�t care what the DOCTYPE is. Even as HTML 4.0, it shows up exactly the same.

Can anybody find something wrong with my code?

www.jeffanna.com

[bojangles]

Well, one of the beautiful things about web design is if you work long and hard enough on a problem, you tend to fix it yourself. It turns out the issue was actually CSS-related: IE wasn�t liking the margins on a particular <div>, for some strange reason.

Now for the next step: my page is now stretching quite effectively, but in IE, it�s a little too effective. The main <div> has an extra 20px of padding on the right (besides the 20px margin it should have). What�s even more annoying is that both 20px strips are off the edge of the screen, so that regardless of the window size, there�s always a horizontal scrollbar for those 40 extra pixels!

I�ll keep working on it, but if anybody has any more suggestions, I�d love to hear from you!

[clam2000]

If you have not done so already you probably ought to take a look at this.

here is apple's resource for the same problems.

--will

[philzilla]

i'm gonna throw this in...

[york28]

I hate to have bad news, but your site doesn't render at all in Firebird 0.7, and the words don't wrap around the image in IE 6 for Windows.

As was already mentioned, get rid of the xml prolog and replace it with :
[meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /] in the head section (or something similar).

And phil is corrent, you need to use the box model hack to fix your size problems. But you can't do this with an xml prolog because IE 6 will pass the box model hack test but fail back to the old, flawed box model when it sees the xml prolog.

[bojangles]

clam2000� Yes, I�d seen both of those, in fact. Unfortunately, Apple�s solution didn�t seem to do anything. I finally wound up using the commented backslash hack and giving IE5Mac a declaration of #master { right:40px; margin-right:20px; }. Don�t know why a combined right of 60px seems to do the trick, but as long as it still validates and it doesn�t break the other browsers, I�m not too concerned.

philzilla� Seen that too. I�ll have to implement that one once I have easy access to IE Win (to test the results).

york28�Yeah, I�d noticed that the words don�t wrap in IE5 Mac, either. Does anybody have any thoughts about this?
As for only the background showing up in Mozilla/Chimera/Firebird, I�m really confused by that. I love supporting �alternative� browsers, but it�s always been my experience (until now, obviously) that using standards-compliant code will take care of that automatically. Frankly, I�m rather confused why this would be a problem in the first place�. Doesn�t Netscape 7.1 use the same rendering engine as its Mozilla counterparts? It was showing up fine in Netscape until I installed Mozilla, and now it doesn�t show up in either! (Furthermore, the Netscape GUI�which I actually rather like, these days�has been completely overtaken by the Mozilla GUI!)

And finally, to no one in particular: I discovered that one major issue is that IE5 Mac doesn�t necessarily reload a page from the server unless you quit and relaunch the app. I was pulling my hair out for days because I thought that nothing I was doing was having any effect; turns out it�s just Explorer acting up (as usual)!


Update: I had a declaration of { overflow:auto; } in the body css. As soon as took that out, the page started showing up in Mozilla, et al.
Of course, now Explorer insists on giving me about 6,500 extra pixels on the bottom�.

[york28]

In that case, just put that rule in a box model hack, and you'll be all set.

[bojangles]

Originally posted by york28:
In that case, just put that rule in a box model hack, and you'll be all set.

I suppose I should have been more specific. IE5 Mac gives me an extra 6,500 (or so) pixels at the bottom of the page; I�ve placed the padding declaration in a commented backslash hack, but it doesn�t seem to do any good. Maybe if I knew what the offending command was�?

IE5.5 Win has two issues: first of all, the empty <div>s (designed to make the text wrap around the background image) actually show up below the background. Secondly, the padding is completely screwed up: the text just keeps on going to the end of the <div> (as if the <div> didn�t end at all; the last character in each line is cut off by the right side of the <div>), but any words that make it past the beginning of the padding are also on the next line!

I really want to be compliant, but this is getting really old�.

Update:
Well, I finally figured out that my empty <div>s were giving Win IE5.5 fits. I deleted the style="width:[#]px; height:[#]px;" attributes on each of the <div>s, then placed sized spacer images in each. The wrap now works in everything I�ve checked (except Netscape 4, which I�ve given up as a lost cause�at least for now). The words are still cut off down the right side of the <div>, but at least now we�re down to one issue per IE!

[Synotic]

Sorry for not addressing any particular problem but I'd just like to give a few comments and suggestions.

First of all you mention using "standards-compliant" code as something that should magically make your page work in all browsers. There are many definitions for what standards-compliant means but I suppose in this particular case it means not using tables and using css... Which is commendable of course but is only one aspect of standards compliant design.

The real point of it though is, for your viewers, to make it accessible, and for you, to make the design flexible. Currently it doesn't really achieve either of these goals. A site coded with HTML 4 can still be more accessible than an XHTML one. Just some things I've noticed... JavaScript rollovers... using tons of embedded images, break returns etc... and other presentational code which isn't really beneficial both for loading times and accessibility. Changing something like:

Code:
<a href="/publications/"
		onmouseover="changeImages('publications', '/images/navbar/publications-over.jpg'); return true;"
		onmouseout="changeImages('publications', '/images/navbar/publications.jpg'); return true;">
		<img id="publications" src="/images/navbar/publications.jpg" width="119" height="37" alt="publications" /></a>

to

Code:
<ul><a href="/publications/" id="publications"><span>Publications</span></a>

is both a lot smaller and a lot more accessible.

Another thing is your navleft, navmiddle, gray, navright images. That kind of thing is really more akin to table design and those images would work better as background images.

As for your problems with the sandbag divs... I don't really think it was a wise decision to putting images in the divs, again that's more of a former web-design practice. Have you tried examining bigbaer's code? Compared it to your own? Does his code work in the browsers you're having trouble in? Something I often do is copy the site's code directly and slowly update the code to be more and more like my own, once it breaks I can know exactly what caused my problem. Also... I think you're using quite a bit more divs than you need. You have at least 15 divs around the head... In my opinion you only need one (or three at the most). In most browsers the text can't even be rendered small enough for anyone to notice and right now it makes the text look out of place.

Doing things like replacing the current navigation with an unordered list... axing the entire series of navleft, navmiddle etc.. boxes (by incorporating them as various background images), and eliminating one of your nested divs would fix a good deal of your bugs.

Now for some of the other things... Just looking at your CSS code you can almost tell for certain the layout is going to break. Putting random padding, then eliminating it for other browsers... absolutely positioning everything... seemingly out of frustration. It seems like you have an aspect of your design and suddenly it's 20px wrong in IE... so you push the layout over 20px in IE... Your logo is under the background.. give it a z-index of 300.

I think a better thing would be to delete a lot of the hacks and start clean. Remove the navigation and logo and whatnot... Just have something like...

body { margin: 20px }

#content { background: gray; padding: 20px }

In your code... check in all browsers you want it to work with... Add backgrounds, navigation... testing in between. By doing this you'll keep your a site a whole lot cleaner, better understand exactly how it works (very important) and most of all you'll ensure that it works in the browsers you want free of hacks.

I'd also like to mention when I say hacks, I mean more of, workarounds. Like pushing something into place, or forcing something on top etc... Things like the box model hack are inevitable but they're a lot cleaner than resorting to workarounds.

Anyways, back to my original point Using XHTML and CSS aren't necessarily guarantees that you're site will be perfect in all browsers... The code itself is a large aspect of how your design will work in other browsers. Once you have that you'll be a lot less surprised of why something happens in other browsers... because generally it should work. Of course you have to account for browser bugs, but as you further understand your code you'll find that they come up less and less.

Oh and as for the the xml prolog, utf 8 declaration and doctype... You would really eliminate a lot of "weird browser bugs" if you didn't use (some) of them. WIth the xml prolog, the thing at the top of the document, this puts IE 6 into quirks mode which, among other problems, destroys the box model, rendering the hack useless. It also makes your choosing of a doctype pointless.

Using XHTML 1.1 over XHTML 1.0 provides essentially zero benefit to you as a developer. The main difference is that the different parts XHTML 1.1 have been made into different modules. I believe, but am not certain, that this allows you to use your own doctype while using XHTML 1.1 as a backbone... but for most people this is pointless.

UTF-8... I'll let someone more knowledgeable argue that, it may be fine, but don't older versions of windows not support UTF?

OK, I guess I ended up addressing most of your problems anyways HTH

[bojangles]

Synotic�
Much as I hate to admit it, your post has a lot of merit. However, I would like to respond to a few things:

There are many definitions for what standards-compliant means but I suppose in this particular case it means not using tables and using css... Which is commendable of course but is only one aspect of standards compliant design. The real point of it though is, for your viewers, to make it accessible, and for you, to make the design flexible.

I would never claim that using CSS instead of tables automatically makes a site standards-compliant; it is, as you said, just one of many aspects. You have a very valid point about the rollovers�I�ve been considering dropping them almost from the beginning, for the same reasons you cited�but if I understand it correctly, the point of CSS is basically to separate style from content, to allow a page to degrade gracefully on handhelds, screen readers, etc.

You mention using "standards-compliant" code as something that should magically make your page work in all browsers.

Well, yeah, essentially. The key word here is �should�: I realize that getting code to validate doesn�t necessarily make the code correct, but unless I�m missing something (it wouldn�t be the first time), then yes, if the code is standards-compliant, it should work in all browsers. (Of course, people should get along with each other; everyone should have sufficient food and shelter; there�s a lot of things that should happen in this world, and every browser being 100% standards-compliant is, unfortunately, rather low on a very long list.)

Another thing is your navleft, navmiddle, gray, navright images. That kind of thing is really more akin to table design and those images would work better as background images.

Agreed, but the point is to have the curve stretch across the top of the content. You�re correct that�s it�s akin to table design, but can you think of any other way to make it stretch without affecting the slope of the curve?

Have you tried examining bigbaer's code? Compared it to your own? Does his code work in the browsers you're having trouble in?

Yes, yes, and yes. That�s what makes all this so frustrating.

I think you're using quite a bit more divs than you need. You have at least 15 divs around the head... In my opinion you only need one (or three at the most). In most browsers the text can't even be rendered small enough for anyone to notice and right now it makes the text look out of place.

Not sure what you�re talking about there. 15 <div>s? What text can�t be rendered small enough, and small enough for what? Sorry, just not sure what you�re talking about here.

I think a better thing would be to delete a lot of the hacks and start clean.

Sadly, you�re probably 100% correct.

Seriously, though, I really do appreciate your constructive criticism; it�s given me a lot to think about. I tend to get a site up and running and then decide I don�t like the way it looks, anyway. (Perfect example: SSFire.com. I don�t know how many times I�ve changed that one, although only a few iterations have actually gone live. On that note, that�s a site where I did, in your words, �copy [another] site�s code directly and slowly update the code to be more and more like my own�; I still have trouble with unnecessary scrollbars popping up in IE5 Mac. Any thoughts there?)

Anyway, if anyone has anything else to add, please do so. For now, I�m probably going to at least trash the CSS and start over.
Thanks!

[Synotic]

Originally posted by bojangles:
Synotic�
Much as I hate to admit it, your post has a lot of merit. However, I would like to respond to a few things:

OK, at least I'm glad you know where I'm coming from

I would never claim that using CSS instead of tables automatically makes a site standards-compliant; it is, as you said, just one of many aspects. You have a very valid point about the rollovers�I�ve been considering dropping them almost from the beginning, for the same reasons you cited�but if I understand it correctly, the point of CSS is basically to separate style from content, to allow a page to degrade gracefully on handhelds, screen readers, etc.

That's of course the accessible aspect of it, allowing it to work on other devices. The fact that separating style from content makes the site a lot more flexible for you is an extra.

Well, yeah, essentially. The key word here is �should�: I realize that getting code to validate doesn�t necessarily make the code correct, but unless I�m missing something (it wouldn�t be the first time), then yes, if the code is standards-compliant, it should work in all browsers. (Of course, people should get along with each other; everyone should have sufficient food and shelter; there�s a lot of things that should happen in this world, and every browser being 100% standards-compliant is, unfortunately, rather low on a very long list.)

Well it is similar to other forms of development. The only difference is that with the web, you aren't required to make sure your code at least validates. But with traditional coding, even validated code has problems on different systems. Functions called rely on frameworks being installed on the computer... or a certain version of the framework that works a predictable way. Similar to how you're relying on how one browser interprets a certain piece of code. You'll always have to deal with variables. One common example being the user's text size. I always try and make sure any sites I design adapt to the user's text size... but if you go to many sites (especially css-based) you'll see that they'll either break or look rather unpleasant when you do something as simple as increase the font a few sizes. So point being, while validated code is definitely a must there will always be variables that you have to account for... but it isn't that bad... really

Agreed, but the point is to have the curve stretch across the top of the content. You�re correct that�s it�s akin to table design, but can you think of any other way to make it stretch without affecting the slope of the curve?

Well here you have to think outside of the box... literally. If I were doing it this is how I would split it up...

For the right curve, use it as a background for the navigation box (and hopefully later <ul>).

For the top of the box which includes the gradient sans curve save that as a background for the content div. Pin it to the top of the div and have it repeat on the horizontal axis... Then define the remaining gray. (you can apply a background image and background color to one element).

For the left curve, incorporate it as part of the logo...

Now you just have the minimum amount of blocks... logo, content and nav.

Yes, yes, and yes. That�s what makes all this so frustrating.

Saving bigbaer's example locally and trying it works initially right? Just try slowing putting in your images, changing sizes... until it breaks... once it breaks you know what the problem is. If it isn't immediately apparent just post it here, or in a new thread, and I'm sure we can find what the problem is.

Not sure what you�re talking about there. 15 <div>s? What text can�t be rendered small enough, and small enough for what? Sorry, just not sure what you�re talking about here.

This is what I'm referring to:



Things like the head are overly small. At the hand why are there 4 divs that are all the same width? The server as it is is a bit slow and loading all those extra images takes some time even on broadband.

Sadly, you�re probably 100% correct.

Seriously, though, I really do appreciate your constructive criticism; it�s given me a lot to think about. I tend to get a site up and running and then decide I don�t like the way it looks, anyway. (Perfect example: SSFire.com. I don�t know how many times I�ve changed that one, although only a few iterations have actually gone live. On that note, that�s a site where I did, in your words, �copy [another] site�s code directly and slowly update the code to be more and more like my own�; I still have trouble with unnecessary scrollbars popping up in IE5 Mac. Any thoughts there?)

I'm glad that my suggestions are at least thought provoking. In regards to the scrollbars... they show up in Safari too. This might be attributed to margins on the columns pushing past the window's boundaries?

Anyway, if anyone has anything else to add, please do so. For now, I�m probably going to at least trash the CSS and start over.
Thanks!

Sounds good... try to challenge yourself and only add simple properties... stay away from absolute positioning, explore floats. If you're making the navigation div/ul and there are 4 buttons across, calculate the width of the combined buttons and make that the width of the div... That way it makes a lot more sense as opposed to everything falling into place.

Good luck!