Member Avatar for dariush29722

help me to understand :
how i can creat a compatible css for ie7 and firefox3???

  • 4 Contributors
  • 4 Replies
  • 88 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for sillyboy

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.

Member Avatar for essential

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:

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:

<?xml version="1.0" encoding="iso-8859-1"?>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

The first command is placed on the very first line of the HTML document and the second can be placed anywhere within the <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:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width/**/:/**/ 40em;
width: 30em
}

To fix up all versions of IE, use these CSS commands:

div {
margin: 5em;
padding: 4em;
border: 1em solid green;
width: 40em
} html>body div {
width: 30em
}

hope this will lighten up things for you. Enjoy...

Member Avatar for MidiMagic

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.

Member Avatar for essential

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":

.box
{ width: 80px;
height: 35px;
} html>body.box
{ width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.