Alright, I've got another method of web design question for everyone... I decided to put together a little page, just something to hold a collection of other small project, etc, I'm doing. As I got started, I thought that I might try creating the layout using DIV tags. My problem is that while the page looks good (well, let's say it renders correctly) in Internet Explorer, Mozilla doesn't seem to place the DIV fields correctly. If you have IE and Mozilla, take a look (please don't laugh too hard) and see if you can see why the page might not work in one, but does in the other. If you don't have Mozilla, here's a link to Firebird. It's just a program to run, nothing to install. While on the topic, does anyone know if it's considered "OK" to use DIV tags to layout a page? It seems to work well to align graphics so I could get the 'curvy' look, but maybe there's a better way to do this? Any thoughts? Thanks again.

This would be a good place to start.

I tried it on 4 different browsers, 800x600 screen. Mozilla 1.6 - Curve does not line up under clinic IE 6.0 SP1 - Standard Opera 7.23 No Java - No Picture No Title Abyss 2.04a - Looks similar to IE Although IE is the most used browser, it is generally considered non compliant to WWW standards. Mozilla would probably be considered the most compliant. I have seen pages not rendered properly in Opera when viewing pages on www.microsoft.com that displayed properly when viewing the same page saved by IE. I still use 640x480 screens on some of my machines, especially old laptops. So I am not in favor of 1280x1024. Have you tried viewing on Mac's and *NIX machines? I say write to the standard and let the screens display whatever. I notice that you are using absolute positions. That would make a problem with screens of different resolutions.

Your problem is Gecko (Mozilla, Firebird, Konquer, etc.) is placing the div tags which contain the grey line background over the curve graphic to the left. I looked it up and I couldn't find the default length measurement Gecko uses (since you do not specify 120px for example, but 120). I tested IE and Gecko - both default to pixels. Not the problem here I realized though. It's never simple when you start looking at these things. Gecko expands DIV tags a little more than IE in various ways. You can try several things, but I would just reorder the HTML. Place the the DIV tag with the curve image after the main content DIV tag. Then move the main content DIV tag away a little to the left. "I notice that you are using absolute positions. That would make a problem with screens of different resolutions." To avoid overlap, orient all tags in only two directions. If you space everything according to left and top associations (or bottom and right), then nothing will overlap by its order in the HTML (default z-index value) unless you specifically set it that way. Absolute positioning is fine, but remember to position according to a 800x600 screen resolution for main content (the navigation and ability to read the center content). Whenever possible do not make a user scroll to get to major navigation and to see the header for content (i.e. give an idea of what the content is with a good title so scrolling us innecessary). "...does anyone know if it's considered 'OK' to use DIV tags to layout a page?" I have, but I usually nest them.

I must comment on a few of wiz-fred's comments. My stats come from http://www.w3schools.com/browsers/browsers_stats.asp. These stats are similar to stats I've seen at other sources. Regarding 640x480. I hope that you are not recommending designing for 640x480. Only 2% of internet users run at 640x480 and nearly half (probably over half by now) run at 1024x768. So designing a webpage for 640x480 users is short changing 98% in favor of 2%. I typically design for 800x600, but an argument can be made for using 1024x768. "I say write to the standard and let the screens display whatever." As you state, IE is not standard compliant, so writing "to the standard" is ignoring IE users. Given that IE 5.0 or better is used by 93% of internet users, to not design with them in mind is strictly self-serving (unless you know that your target audience doesn't use IE). You might not like IE or Microsoft, but to ignore IE when you build webpages is just shooting yourself in the foot. Regarding absolute positions: If you design your page to be left justified, then using DIVs and absolute positions work great regardless of the screen resolution. To Dr. Nick: I didn't look thru your code, but one thing that can cause alignment problems is whitespace between the wrong tags. For example: <DIV> </DIV> is not the same as: <DIV>All chunks of whitespace get converted to a single space. So the first DIV contains two spaces in addition to the image, while the second DIV contains only the image. (The RETURNs on each line convert to a space. These extra spaces can cause problems, especially with alignment. In the above example, if the img is shorter than the height of a space character, the height of the DIV is effected, which could be a problem.

I don't understand why my examples above didn't display, I used & lt ; and & gt ; rather than actually less-than, greater-than symbols. Using brackets instead, they should have been: [DIV] [IMG ....] [/DIV] and [DIV][IMG ...][/DIV] In the first example, the RETURNs on the DIV and IMG lines turn into spaces displayed on the webpage. In many cases the spaces don't matter, but sometimes they do.

Thanks for all the ideas... I've spent some time trying to get the page pretty close the W3C standards, but I personally think that some of the 'standards' are too stringent. Not allowing a FONT element to contain a P element for example. Are we supposed to end and begin a new FONT attribute every time we want to break text using a P tag? Hmmm. Anyway, I got the W3C errors down to 3, and none are serious or have anything to do with the DIV tags. An interesting note is that Google's homepage has 53 "errors". Oh well. I do think I've found what the biggest problem was with my DIV layout. Apparently it has to do with the different ways that IE and Gecko handle the 'padding' attribute in DIV tags. For example: In IE, if I have this tag: <DIV STYLE="position:absolute; top:0; left:0; width:100; height:100; padding:10"> IE will create an area that is 100x100, with the top left corner at (0,0). Because you told it to pad the area with 10 pixels, it creates a border inside the area that is 10 pixels wide. This is very similar to the 'cellpadding' attribute in the TABLE element. However, any Gecko (I hope I'm using the term right?) browsers will do it differently. They will also create an area at (0,0), but instead of padding the area on the inside of the 100x100 border, it will create a 120x120 area (10 pixels on each side), then create an inside area that's 100x100. I suppose it's the difference of intrusive and extrusive padding. Personally I think the way IE does it is how it should be done, but I don't know if that's the "compiant" way to go about it. As to my comments on that page, I was just expressing my exasperation at this incompatibility. One reason I use IE is because like Don showed, it's more used, and more supported. Finally, to get it to look right on Mozilla I have to add a 'padding:2' attribute to my title DIV tag. If I do this however, then it doesn't look right in IE. Maybe it would work to use some Javascript to determine what browser the client is using, and then use the appropriate DIV attributes. Either that or Mozilla users would just think I can't make my images line up. To see a couple dynamic examples of what I mean, as well as the little changes, check out the same page at the address as before if you'd like. Any more thoughts/ideas? Thanks again.