it might be due to the box model problems of IE. You cant apply a width and margin/padding to a div without it screwing up, so you define the width on the "header" div and define padding/margin on the "inside" div.
Read this for more info http://www.w3.org/TR/CSS2/box.html
Thanks chazzwick for quick reply.but every time putting inside div in a div is sematic ?
It depends on what you're trying to achieve and the nature of the content. Normally you wouldn't need to place another div inside a header div unless you had a fairly complex arrangement of other block-level elements that needed to be grouped into a division before being floated. On a pure semantic standpoint, a div should only be used to declare a relationship between a number of block-level elements - more often than not, extra divs or inappropriate divs are added to an HTML document in order to allow for complex layouts. Although a little naughty, in moderation this is deemed reasonably acceptable practice. As for your code example, as it is such a basic markup I cannot see any reason why you would ever need to use that arrangement. A more semantic arrangement would be:
<h1 id=\"header\"> content here </h1>
Unless there's more you wish to achieve that you haven't yet mentioned.
i just mention the header for example. id can be anything. my only purpose to ask this is " using div in a div to solve MS Internet Explorer Problems is semantically correct. is this a good habit. any other alternative available. using div in div increase the source code file size ?
It is not semantically correct in any browser. You really need to understand what a div is and why you should or shouldn't use one. I have tried to explain in my previous post but perhaps you'll need to research further. It is possible to create a perfectly functional website with attractive layout using web standards and not even use one div. There are only very rare circumstances where you need to use nested divs and these will never be semantic as they will most likely be for layout purposes - which is against the core principles of web standards.
Doesn't make it right. But, like I said earlier - you can create a division of related elements. So A sidebar might be a side-header, list of links and a meta list - these block-level elements may be wrapped in a div to then float against the main content. But still, there's no nested div being used. For any website, you identify the content, markup that content semantically with appropriate tags before adding your styling. Nested divs will not enhance browser compatibility at all.
it might be due to the box model problems of IE. You cant apply a width and margin/padding to a div without it screwing up, so you define the width on the \"header\" div and define padding/margin on the \"inside\" div.
Nested divs will not enhance browser compatibility at all.
But according to chazzwick it does so I'm confused.
it might be due to the box model problems of IE. You cant apply a width and margin/padding to a div without it screwing up, so you define the width on the "header" div and define padding/margin on the "inside" div.
and see this on this Page below figure 9.4 : http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=3
To improve the layout and to add some breathing room to the content, we need to add some column spacing, commonly called "gutter." Unfortunately, there is a problem here. You might know that Internet Explorer does not interpret CSS correctly. One problem is that it calculates width differently. We can solve this problem by not using any padding or borders on something that has a width. To get our gutter, we add another <div> element inside the columns.
You should never add markup to accommodate one browser. The issues with IE6 are CSS issues, so should be addressed using CSS and not HTML! A conditional comment may be applied to the header of your html document calling for an IE specific CSS file that 'corrects' those issues. The example that you give is tantamount to divitis and is very bad HTML markup practice. Some designers might use that nested div method - but they are wrong to do so and it is unnecessary.
Firstly - do not believe everything you read on the internet! Secondly, if you are reading about someone's personal opinion, then use that to form your own opinion, but don't take it as gospel. Thirdly, follow best practices (like those I have already laid out) and if, after considerable usage you feel that there's a better/alternative method - use it and document your reasons for change. Conditional comments are the lifeline for users of older/non-standards-compliant browsers to be able to enjoy the web like the rest of us. The link you gave is someone who is ridiculously paranoid and perhaps doesn't understand completely the function and usage of a conditional comment. If you want to learn good web design practices, stick the the main websites like A list Apart, Sitepoint and the like. Personal blogs are unreliable unless you really know how to interpret them.
Conditional comments. Never hack your CSS - keep it pure. If a browser doesn't interpret CSS correctly, then give it its own stylesheet. 9 times out of 10, you'll only need one additional stylesheet, and that will be to accommodate IE6. Occasionally a second one for IE7 but this is rare.
I'm Confusing This is a issue of debate what is the futuristic and web standard approach to get Cross Browser Compatibility between CSS Hacks and IE Conditional css ? is really there no unanimous solution ?
There is no debate. You should not use CSS hacks. Just because some people use them, it doesn't make them right. If you want clean, transferable, future-proofed code, then use conditional comments to force browser compatibility.
Read this for more info http://www.w3.org/TR/CSS2/box.html
It depends on what you're trying to achieve and the nature of the content. Normally you wouldn't need to place another div inside a header div unless you had a fairly complex arrangement of other block-level elements that needed to be grouped into a division before being floated. On a pure semantic standpoint, a div should only be used to declare a relationship between a number of block-level elements - more often than not, extra divs or inappropriate divs are added to an HTML document in order to allow for complex layouts. Although a little naughty, in moderation this is deemed reasonably acceptable practice.
As for your code example, as it is such a basic markup I cannot see any reason why you would ever need to use that arrangement. A more semantic arrangement would be:
Unless there's more you wish to achieve that you haven't yet mentioned.
For any website, you identify the content, markup that content semantically with appropriate tags before adding your styling. Nested divs will not enhance browser compatibility at all.
See chazzwick commnets :
But according to chazzwick it does so I'm confused.
and see this on this Page below figure 9.4 : http://www.compassdesigns.net/tutorials/208-joomla-15-template-tutorial.html?start=3
To the CSS we add
.inside {padding:10px;}Conditional comments are the lifeline for users of older/non-standards-compliant browsers to be able to enjoy the web like the rest of us. The link you gave is someone who is ridiculously paranoid and perhaps doesn't understand completely the function and usage of a conditional comment.
If you want to learn good web design practices, stick the the main websites like A list Apart, Sitepoint and the like. Personal blogs are unreliable unless you really know how to interpret them.
Never hack your CSS - keep it pure. If a browser doesn't interpret CSS correctly, then give it its own stylesheet. 9 times out of 10, you'll only need one additional stylesheet, and that will be to accommodate IE6. Occasionally a second one for IE7 but this is rare.
and read this article too about conditional comments http://meiert.com/en/blog/20070201/why-conditional-comments-are-bad-repeat-bad/