bronzemonkey

If it's a title, don't put it in the list...make it a heading.

You can't protect your html, css, or javascript code. Not even people with far larger, far better, far more well known, and far more technically impressive sites can protect their code. Part of how people learn front-end web development is by looking at the source, copying it, modifying it, playing around with it, etc. It's inevitable. But that is different from theft. If someone completely rips off all your code and just makes absolutely minor alterations, it will most likely be found out and there are places like this - www.pirated-sites.com/ - that try to name and shame. Plus, these pirates are often so poor at pirating that they will leave your email address (or something equally stupid) lying around in the code. It is also a good idea to comment your files to include your name and a copyright statement (saying "don't steal my code!"), as well as have one in the footer of your website, just to try and dissuade possible theft.

No, tables are not the answer. I don't see why you need 8 images...just combine the images. Is the div scalable or fixed in width and/or height? There are dozens of techniques for rounded corners and complex borders out there, there best of which combine all the images into a single image. Even a completely scalable website doesn't need 8 divs. Give a bit more info about what you're requirements are...or just google "css complex borders" or "css rounded corners" or "css simple rounded corners".

You haven't even set the list items to display as block elements. Set them as block elements and then use 5px of margin.

add this to your code #maincontent:after {content:"."; clear:both; display:block; height:0; font-size:0; line-height:0; visibility:hidden;}

/*css*/ #container {width:780px; padding:0; margin:0 auto;} <!-- html --> <div id="container"> <!-- everything else goes in here --> </div>

It depends what browser you are using. The :hover pseudo-class will only work on anchors in IE6 and below but will work on other elements in modern browsers that better implement the css 2.1 specs

The problem is that your li and a elements are being displayed inline and not accepting the padding. You need to display them as block elements and so you'll also need to float the li elements left.

It's not the double margin bug. That is only triggered when an element is floated and has margin on the same side as the side it is floated towards. It is easily fixed by adding {display:inline;} to the IE6/5 stylesheet. To fix this problem you just need to use: #header img {display:block;} to display the images as block items and remove that space that appears below them.

No, it's not . You need to put a class of "clearfix" on any element you wish to self-clear. It's better than using an empty div but you can clear without even needing to add a class to the element.

Like I said when you asked about this FilmGod, that method is somewhat "outdated" because it still involves editing the html to clear. You can see my method, an adaptation of the concepts in that article but using only css, here: http://www.phpfreaks.com/forums/index.php/topic,184490.0.html

No it isn't, it is only targeting the body element. Hence why in those resets you specify numerous elements (apart from intra-form elements), and not just the body, that need to be reset.

You mentioned zeroing the body but what you have described is not zeroing the body! That is using the universal selector (*) to zero every element. That definitely is a bad idea. I think most people know who Eric Meyer is . I use a modified version of his reset too.

All those resets zero the margin and padding on the body. There is nothing wrong with doing so, in fact, I'd say it is essential in any professional development.

What you're basically saying is that FF and Opera have serious errors when it comes to implementing the css 2.1 spec. I can only assume that you are either making some errors in your css or not realising that you have some styles cascading in certain circumstances. Find where some of the styles applied to #priCont .left or #secCont .left get injected into the control paragraph. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> html, body, div, h1, p {padding:0; border:0; margin:0; font-family:arial, sans-serif; font-size:100.01%;} #priCont, #secCont, #terCont {padding:1em; border:1px solid #f00; margin:1em;} h1 {font-size:1.6em; font-weight:bold;} #priCont .left {position:relative; width:50%; padding:2%; color:#fc0; font-weight:bold; font-style:italic; line-height:1.5em;} #priCont .left em {position:absolute; top:0; right:0; font-style:normal; color:#fff; background:#000;} #secCont .left {width:90%; border:5px solid #ddd; color:#c45; text-transform:uppercase; text-decoration:underline;} #secCont .left em {float:left; border:1px solid #000; background:#c72; color:#b27;} </style> </head> <body> <div id="wrapper"> <div id="priCont"> <h1>Primary Content</h1> <p class="left"><em>This is contained within an em element inside the paragraph with class of left</em>. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris accumsan tristique eros. Nullam cursus odio eget lorem. Praesent malesuada mollis ante. Sed ut libero. Integer fermentum sem in enim. In sed lorem nec nibh iaculis luctus. Donec et turpis eget dolor rhoncus aliquam. In hac habitasse platea dictumst. Duis luctus mauris sed sem. Suspendisse purus est, varius eu, imperdiet in, laoreet vitae, lorem. Curabitur pulvinar mollis dolor. Donec et nisi. Mauris tempor, mauris et euismod rutrum, mauris erat sagittis lorem, eu tempus nisi ligula vel risus. Integer massa arcu, sollicitudin eget, interdum at, ornare rutrum, arcu. Pellentesque nibh. Phasellus arcu purus, porta nec, faucibus ut, laoreet sed, orci. Praesent nisl. Curabitur orci quam, egestas sit amet, rhoncus ac, vestibulum eu, nisl. Fusce vulputate tempor ligula.</p> </div> <div id="secCont"> <h1>Secondary Content</h1> <p class="left"><em>This is contained within an em element inside the paragraph with class of left</em>. Nullam placerat. Praesent feugiat pretium lacus. Etiam commodo. Donec metus. Proin sit amet justo non tortor sodales dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p> </div> <div id="terCont"> <h1>Control Content</h1> <p class="left"><em>This is contained within an em element inside the paragraph with class of left</em>. This paragraph also has a class of "left" but the only styles it displays are the defaults following a browser reset. There is no bleeding of css declarations for the primary or secondary content into the content here.</p> <p class="left">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque tortor. Aliquam eros. Pellentesque accumsan vestibulum erat. Fusce condimentum ante ac ipsum. Pellentesque sed enim. Ut non metus. Nulla vel leo in nulla venenatis congue. Nulla et nibh. Maecenas est dui, blandit sed, ultrices a, hendrerit eu, lorem. Cras eget enim quis metus sodales vestibulum. Proin laoreet nulla interdum urna.</p> </div> </div> </body> </html> If you have an example of the behaviour you are talking about then please post the code. Thanks.

