I’ve come across a problem in my site where some of the margins aren’t rendering in IE8.
Is this a well known issue? I cant seem to find anything about it in google.
What margins? I’m getting the same output in Firefox 3.0.10 as IE 8.
On the inside pages the content is jammed up against the heading in IE8. I set a bottom margin of 40px on it.
Here is what I get when I put IE 8 into Standards Mode: http://farm4.static.flickr.com/3576/3520558535_983fa0bc6f_o.jpg
yeah sorry my error in the original post, the margin problem is on the secondary pages.
Well you are using Tables, and the way you are styling them…You would be better off using more semantic HTML.
The site is built using Joomla. My templates are semantic but unfortunately Joomla seems to like creating the content using tables. As a newbie to Joomla I dont know if or how I can stop it from using tables.
You can’t stop them from using tables. They created it back in the days where they didn’t believe layouts could be achieved in CSS as structurally stables as tables. They can’t use the excuse now but they are too lazy to change it now that they have the end result.
If your margins aren’t being applied vertically it’s possible that you are running into collapsing margins and it is quite a tricky subject that most people don’t realize the full extent of the issue. Here is the full rundown on sitepoints’ CSS reference.
Hope that helps :).
Thanks Ryan! I’ll take a look at that! Can you recommend an open source CMS that produces semantic code?
Not really…the CMS’s that are avaialble today don’t really use semantic code…so none that I know of would produce good code for you. Perhaps someone knows of one…perhaps wordpress?
That’s a bold assumption you’ve come to.
Systems that allow template customisation (Drupal, Joomla, Mambo etc), are capable of producing semantic code. How semantic the code is, can be attributed to how well that developer knows the system, and their ability in customising it.
Find me one that has pure semantic code if your so sure. It’s capable but often they do not. 90% of the time.
This is becoming completely off-topic, so I won’t be posting again after this.
National Strategies is a Drupal-based site that I’ve recently worked on, which demonstrates how, with the right templating knowledge, markup can be semantic. Developing and or modifying an existing Content Management System, so as to serve HTML pages, shouldn’t be seen as a constraint or restriction as to how semantic the HTML that makes up those pages, can be.
Maggie,
I haven’t used any other CMS scripts, but as far as WordPress goes…I use it for my sites (on a somewhat smaller scale) as a CMS, and find it very easy to render valid, semantic XHTML with the right theme templates. It might be worth a look.
Thanks for all the replies. The templating isnt the issue. I can build a valid site with my eyes closed.
I use wordpress already for some small sites, not sure of its capabilities for certain things but I will defo look more into it. Cheers guys!
This sounds like it might be down to IE8 strictness over margin collapse rules. IE is actually more strict than Firefox or IE7 in this respect.
Here’s some link to a couple of problems we have recently discovered relating to IE8’s strict margin collapse rules.
We’ve got some articles on our website about it. Unfortunately, Sitepoint won’t let me post the links! Come on Sitepoint!
Search for “Invent Partners” on Google: The articles are in our news section.
Actually IE<8 have what is called haslayout, when an element has haslayout it won’t collapse the margins, and many elements have some sort of haslayout, width, height, float, etc. So it doesn’t happen too often in IE. IE8 no longer has hsalayout thus margin collapses will happen more often.
So basically waht you are seeing is correct behavior :).
You can post links by leaving off the http://www. parts of the URL so it looks like
sitehere . com / test / page . php
Hi Ryan,
This case is a little more complex. In general, IE8 is actually applying strict margin collapse rules better than gecko or any of its predecessors (a bit of a shocker, no?) - this is A GOOD THING.
However, I’m not sure that IE8 is collapsing margins correctly in the case of sibling element of previous floated elements. Here’s the link which I was trying to post. I’d be interested to know what you think of my analysis of this rather weird phenomenon.
It’s called Template overrides, it’s been around since Joomla 1.5 first came out, and there are several examples in the field about how to do it. One even ships with the Joomla 1.5 install package.
Pop over to the Joomla.org forums, and any one of a hundred people (myself included) will be able to answer any specific questions about the process for your particular case. (You generally always get better results asking the community that uses/supports a software package than a third-party group. Just a matter of odds: You’re more likely to find folks knowledgeable about Drupal in the drupal forums than anywhere else, likewise with Joomla and wordpress.) Take a look at the Beez template for examples of how it’s done.
If XHTML1 Strict (rather than transitional) is the goal, you’ll need a couple other tweaks. This forum post http://forum.joomla.org/viewtopic.php?f=469&t=264476 starts the process, and if that’s not enough, stop by and ask some questions.
Ryan’s not a CMS guy, so he doesn’t have a reason to know, but all three (joomla, drupal, and wordpress) ship with templates/themes that put out valid code. In all three cases, however, there are low-quality theme/template developers who don’t. Don’t confuse the two.