Dreamweaver bug?

keithc · February 14th, 2006, 11:40 AM

Not sure if this is a bug or not but if I create an html file outside of dreamweaver the following "Section 1"code works the way i want. However If i create the html document within dreamweaver with xhtml compliance selected the code in "Section 2" will not render the Height property of my <div>'s. correctly. I believe it something to do with the document declaration perhaps? Is this a known issue? Thanks
Section1 Code
<html>
<head>
<style >
div.sidebar {position: absolute; background-color: cornflowerblue; top: 0; left: 0; width: 100px; height: 75%; padding-left: 6px; padding-right: 4px; padding-top: 6px; font-size: 16pt;}
div.maintext {position: absolute; background-color: darkkhaki; top: 0; left: 110px; height: 75%;
width: 75%;}
img.relative {position: relative; left = 35%; top = 20%}
</style>
</head>
<body>
<div class="sidebar"> HERE is a sidebar. You can fill it with links, text, whatever... </div>
<div class="maintext">
<IMG class="relative" height="100" width="175" src="town.jpg">
</div>
</body>
</html>
Section2
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style >
div.sidebar {position: absolute; background-color: cornflowerblue; top: 0; left: 0; width: 100px; height: 75%; padding-left: 6px; padding-right: 4px; padding-top: 6px; font-size: 16pt;}
div.maintext {position: absolute; background-color: darkkhaki; top: 0; left: 110px; height: 75%;
width: 75%;}
img.relative {position: relative; left = 35%; top = 20%}
</style>
</head>
<body>
<div class="sidebar"> HERE is a sidebar. You can fill it with links, text, whatever... </div>
<div class="maintext">
<IMG class="relative" height="100" width="175" src="town.jpg">
</div>
</body>
</html>

Imar · February 14th, 2006, 04:16 PM

Hi Keith,

No, this is not a Dreamweaver bug. Dreamweaver doesn't have much to do with this. What you're seeing here is the "box model issue" (and others) of Internet Explorer at work.

When IE 5 and 5.5 were build, the CSS and XHTML standards were not fully done yet. So, these browsers have partial, and incorrect CSS behavior, one of the most annoying being the issue with the box model issue where Margin + Border + Padding + Content have different meanings in IE 5 / 5.5 and in other browsers.

In IE 6, a concept called "doc type switching" was introduced. Without a proper doc type, IE 6 will render the way 5 and 5.5 did (called quirks mode). That way, the millions of pages designed for those browsers still look like they should. However, newer pages (built during the past few years, that is) can use a proper doc type so the page renders in standards mode.

The differences are a bit too complex and too much to explain in a single forum post, but if you want to know more, I can suggest the great: Beginning CSS: Cascading Style Sheets for Web Design by Richard York.

He goes into great detail with CSS and rendering in different browsers.

All this said, I think the page with the doc type renders as it should. I think if you compare FireFox and IE with a proper doc type, they'll look similar. The one without the doc type isn't looking as it's supposed to do. So: add a proper doc type (like you have now), and adjust the page accordingly...
If I am not mistaken, height: 100% means 100% of the required height, while in IE 5 / quirks mode height: 100% means 100% of the view port....

Cheers,

Imar

keithc · February 14th, 2006, 05:49 PM

Imar I am going to buy this book Beginning CSS: Cascading Style Sheets for Web Design by Richard York. What other books if I may ask have you been involved with? I would like you if you would not mind to take a look at my site at http://tektown.net:86/ where I have worked in some of your examples. I just wish to know if I am on the right track now? This was very time consuming to do using just the net for training material. Thanks again for putting me on the right track Imar.

Keith

Imar · February 14th, 2006, 06:53 PM

As often in this business, the answer is: It depends.

If the page looks the way you want it to, you're on the right track, otherwise, you aren't ;)

Is a strict <div> based design a must have? While it's certainly possible to create what you want using a few <div> tags and lots of CSS, it may be too hard to do at this point.

I usually have trouble explaining to clients that a single page purely based on "modern standards" costs them $750, while I could have done the same for $75 with a few tables....

So, maybe you should reevaluate your options and drop in a single table for the three column layout. Granted, it's the easy way out, especially since you seem to be so far, but it gets the job done in less time. Over time, (and especially after reading the CSS book) you could look at this page again, and do it properly in CSS.
If you do use a table, you can still use CSS to give it dimensions and style it.

If you have all the time in the world, keep trying. CSS is not something you can master over night. It takes a lot of time and reading to understand how it works, and what strategies to use in what scenario.

When you say "other books you have been involved with", do you mean books I read, or books I worked on? For Wrox I have written three books, and I was a technical reviewer for another 10 or so. Most of them dealt with .NET 1.x / 2.0, Dreamweaver and CSS.

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to: Come With Us by The Chemical Brothers (Track 1 from the album: Come With Us) What's This?

keithc · February 15th, 2006, 12:03 AM

Thanks Imar. I'm going to do just that. I am going to get done what I can then revisit my layout after I invest the proper time in CSS. Thanks for helping me and Thanks for the book reccomendation.

Keith

Imar · February 15th, 2006, 04:50 AM

You're welcome, and good luck!

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.