margin:auto, IE vs. Images + widths, vert. placmnt

mishagos · July 10th, 2006, 11:58 AM

Hi there Richard, and thanks again for being such a great resource. All I had to do was buy a book and I get fantastic help. Awesome.

I have four issues, two of which are irrelevant in Firefox.

HTML file: http://www.asthma-tote.com/indexcss.html
(I'm trying to do it the right way rather than using tables and such... which more or less works at /index.html)

CSS file: http://www.asthma-tote.com/style1.css

First, both for FF and IE, two issues, related

I have a menu div with block level elements inside for buttons (learned that last time here) but the alignment goes to the top and nothing I seem to do will change that. I want it aligned to the bottom of the menu div.

Also, how to get a collection of buttons like this to align in the center of another when they're floated left?

<div id="menu">
<div class='menu'><a href="#"></a></div>
<div class='menu'><a href="#"></a></div>
<div class='menu'><a href="#"></a></div>
</div>

Just IE:

1) Regarding images and borders

border: 1px solid black;

I have an image inside that div, and IE seems to add the border onto it, making the top div border 2px wider than the rest of the divs.

2) The damn centering problem with IE vs. CSS.

Always works fine in FF, but in IE Can never figure out how to get the

width:650px;
margin: 0px auto;

to work properly and just do the cheal align=center bit for IE. Is there better way?

Thanks!

Ian

richard.york · July 12th, 2006, 09:15 AM

It looks like at least some of your problems can be corrected with putting IE into Standards-Compliant rendering mode.

margin: auto; to center does not work in IE quirks rendering mode.

To put IE in to standards compliant rendering mode, you must add a Document Type Declaration before the opening <html> tag that invokes that mode. This is what's known as the Doctype Switch. In my book, this is talked about in Chapter 2, and Doctypes are listed in Appendix D.

Try putting IE in standards compliant rendering mode, and come back with any questions.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

mishagos · July 12th, 2006, 10:13 AM

Thanks, Richard.

D'oh! I should know better than that! I knew there should be a DTD but forgot to put it there! It was knocking around somehwhere in my consciousness (where chapter 2 resides in those murky depths) but apparently not at the top of it. The DTD indeed took care of two of the problems. The remaining ones are limited to the nav/menu questions above.

What's HTH? I somehow think I should know this from the book again... Highway to Hell? You're a big AC/DC fan? :D

Cheers!

Ian

richard.york · July 16th, 2006, 02:38 PM

HTH = Hope This Helps!

For your acronym learning pleasure: :P
http://people.kldp.org/~eunjea/jargon/

It seems the only problem is the gap above the tabs? To fix that, you'll want to make a conditional comment style sheet, and give div#menu a negative top margin, or give it a relative position and a negative top value.

Code:

<![if lte IE 6]>
    <style type='text/css'>
        div#menu {
            margin-top: -5px;
        }
    </style>
<![endif]>

Does that make sense?

You can learn more about conditional comments here:
http://msdn.microsoft.com/workshop/a...omment_ovw.asp

HTH! ;)

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html

mishagos · July 16th, 2006, 04:50 PM

Thanks!

That works, but why is it that IE needs that negative top margin? What does it or does it not recognize?

Also, the final question is how to center the menu elements in that div. I've fried positioning them via a "first" margin, but that didn't always work right. Is there a good way to center something like this? If I add "text-align:center;" to the #menu id css it doesn't seem to do much.

<div id="menu">

  <div class='menu'><a href="../index.html">Home</a></div>
  <div class='menu'><a href="../index.html#buy">Buy One</a></div>
  <div class='menu'><a href="../about.html">About</a></div>
  <div class='menu'><a href="../contact.html">Contact</a></div>
  <div class='menu'><a href="../wholesale.html">Wholesale</a></div>

</div>

YTH,

Ian

richard.york · July 16th, 2006, 05:32 PM

You need to add that negative margin adjustment in a conditional comment style sheet that only IE can see. As you've applied it, Firefox, Safari, et al, also see that, which causes the tabs to be clipped in those browsers.

As far as why IE needs that adjustment, this has to do with an internal IE algorithm called "layout". It's a fairly complicated topic, but it boils down to, there are some bugs in the way that IE calculates an element's dimensions. An element's dimensions are dependent on that element's parent, and so on, in some cases. For instance, if you include a <div> element as the one and only element in an HTML document, that <div> is a block-element, by default. Its dimensions, its width, is expand-to-fit, by default. That width is determined by the width of the <body> element, and the width of the <body> element is determined by the width of the <html> element, whose width is dependent on the width of the browser's viewport.

Still with me? In IE, this "layout" algorithm keeps track of the <html> element's dimensions, so it doesn't have to recalculate the <div> element's dimensions. The <html> element in this example becomes a reference point for all subsequent dependents.

There are some circumstances that trigger a recalculation of layout, that is to say, that will trigger a new reference point to be established. When this happens in IE, the element is said to acquire layout. A height or width other than "auto" tiggers layout, in addition to several other properties.

To fix the bug that you saw, you can either fix by causing a new reference point to be created (cause the right elements to aquire layout), or you can just fix it in terms of what's wrong (adjusting the margin). Since adjusting the margin is as much work, I just do that in this case, since it's more intuitive to see what's going on in the style sheet that way.

That's just a synopsis of what's going on. To learn more about this you can visit the following, which go into much more detail than I have.

http://www.satzansatz.de/cssd/onhavinglayout.html
http://msdn.microsoft.com/library/de...ie20050831.asp
http://msdn.microsoft.com/workshop/a.../haslayout.asp

Regarding centering the tabs, you're already on the right path, margin: auto; on the containing <div> element. It just appears that the measurements are off a bit. You can either add an intermediate <div> between the menu <div> and the tabs, and apply a smaller width (than 650 pixels, representative of the cumulative widths of each tab, margin + borders + padding + width) and margin: auto; to that, or you can increase the left and right margin of each menu link by a single pixel, which seems to balance things out. text-align: center; does not center block elements, it only centers text (not-withstanding the IE bug that does center block elements using that property). align="center" is legacy, presentational HTML, and should be avoided. But it can be done using the technique that I just described.

HTH!

Regards,
Rich

--
Author,
Beginning CSS: Cascading Style Sheets For Web Design
CSS Instant Results

http://www.catb.org/~esr/faqs/smart-questions.html