We have a new site design that is now live for Sage Medical Aesthetics. This is 4th version of the site, and the 3rd major overhaul. One of the versions was just a color change for the most part, rather than content and layout changes.

The site features a dynamic news site with a RSS feed for front page, video blog, along with static content. In addition to some more content that will be going up over the next few days, a calendar system will be implemented soon.

sagemedicalaesthetics.com

The CSS rendering differences between IE and Firefox can be frustrating and irritating. The majority of issues I have come across between the two arise when using nested DIV’s, and the positioning of these DIV’s.

One recent example, was setting up a menu bar. Perhaps in bad form, I used the following:

<div id=”Parent”>
<div id=”Child”>
Content
</div>
</div>

#Parent {
width:800px;
margin-left:auto;
margin-right:auto;
}

#Child {
width:790px;
margin-left:5px;
}

Now, the Child DIV was a smaller width due to some background images and lining up content to this background. I was attempting to use a left margin to set the position of Child within Parent, and the width automatically setting the right margin due to the value defined. All would work in Firefox when I was building the page. Yet after I would check IE to verify all was kosher… I would see the problems. IE was making the left margin appear differently than Firefox. To make matters worse, the right margin was also coming out differently.

So if I would change the margin-left value to be higher (as IE was showing the DIV further to the left than Firefox), Firefox would then show whitespace between the margin I wanted and the DIV container Child.

Changing DOC TYPE to strict did not help. So instead, I used this.

#Child {
margin-left:7px;
margin-right:8px;
}

The width was being defaulted to 100% inherit value, and the margins being declared on both sides. That worked. So… do not define the width value if you are having similar issues.