R. Kirk McPike wrote on 2004-Jan-22 4:41 PM:

> On Thursday, January 22, 2004, at 03:34 PM, Stephanie Sullivan wrote:
>
>> on 1/22/04 4:23 PM, R. Kirk McPike at fireball1244@mac.com
>> profoundly spewed forth their very articulate thoughts:
>>
>>>>
> http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41
>>>
>>> Thanks. I still don't know that this affects my issue, which is
>>> with IE 6 not allowing me to have 600 pixels-worth of horizontal
>>> DIVs (including borders) inside a 600 pixel wide DIV. Perhaps I'm
>>> not following something.

Hi Kirk, I took a little while to see what was going on with your page
because it looked like a simple box model problem but it wasn't getting
fixed like a box model problem, and I think I've figured out what's
happening.

It's important to start with the understanding that IE is evil. It does
things that no other browser does, but it doesn't do evil consistently.

IE5.5 has a feature, we won't call it a bug because it some situations it
might be a desirable behaviour, where it draws the bounding boxes of block
elements narrower than other browsers. The boxes that concern you are the
ones around your <div id="here"> and your <a href..> tags.
Mozilla/Firebird/NN will add any padding or borders you specify to the width
you specify for these. In your case you have a 1px right border, so to make
your boxes fit inside a 600px div width you have to make each of your href
tags and your div 119 pixels wide. After these browsers add 1px to each box
you end up with 600px which just fits.

IE5.5 makes your content plus your margins plus padding plus borders fit
into the width you set in your width: rule. So in your case, to make five
boxes fit into 600px, you have to make each one 120px which leaves 119px for
content and margins. This is actually a nice feature of IE5.5 since it makes
bounding box sizes easy to calculate when you're fitting them into a given
width.

But that means you need a different style rule for ie5.5.

And IE6 normally works like Mozilla, it adds padding and borders to the
declared width of the element to get the bounding box.

But IE6 also has quirks mode, where it calculates bounding boxes like IE5.5.


In your case, IE6 is in standards mode (so it also ignores your <center>
tags).
Up to here, the fix is straightforward, it just makes your stylesheets a
little more complex.

But IE has another feature, it seems, which causes it to include spaces in
its calculation of widths when it is stacking floated elements together.

But it's weird here, because it gets the box model right, and screws up the
text rendering.

Once you get the proper CSS to deal with two different implementations of
the box model, IE6 lines your page up properly but it gets out of whack
rendering the text and thinks it has two characters left over, so it puts
them on the next line.

So the solution is fix the box model and remove all the spaces between your
<a href = "...> tags. Then on my IE6 test machine it looks just ducky. I
think Stephanie mentioned IE's strange behaviour with spaces a while ago in
another context.

You need to add the following rules after each of the matching selectors in
your stylesheet, and set the widths in your selectors to 119px.
* html #navigation a:link {
width: 120px;
w\idth: 119px;
}
* html #navigation a:visited {
width: 120px;
w\idth: 119px;
}

* html #here {
width: 120px;
w\idth: 119px;
}
* html #content {
width: 600;
w\idth: 592;
}

and your html should look like this:
<div id="here">HOME</div>
<a href="http://www.smurotunda.com/beta/about.html">ABOUT</a><a
href="http://www.smurotunda.com/beta/order.html">ORDER</a> <a
href="http://www.smurotunda.com/beta/download.html">DOWNLOAD</a><a
href="http://www.smurotunda.com/beta/contact.html">CONTACT</a></div>

with no breaks in between.

You could also remove most of the rules in your #navigation a:visited
selector, since they don't change anything from #navigation a:link. And as
someone else mentioned, you should import this sheet, because it will screw
up Netscape 4.x.

If you want, I can send you off list the stylesheet that's working for me.

regards

gh




#############################################################
This message is sent to you because you are subscribed to
the mailing list <dreamweaver@lists.blueworld.com>.
To unsubscribe, E-mail to: <dreamweaver-off@lists.blueworld.com>
To switch to the DIGEST mode, E-mail to <dreamweaver-digest@lists.blueworld.com>
To switch to the INDEX mode, E-mail to <dreamweaver-index@lists.blueworld.com>
Send administrative queries to <dreamweaver-admin@lists.blueworld.com>