Greetings all!
I haven’t been around the forums for ages! But it’s good to be back.
Anyway! I’m once again having a problem accounting for the 7.2% of browser users using IE 6 as their main browser. Unfortunately, I feel I have to account for them. And, as silly as I feel now, I didn’t code for IE first, which I now believe I will always do, until it is obsolete!
Onto the point, I can’t seem to get around a couple of alignment problems in IE. the site is:
If you take a look in chrome or firefox you can see what it’s supposed to look like. However, in IE there are a couple of problems. The major one at the moment is the alignment of the entry-meta span, ie “Posted on August 10, 2010” etc - and the image that’s next to that title. Like the image on the right of the menu up the top. In IE6 it looks even worse, the height of the content title seems way out of proportion.
I know that the site image won’t show up in IE6 without a hack, i need to look that up. It’s mostly the alignment problems I’d like to address first.
What do you think?
Also, I wouldn’t mind your opinion on how important it is to code for IE6 - do you still do it - if so, do you code for it first?
Hey Paul!
Thanks heaps for that! Helped out a lot and I know where I went wrong. Was able to apply these rules to most of the other titles on the page, however, in IE6 you may notice on the sidebar, I can’t seem to be able to push the image outside that contenttitle class. Is this because of the containing wrapper/s?
And in regards to coding in IE6 again, I see that you code for it, is it possible to have a completely seperate stylesheet for the browser?
You would need to add a class to that first anchor in the #contenttitle element and float it left as floats must come first in IE.
However, I would re-code that heading section as it’s badly organised and not very semantic.
I would do it much neater (less code) and easier and more semantic like this.
<div id="post-1" class="post-1 post type-post hentry category-uncategorized">
[B]<h2 class="contenttitle"><a class="ctitle" href="http://leafkit.com/blog/hello-world/" title="Permalink to Hello world!" rel="bookmark">Hello world!</a> Posted on <a href="http://leafkit.com/blog/hello-world/" title="10:57 am" rel="bookmark">August 12, 2010 </a> by <a class="url fn n" href="http://leafkit.com/blog/author/Leafkit/" title="View all posts by Leafkit">Leafkit</a><b></b></h2>[/B]
The image has been removed because it was not content and has been placed in the background of a b element which has no semantic meaning and is fine for an inline background image like this. (A span would probably be more semantic but I like more concise code.)
The nested spans are not needed as there are enough hooks already to style everything.
Note that contenttitle needs to be a class because you are using it more than once. You are also using it as a heading so it needs to be a heading element of the appropriate level.
Regarding IE6 then yes I still code for IE6 but I try not to add all the extra features like round corners and shadows for ie6 users. As long as the page is usable and looks normal (i.e. not broken) but it does not necessarily have to look the same as modern browsers. It’s quite easy to get IE6 working as a basic page and most authors should still try. However there is no need to try and duplicate the advanced features like round corners and shadows etc.
Heya again Paul O God of CSS! Once again thanks for the help. It must have been just as you were replying I managed to figure it out. It’s looking how I want it to now, i basically reworked it figuring out the widths etc as I went.
You’re an absolute champ and I can see you haven’t lost it in 7 years since i joined SP! Well done! Here’s a cookie.
/gives Paul a Cookie.
Now I just have to get onto those pngs either with a hack or change them to jpgs. Thanks again.
In Ie6 you can’t have the inner bigger than the outer which is what you are trying to do by adding a bigger width to the inner element to push it outside. In ie6 that just makes the parent bigger also while other browsers just let it overflow and stick out.
In IE6 to have something bigger on the inside you need to remove the width and use negative margins and apply haslayout as follows.
As I mentioned before decorative images should be in the background and not in the html anyway.
You can give code to any version of IE using conditional comments but you sholuld only give the changes and not whole stylesheets. If you find you have many rules for IE only then chances are you are doing it wrong as most things can be fixed without too many hacks.
