CSS Sensations
{mosimage}
The pain, the ecstasy, the frustrations of creating a webpage for IE and Firefox using CSS
IE and Firefox are well known for the subtle differences they format HTML and CSS code. The usual problem is due to Firefox using different default margins for block elements, one needs to appreciate that the developers of the browsers are not identical twins and had different design goals for their applications, so occasionally they do things in different ways. Fortunately, we can fix these issues by using the power of CSS to ensure that the relevant CSS properties are styled in the sheet; rather than relying on the browsers defaults. Other problems do exist, such as bugs with alignment in IE, but as long as we keep our head and use a little imagination we can usually work around these glitches.
Editing via Dreamweaver is a very nice way to tweak the css file… but one thing to note, ensure you use save all and don’t just save the file your working in, else you will not see changes reflected in previews due to the stylesheet not being saved.
Using h1 tags can cause problems when creating webpages. This is because IE and Firefox interpret the W3C standards differently.
H1 is a block element. So Firefox defaults to giving it a margin on top. IE doesn’t add this space above the heading. Same happens with <p> tags.
To ensure consistant webpage design one needs to ensure that the h1 tag is styled via css so the top margin is the same:
Adding a margin: 0px; line to the css style sheet achieves this.
Whilst investigating this behaviour I also read of other alignment problems that can be caused by using a margin value of greater than 0. There are ways to get round this but it would seem prudent to use padding to add white space to your divs rather than using margins if at all possible.
Finally the body tag also seems to have variable margins set in IE and firefox, therefore ensure your body style has margin:0px; applied to it in the stylesheet to ensure cross browser consistancy.
Bottom line: Find out WHY something is behaving differently… this will ultimately enhance your understanding of the css box model and
Adding Flash:
The most robust, accessible and SEO efficient way to insert Flash into your site is via Javascript. Use swfobject.js, for example:
<head>
<script type="text/javascript" src="Scripts/swfobject.js"></script>
</head><div id="flashcontent">
Website Design Studio Flash Game. If you see this you don’t have Flash installed on your system.
</div><script type="text/javascript">
var so = new SWFObject("newton_WDS_3BALLS_Large_v3_950×220.swf", "Website Design Studio", "950", "220", "5", "#000");
so.write("flashcontent");
</script>
