Harnessing The Power of Standards: The DOMWindow
By Scott Andrew LePera
November 19, 2000 | Printer-friendly version
Part III: Adding Style With CSS
We're ready to add some CSS to add a realistic style to our DOMWindows, and it's here that we encounter our first bit of cross-browser scripting. The problem stems from the differences in the way Internet Explorer and Netscape 6/Mozilla handle borders and padding.
When you add a border to a DIV in Netscape 6, the border is added to outside of the DIV. What's worse is, if your DIV is clipped, Netscape 6 won't expand your clipping area to accommodate the border, so you could end up with a border on the top and left sides of your DIV, but not on the right and bottom sides.
In IE5, the border is placed inside the DIV, like padding. Content is reflowed to fit the available width left over.
Which is the correct approach is open to debate, but I'm not here to argue, I'm here to conquer! So for now, we'll place a conditional statement at the top of our page that checks if the browser is Internet Explorer (by testing for IE's document.all collection) and saves the result in a global variable:
ie = (document.all)?true:false
First, let's add a beveled look to the outer frame of our DOMWindow by implementing a border with an outset style:
var winBody = new DOMDiv(x,y,w,h,"#cccccc")
winBody.style.borderStyle = "outset"
winBody.style.borderWidth = "2px"
winBody.style.borderColor = "#aaaaaa"
Since our DIVs aren't clipped, we should be safe regardless of browser type. Now let's set some style properties for our titlebar DIV. These properties will actually affect the text within the titlebar:
var toolBar = new DOMDiv(4,4,w-14,18,"#006699")
toolBar.style.color = "#ffffff"
toolBar.style.fontFamily = "arial"
toolBar.style.fontSize = "10pt"
toolBar.style.paddingLeft="4px"
Now, the content frame gets a little tricky. We'd like to have a nice inner bevel around it to give it an inset look. But we also want to set the overflow style property to auto, to ensure that scrollbars will appear when the content inside the DIV is longer than the visible area. The real problem is: scrollbars in IE are of a different size than those in Netscape 6/Mozilla. So the resulting width of the content area may look strange when you add in the width of the scrollbar and the inset border, depending on your browser.
So what we'll do is use our global ie variable to determine which browser is being used, and slightly adjust the width of the content area as needed. There's probably a more elegant way to do this, but it gets the job done:
var contentArea = new DOMDiv(4,26,w-10,h-40,"#ffffff")
if (ie) contentArea.style.width = (parseInt(contentArea.style.width)-4)+"px"
else contentArea.style.width = (parseInt(contentArea.style.width)-7)+"px"
contentArea.style.borderColor="#cccccc"
contentArea.style.borderStyle="inset"
contentArea.style.borderWidth="1px"
contentArea.style.overflow="auto"
contentArea.style.paddingLeft="4px"
contentArea.style.paddingRight="2px"
contentArea.style.fontFamily = "arial"
contentArea.style.fontSize = "10pt"
EXAMPLE: Two DOMWindows with CSS styling
Voilá! Our DOMWindows look like windows now! And we did it all with CSS.
Now all we have to do is put something in them.