Well I know the easy answer is "because IE 6 is not _quite_ perfect", but what I really want to know is - how can I fix it?
Here's the test page:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/test/about_test2.html">http://www.cultivatedesign.org/test/about_test2.html</a><!-- m -->
You can see the little "go" button at top right is shifted right a couple of pixels, but only in IE 6; it's fine in FF and Safari.
I've set everything I can think is relevant (margins, padding) to "0".
Any ideas?
- BobMy guess is that it's because the button image is contained by an unstyled DIV, and the default margin/padding for IE might be different. Frankly, that whole section seems to be suffering from "divitis". You have a number of places where you do <div><img /></div>, when you could just leave the DIVs out and style the IMG as needed, making your markup a lot cleaner.I've been trying that (fewer divs) and every time I do stuff gets pushed out one way or another when viewed in IE 6. I WANT to use fewer divs, but it just ain't workin'.OK - got rid of every div that seemed reasonable. Now I've got gaps above and below the green bar at top, in addition to the same issue with the "go" button.
Even in Safari I have a gap above the green bar. But in IE it's gaps above AND below. How can this be? Everything has a margin of zero. I tried clear: both. What else is there?You probably need to set your images to display:block then work it out from there.
img {display:block}
Of course you could make that more specific if necessary but it looks like that's the way you're expecting your images to work. The reason for the gaps is img is an inline element and carries some font-related baggage with it.Your problem is laughable simple, it's know as InternetExplorerItus.
In other words, IE sucks so much that it interprets the LINE BREAKS between your images as white space and renders them in the page as unwanted gaps.
Also, why on earth are you using a gif image for a bar of solid colour which could easily have been a styled div?
The solution, my friend, just delete the line breaks between your images and all will be revealed.
example:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"ihateIE.gif" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"itReallySucks.gif" />
becomes
<img src="ihateIE.gif" /><img src=http://www.webdeveloper.com/forum/archive/index.php/"itReallySucks.gif" />
If providing an example seems patronising, excuse me, but I suck at explaining things and have to be sure you get the point
Ditch that gif image for a styled div, and ditch the solid top image for a background image inside a styled div adding the EarthCorps logo over the top as a transparent gif.
As a rule of thumb, if you into View>Page Style>No Style in Firefox and see images on the page that are not content then you're probably doing it wrong.The only part that's really patronizing is "Also, why on earth are you using a gif image for a bar of solid colour which could easily have been a styled div?"
The simple answer is that when I used a styled div, it displayed taller than the 10 pixels it's supposed to be in IE 6.
The better answer is "because CSS positioning sucks and is clearly not ready for prime time".
Sorry, maybe that's a bit harsh, but really - when you have to do workarounds for the most popular browser out there, and when the second most popular (IE 5, by some accounts anyway) is even worse, one has to ask "is this really a _better_ way?" And then there's "accessibility" - ha! When old browsers like NN4 and IE5 Mac screw up the page so much it hardly makes sense, when you consider that the people still using these old browsers are those with hand-me-down computers and slow internet access (i.e. the poor - which includes many disabled) the idea of CSS being more accessible is a bit hard to take seriously.
One thing I find amusing is that CSS tutorials and guides are always written for the browsers that behave (FF, Safari, etc.) as though these were somehow the majority. Wishful thinking I guess. Why aren't they all just written for IE6 and 5, with some exceptions for the "well-behaved" browsers? It's more realistic.
Don't worry, I'm not actually USING CSS positioning for any live sites. It's nothing more than an experiment at this point, one that continues to disappoint. I'm sticking to tables thank you very much, and leaving the CSS to text styling, though I have certainly learned a lot of useful information and I know I can work some of it into my mainly-tables sites.
When CSS support is as solid and consistent as table support is now, that's when I'll switch. I'm guess 5 years at least. When IE 6 market share drops to less than 1% - either that or someone hands out a "hackerizer" that automatically butchers my CSS so it works on these browsers.
Except for the part about being patronizing, this rant is not directed at you WoD. Just the result of a lot of frustration and disappointment at a system that could, and should, make beautiful simple sense (it certainly does on paper), but I find out is a twisted nightmare of inconsistency and stupid workarounds. I'm just really bummed it doesn't work better. Like buying a Ferrari and finding out it only has three wheels.
Oh - and thanks for the tip on the line breaks. I'll try it.
As far as the solid top image - not sure what you're thinking. I do need to have separate "go" button, search field, and those two rollover nav buttons at the top, which makes me think I need to slice this image up. I don't need the logo to be separate from the background image - in fact that's only inviting disaster when some disagreeable browser decides to reposition it. It should maintain its relationship with the background.
- BobAbsolute positioning is extremely well behaved if you use it in moderation, hence my suggestion to separate the logo from the background and leave the background as... well.. a background.
Here is how I would create your header:
- Create a relatively positioned DIV the width and height of the header graphic.
- Set the bottom border of this DIV to be 10px high, and colour #366228 (that will produce your horizontal bar which you only wanted 10px high)
- Separate the logo from the header and place the resulting background image into the background of the DIV.
- Absolutely position your form field and go button to the top right of the DIV.
- Drop the logo over the top as an image and absolutely position it, link it to the home page, and provide some nice alt and title tags.
CSS does not require hacks, just intelligent/lateral thinking. However, for the record the solution to a DIV being higher than you want it in IE6 is to set the font size to 1px.. like I said before- IE sucks.
In regards to your rant - Nobody writes CSS tutorials for IE6 because people want to learn CSS, not some half-arsed, half-interpreted, half-implemented Microsoft mess that never works in the way you would expect it to and is rife with so many bugs that CSS hack writers practically have a full time job. If we all learnt IE6-compatible CSS the web standards would never move forward and Microsoft would continue to reign with proprietary messy crap that every other browser would be forced to duplicate or end up being abandoned as a useful piece of junk that never renders websites properly.
I'd wager that the percentage of people using computers so old that they could not even run Firefox/Netscape/Opera is pretty negligable- web technology will always move forwards and there will always be hardware/software combinations that no longer support your website. Making a modern website compatible with Netscape 4 is akin to making Windows XP run on a 486 with 8mb RAM and a 200meg hard disk- it might make one or two people happy, but it is a useless endeavour that ruins your product for everyone else.
When I code CSS it works off the bat in Firefox, Netscape, Safari 1.2, Safari 2, Camino, Shira and Opera and is usually 90% (if not 100%) perfect in Internet Explorer 6 (The 10% imperfection being minor cosmetic problems nobody would notice or care about). Then it only takes an hours work tops to tweak for IE5 compatibility- in the long run I care more about near-standards compliance and the huge number of benefits from using CSS/XHTML that I let minor cosmetic errors fly and ignore anything below IE5.
Finally, your point about CSS tutorials- I find most of the good ones are 100% cross-browser compatible, and the more advanced ones are just for us geeks who like to know about the bleeding edge but would not necessarily implement them into websites.
Here's the test page:
<!-- m --><a class="postlink" href="http://www.cultivatedesign.org/test/about_test2.html">http://www.cultivatedesign.org/test/about_test2.html</a><!-- m -->
You can see the little "go" button at top right is shifted right a couple of pixels, but only in IE 6; it's fine in FF and Safari.
I've set everything I can think is relevant (margins, padding) to "0".
Any ideas?
- BobMy guess is that it's because the button image is contained by an unstyled DIV, and the default margin/padding for IE might be different. Frankly, that whole section seems to be suffering from "divitis". You have a number of places where you do <div><img /></div>, when you could just leave the DIVs out and style the IMG as needed, making your markup a lot cleaner.I've been trying that (fewer divs) and every time I do stuff gets pushed out one way or another when viewed in IE 6. I WANT to use fewer divs, but it just ain't workin'.OK - got rid of every div that seemed reasonable. Now I've got gaps above and below the green bar at top, in addition to the same issue with the "go" button.
Even in Safari I have a gap above the green bar. But in IE it's gaps above AND below. How can this be? Everything has a margin of zero. I tried clear: both. What else is there?You probably need to set your images to display:block then work it out from there.
img {display:block}
Of course you could make that more specific if necessary but it looks like that's the way you're expecting your images to work. The reason for the gaps is img is an inline element and carries some font-related baggage with it.Your problem is laughable simple, it's know as InternetExplorerItus.
In other words, IE sucks so much that it interprets the LINE BREAKS between your images as white space and renders them in the page as unwanted gaps.
Also, why on earth are you using a gif image for a bar of solid colour which could easily have been a styled div?
The solution, my friend, just delete the line breaks between your images and all will be revealed.
example:
<img src=http://www.webdeveloper.com/forum/archive/index.php/"ihateIE.gif" />
<img src=http://www.webdeveloper.com/forum/archive/index.php/"itReallySucks.gif" />
becomes
<img src="ihateIE.gif" /><img src=http://www.webdeveloper.com/forum/archive/index.php/"itReallySucks.gif" />
If providing an example seems patronising, excuse me, but I suck at explaining things and have to be sure you get the point
Ditch that gif image for a styled div, and ditch the solid top image for a background image inside a styled div adding the EarthCorps logo over the top as a transparent gif.
As a rule of thumb, if you into View>Page Style>No Style in Firefox and see images on the page that are not content then you're probably doing it wrong.The only part that's really patronizing is "Also, why on earth are you using a gif image for a bar of solid colour which could easily have been a styled div?"
The simple answer is that when I used a styled div, it displayed taller than the 10 pixels it's supposed to be in IE 6.
The better answer is "because CSS positioning sucks and is clearly not ready for prime time".
Sorry, maybe that's a bit harsh, but really - when you have to do workarounds for the most popular browser out there, and when the second most popular (IE 5, by some accounts anyway) is even worse, one has to ask "is this really a _better_ way?" And then there's "accessibility" - ha! When old browsers like NN4 and IE5 Mac screw up the page so much it hardly makes sense, when you consider that the people still using these old browsers are those with hand-me-down computers and slow internet access (i.e. the poor - which includes many disabled) the idea of CSS being more accessible is a bit hard to take seriously.
One thing I find amusing is that CSS tutorials and guides are always written for the browsers that behave (FF, Safari, etc.) as though these were somehow the majority. Wishful thinking I guess. Why aren't they all just written for IE6 and 5, with some exceptions for the "well-behaved" browsers? It's more realistic.
Don't worry, I'm not actually USING CSS positioning for any live sites. It's nothing more than an experiment at this point, one that continues to disappoint. I'm sticking to tables thank you very much, and leaving the CSS to text styling, though I have certainly learned a lot of useful information and I know I can work some of it into my mainly-tables sites.
When CSS support is as solid and consistent as table support is now, that's when I'll switch. I'm guess 5 years at least. When IE 6 market share drops to less than 1% - either that or someone hands out a "hackerizer" that automatically butchers my CSS so it works on these browsers.
Except for the part about being patronizing, this rant is not directed at you WoD. Just the result of a lot of frustration and disappointment at a system that could, and should, make beautiful simple sense (it certainly does on paper), but I find out is a twisted nightmare of inconsistency and stupid workarounds. I'm just really bummed it doesn't work better. Like buying a Ferrari and finding out it only has three wheels.
Oh - and thanks for the tip on the line breaks. I'll try it.
As far as the solid top image - not sure what you're thinking. I do need to have separate "go" button, search field, and those two rollover nav buttons at the top, which makes me think I need to slice this image up. I don't need the logo to be separate from the background image - in fact that's only inviting disaster when some disagreeable browser decides to reposition it. It should maintain its relationship with the background.
- BobAbsolute positioning is extremely well behaved if you use it in moderation, hence my suggestion to separate the logo from the background and leave the background as... well.. a background.
Here is how I would create your header:
- Create a relatively positioned DIV the width and height of the header graphic.
- Set the bottom border of this DIV to be 10px high, and colour #366228 (that will produce your horizontal bar which you only wanted 10px high)
- Separate the logo from the header and place the resulting background image into the background of the DIV.
- Absolutely position your form field and go button to the top right of the DIV.
- Drop the logo over the top as an image and absolutely position it, link it to the home page, and provide some nice alt and title tags.
CSS does not require hacks, just intelligent/lateral thinking. However, for the record the solution to a DIV being higher than you want it in IE6 is to set the font size to 1px.. like I said before- IE sucks.
In regards to your rant - Nobody writes CSS tutorials for IE6 because people want to learn CSS, not some half-arsed, half-interpreted, half-implemented Microsoft mess that never works in the way you would expect it to and is rife with so many bugs that CSS hack writers practically have a full time job. If we all learnt IE6-compatible CSS the web standards would never move forward and Microsoft would continue to reign with proprietary messy crap that every other browser would be forced to duplicate or end up being abandoned as a useful piece of junk that never renders websites properly.
I'd wager that the percentage of people using computers so old that they could not even run Firefox/Netscape/Opera is pretty negligable- web technology will always move forwards and there will always be hardware/software combinations that no longer support your website. Making a modern website compatible with Netscape 4 is akin to making Windows XP run on a 486 with 8mb RAM and a 200meg hard disk- it might make one or two people happy, but it is a useless endeavour that ruins your product for everyone else.
When I code CSS it works off the bat in Firefox, Netscape, Safari 1.2, Safari 2, Camino, Shira and Opera and is usually 90% (if not 100%) perfect in Internet Explorer 6 (The 10% imperfection being minor cosmetic problems nobody would notice or care about). Then it only takes an hours work tops to tweak for IE5 compatibility- in the long run I care more about near-standards compliance and the huge number of benefits from using CSS/XHTML that I let minor cosmetic errors fly and ignore anything below IE5.
Finally, your point about CSS tutorials- I find most of the good ones are 100% cross-browser compatible, and the more advanced ones are just for us geeks who like to know about the bleeding edge but would not necessarily implement them into websites.