Hi - I have just finished my first exploratory effort project CC editor and RAW HTML & CSS. I would recommend to everyone to buy the outstanding Book from O'Reilly: HeadFirst HTML & CSS.

My project looks great in Firefox, Opera and Safari. Everything is consistent.

BUT - in IE7 divs and CSS position attributes are not respected and it looks a mess.

Can anyone out there recommend an easy to read text on "safe HTML / CSS" for IE6 & 7 ????

Many thanks Vincej

Vincej,


I don't think any HTML/CSS is safe with IE, but IE7 is closer to being standards compliant.

One of the big issues is that IE is not compliant with the W3C box model. If you do a Google search on CSS Box Model, I think you will find some solutions, including this:

* {margin: 0px; padding: 0px;}

IE recognizes * as a valid entry, and other browsers do not, so this is an IE only CSS statement that may solve your problem.

Thanks Billr - yes my code relies upon the box model and the flow implied by the box model. So what you seem to be saying is that given IE has 75% of the market I should not try to write code using the box model and just use absolute positioning for all of my div's ?

thanks Vincej

I have scanned through a few docs on IE and the CSS box model - they all seem to imply that the bugs relate to early version of IE. NOPE - I see a mess in IE7.

Vincej,

No, I am not saying to use absolute positioning, but if you are familiar with the differences between what IE does and what the standards have, you can work around the IE stuff.

Did you try the CSS code to see if that will fix things?

Are you viewing from your hard drive, from a personal server, or are you viewing a page on the web?

My experience is that what I view on my hard drive may not be accurate, so I put my pages in a test directory until I get them looking the way I want. I haven't put together a server to play around on, so I don't know if a local server will display as if the page were actually on the web.

If you have the page on the web, you could post a link, and likely someone will have a solution for the display issues.

Hi Bill,

I just wanted to clarify a couple things.


This is correct if you are talking about IE 5 and its messed up box model. IF you're talking about IE 6 or 7, then they use the correct box model if the doctype is both valid and complete and there are no additional lines before the doctype. Failing any of these, those two browsers use quirks mode which makes them render like IE 5.


I think you may be thinking of the star selector hack. The code above uses the universal selector (*) which all browsers understand.

The styling above just says there shouldn't be any margins or padding on any elements on the page. The following would apply to all elements contained within a div.

div * {margin: 0px; padding: 0px;}

The star selector hack starts with "* html". This can only work if the html element has a parent element. All browsers should ignore this since html is the root element of the page and therefore can't be contained by anything else.

IE 5 and IE 6 don't ignore this like they should, so it can be used to target style rules for them.

For instance, IE 5 and 6 don't support fixed positioning, so you can use the star selector hack to tell them to use absolute positioning instead.

IE 5 and 6 will ignore the following rule, but other browsers will use it:

#test {position:fixed;}

Only IE 5 and 6 will see the following rule:

* html #test {position:absolute;}


.

Sounds like the page is being rendered in quirks mode which means your doctype is missing or invalid or incomplete or there's either text or blank lines above the doctype.


Sitepoint's CSS FAQ may be helpful:
http://www.sitepoint.com/forums/showthread.php?t=171943

Cary,

Thanks for clarifying that for me. All I thought I knew was that IE was messed up, but now I have a better understanding.

Also thanks for the link to the CSS FAQ page. There is some interesting things there and I have bookmarked the page.

SOLUTION ! and HEALTH WARNING to all newbies writing in raw HTML

Taking a lead from Cary re the header DTD data I looked very carefully at what CC puts into the header when you start from a blank page.

It puts basic DTD type in and that is it. It misses out the whole language string as in:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<html>

The outcome is that Firefox, Opera, Safari still work fine BUT IE7 falls over and your site looks a mess !!!

As a newbie you of course spend hours looking at your HTML and CSS assuming that it HAS TO BE YOU - right ??

The nice engineers at CC could perhaps at least offer to input the language string as an option ??

With it in IE 7 works great.

This is another good one I forgot about. It list a number of additional IE 5/6 bugs and how to overcome them. At the time of its release, the only bug listed here which IE 7 suffered from was the Escaping Floats bug.

http://www.positioniseverything.net/explorer.html

Then there is also Sitepoint's CSS Reference which includes a section on Workarounds, Filters, and Hacks.

http://reference.sitepoint.com/css



.