 |  |  |  |  |  |  |  |
help for compliance css for ie7 and firefox3
Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
 |
•
•
Join Date: Mar 2007
Posts: 686
Reputation: 
Solved Threads: 61
Practically a Master Poster
Follow the css specifications and firefox will display your web page as it should. Sometimes you may need to add small work arounds to tweak it for ie7. You could also look into a css designer which takes care of compatibility issues for you.
CSS-based websites to look the same across all browsers can often be difficult. Many of the problems however lie with Internet Explorer implementing CSS commands differently to other, more standards compliant browsers. All is not lost, however, as many of the differences you see across browsers are caused by the same Internet Explorer CSS issues... Page elements are narrower in Internet Explorer Perhaps the most famous IE and CSS problem is Internet Explorer's misinterpretation of the CSS box model, which can cause page elements to be narrower in IE. Every HTML element is essentially a box, the width of which is the total of its margin, border, padding and content area. Imagine the following CSS rule:
This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides. In IE however, the border and padding are included in the width of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em. This CSS box model problem occurs in IE5.x, and can occur in IE6, depending on how you declare the ISO value in the HTML code. There are two ways of doing this:
The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the
By using the first command however, Internet Explorer 6will render the CSS box model incorrectly, just like in version 5 browsers. To fix the box model problem, you'll need to insert a CSS hack to send different width values to different browsers. The CSS hack you use will depend on which ISO value you use, and therefore which versions of IE are rendering the box model incorrectly. To fix up only IE5.x, use the following CSS commands:
To fix up all versions of IE, use these CSS commands:
hope this will lighten up things for you. Enjoy...
div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 30em
}This means that each div is 50em wide in total. This amount is made up of a 30em wide content area, and a 4em padding, 1em border and 5em (invisible) margin on both the left and right sides. In IE however, the border and padding are included in the width of the content, as opposed to added on. In IE therefore, the width of the content is only 20em (30em less 5em padding and border on either side), and the total width of the div is just 40em. This CSS box model problem occurs in IE5.x, and can occur in IE6, depending on how you declare the ISO value in the HTML code. There are two ways of doing this:
HTML and CSS Syntax (Toggle Plain Text)
<head> In order for XHTML pages to validate it's compulsory to use one of these commands. The W3C recommends using the first command as the second will be phased out in the future.By using the first command however, Internet Explorer 6will render the CSS box model incorrectly, just like in version 5 browsers. To fix the box model problem, you'll need to insert a CSS hack to send different width values to different browsers. The CSS hack you use will depend on which ISO value you use, and therefore which versions of IE are rendering the box model incorrectly. To fix up only IE5.x, use the following CSS commands:
HTML and CSS Syntax (Toggle Plain Text)
HTML and CSS Syntax (Toggle Plain Text)
hope this will lighten up things for you. Enjoy...
•
•
Join Date: Jan 2007
Posts: 3,203
Reputation:
Solved Threads: 164
In order to make IE behave the same as other browsers, you can NOT have nonzero surrounding styles (margin, border, padding) and size styles (width, height) applied to the same tag.
Daylight-saving time uses more gasoline
Conclusion to the issue regarding ie behavior. As we know IE has a strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height! This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE! This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully. To resolve this problem, you can use the following code for a box with class="box":
All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.
css Syntax (Toggle Plain Text)
All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.
|
Other Threads in the HTML and CSS Forum
- Previous Thread: Dangerous HTML Code
- Next Thread: Firefox floating div problem
| Thread Tools | Search this Thread |
You need to join our community in order to build your list of favorite forums. You can visit the forum index for a listing of all forums.
Related Forum Features
Latest HTML and CSS Posts
- Today's Posts
- Unanswered Threads
appointments asp background backgroundcolor beta browser bug calendar cart cgi code codeinjection corporateidentity css design development displayimageinsteadofflash dreamweaver emailmarketing epilepsy explorer firefox flash form format google griefers hackers hitcounter hover html ide ie7 ie8 iframe image images internet internetexplorer intranet iphone javascript jpeg layout macbook maps marketshare microsoft mozilla multimedia navigationbars news offshoreoutsourcingcompany opacity opera optimization pnginie6 positioning problem scroll seo shopping studio swf swf. textcolor timecolor titletags url urlseparatedwords visual visualization web webdevelopment webform website windows7
