Internet Explorer appears to have an error when dealing with italic font-style. This error can be found when using either <em>, <i>, or
font-style: italic;. Consider the example below:
<style style='text/css'>
.block { width:300px; background-color:#888888; }
</style>
<div style='margin: 0px auto; width: 310px;'>
<div class="block">text</div>
<div class="block"><em>text</em></div>
</div>
If you are in Internet Explorer, you should notice that the content of the second div is pushing the div too far. If you are in anything Mozilla, or it's derivatives, or Opera, the error should be absent. Depending on your version, mileage may vary.
Also, you will not see this error all the time in IE, it depends on the word layout. One word has to be very near the right edge of the ocntaining block, and then will be extended by IE, thereby causing the error you see.
Solution: - Insert a 'buffer' div, and set the width to 99% of the parent. Consider the following example:
<style style='text/css'>
.block { width:300px; background-color:#888888; }
</style>
<div style='margin: 0px auto; width: 310px;'>
<div class="block">text</div>
<div class="block">
<div style='width: 99%;'><em>text</em></div></div>
</div>
Other solutions may be to not use italics, or to add another space and push the word causing the problem to the next line.
There is an issue between platforms and between browsers. They each want to display fonts in their own way. To avoid that issue, use the (px) instead of (pt) to adjust your sizes. For example a 'font-size: 12pt' displays differently, but you can force that size by doing a 'font-size: 16px' This adjustment would make the font the same size on all browers and platforms. The conversions work like this: 1px = 0.75pt (make sure you round up or down so there are no decimals) so the chart below is a good start:
|
|
|
There is an issue between platforms and between browsers. They each want to display fonts in their own way. To avoid that issue, use the (px) instead of (pt) to adjust your sizes. For example a 'font-size: 12pt' displays differently, but you can force that size by doing a 'font-size: 16px' This adjustment would make the font the same size on all browers and platforms. You will have to play around with the (px) to (pt) conversions.
For some reason isNS6 won't allow for ANY names of CSS variables (id, class, etc.) to contain an underscore (_). If there is an underscore (_) in the name, the CSS won't be applied or layer won't show, etc. (See also the note 'No underscore in id="xxx" name (isNS6Pc)' in the <div> section.)
In NS6, you cannot have any special characters (such as a copyright sign or an ampersand). You must use the HTML code to generate these characters, otherwise JavaScript document.write commands will not work.
To accomodate isOpera, and to force font-style:italic; simply use a <span> to accomodate the problem. If you also included a text-decoration:none; to your CSS class, then do the following: <a href="xxx" style="text-decoration:none;"><span class="xxx"> LINK </span></a>
Internet Explorer and Mozilla position divs differently. The line from the CSS2 recommendation reads as follows:
"This property specifies how far a box's left content edge is offset to the right of the left edge of the box's containing block.Mozilla does this correctly, while IE differs and positions from the right side of the nearest sibling if multiple siblings are on the same line..
This problem is a little hard to describe, and about the only way you will know about it is if you have encountered it. You may also encounter this is if you are using (x)HTML 1.0 Strict or (x)HTML 1.1, because you should wrap all text in some kind of container, whether it be a <p>, <span>, <h1>, or similar kind of tag. Finally, you need to have not set any kind of border or padding, otherwise you will not encounter this.
This problem relates to the box model of many browsers. Versions of IE 5.x, Netscape, and anything less than the latest Mozilla 1.4a appear to end the div tight against the tagged text, which is correct, but will start it lower than the top of the div if no border or padding is set. With the box model, a div contains several elements: margin, border, padding, width, padding, border, margin (in that order). Because there is no padding or border specified, the div is ending tight against the content, and may pull the actual edge of the div in, which I believe is an error. Where a div begins should not change, but should in fact pull up the text.
By adding a padding of even 1px, the mysterious gap should disappear, even if the gap was much more than 1px. It appears that many browsers are reserving default space for the padding, border, and margin. This causes a problem when no sizes are specified for any of the three elements, because it appears that it then begins the div at the actual content area, which is much lower.
Solutions: Put a border all around the div or set a padding around the entire div.