I couldn't understand the problem or the question either. What he did was fine. You shouldn't escape ' within " or " within ', only " within " or ' within '. For example, these are all fine echo "<div id='famous'>" echo '<div id="famous">' echo "<div id=\"famous\">" Sorry, what are you saying is wrong? The whole point of classes is that they are used on multiple elements. Every class is "global" and you need to be specific in the CSS to ensure that a class which is the child of another element is styled accordingly. I could style elements with a class of "left" differently if they appear anywhere in the document, only within an element with id of "top", or only within other elements with a class of "famous". That's the whole point. Perhaps I have misunderstood your problems.

I have to get drop-downs showing over flash objects on a weekly basis. But if you don't believe me, perhaps you'll believe someone else.

z-index will not work. You have to use <param name="wmode" value="transparent" /> and wmode="transparent"

Good point, but I recommend doing this instead: <!--[if IE]> <style type="text/css"> @import url("ie.css"); </style> <![endif]--> This uses a lot less code and does the exact same thing. What do you mean "a lot less"? There is barely any difference in the number of characters used. It's pointless using @import for a stylesheet that is in a conditional, especially a conditional that targets a specific version of IE. May as well use <link> and avoid any potential problems.

I don't see any problems in IE7. The layout difference in FF (and other modern browsers) is because you've got floated content within your #maincontent div that isn't self-clearing. Basically the floats break from the document flow and just poke out the bottom of maincontent...which is itself only a pixel height because it contains no non-floated content. Add this to your stylesheet and it will be fixed: #maincontent:after {clear:both; content:"."; display:block; height:0; line-height:0; font-size:0; visibility:hidden;} If you encounter this in IE it is because the IE property "hasLayout" hasn't been triggered. "hasLayout" is triggered by position values other than static, height and width values other than auto, and a few other properties. Google it for more info. Anyway you can trigger hasLayout in IE7 to self-clear an element with: #myelement {min-height:1px;} And in IE6/5 with: #myelement {height:1px;} But put those in stylesheets wrapped in conditional comments

The article on position is everything is a little old. It works better than a clearing div but you still need to add a class of "clearfix" to html elements you want to self-clear. Instead you can do it all in the stylesheet (and forget IE5/Mac): /*Clearing for Modern Browsers */ #myelement:after, #anotherelem:after { clear:both; content:"."; display:block; height:0; font-size:0; line-height:0; visibility:hidden; } /*Clearing for IE6 only*/ * html #myelement, * html #anotherelem { height:1%; } /*Clearing for IE7 only*/ *+html #myelement, *+html #anotherelem { min-height:1px; } I like to put the IE declarations into IE stylesheet to avoid the selector "hacks". The {min-height:1px} for IE7 doesn't actually have any negative effect on other browsers, so you could put it in your normal stylesheet...just depends on whether you prefer to have the clearing css all in the same place and obvious what it is doing!

This is probably a "hasLayout" issue since your list items have no properties that trigger IE's bizarre "hasLayout" property. Try using {height:1px;} in an IE-only stylesheet.

This bug is usually caused by two things - either an html comment or a float problem. Try removing the html comments after the elements in your sidebar, and use a proper clearing technique rather than a clearing div in your markup. It's a bizarre bug that I've encountered a couple of times and managed to get around. If you get no luck with those suggestions try google for answers or check the IE bug list/solutions at "position is everything". good luck!

This can be done with css. Tables are for tabular data and not for layouts. 1. Google "Faux Columns" - there is an article on A List Apart about it. 2. Google "Perfect 3 Column Liquid Layout" - can be used as a basis for fixed or liquid layouts with apparently equal height columns.

Most of the people here would rather keep the forums civil, inviting, and helpful to those looking for accurate answers. Unfortunately, phpquestioner, you are resorting to slander and some of your advice is simply misleading or not following best practices. It would be appreciated if you could dispense with the aggressive tone and the attacks against professional developers.