[css-d] A newbie's first enounter with IE css bugs

[Max Bane]

Greetings, css-d

I've recently started working on a new website design for the lab I
work for. I'm not very experienced as a web designer, particularly in
the use of CSS, but I've been studying and experimenting a lot for the
past several weeks. I've finally got something that looks decent in
firefox, but has some annoying display problems in IE.  I've been
researching as much as I can of the information available online about
IE's various css bugs, and I suspect my problems stem from the 3px
float error and boxes that grow when they're not supposed to, but I'm
having trouble working out how exactly these bugs and their
workarounds apply in my particular case.

The development version of my site design is being served at:
http://clml.uchicago.edu:8081/

Hopefully the source is fairly readable. The css file is at
http://clml.uchicago.edu:8081/static/css/main.css

I would be most grateful if any of you could take a look at it and
make any suggestions. In particular, I've noticed the following things
get screwed up in IE:
- the main content box (with the white background) is for some reason
not flush with the menu to its left (as it is in firefox), and thus
does not line up with the orange header and footer.
- the blue div which runs horizontally across the field grows taller
as the window resizes, whereas it is supposed to keep a fixed height
(as it does in firefox).
- the main content box doesn't respect its minimum height in IE

I'm aware that PNGs don't render with transparency in IE, so I'll get
around to fixing the logo by converting to a gif. Also, if you're
curious, i'm rounding the corners of the header and footer in
javascript (with MochiKit).

Thanks for any assistance. Yell at me if these problems have been
answered too often -- just provide a link to the appropriate part of
the archives :)
-- 
Max Bane
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] A newbie's first enounter with IE css bugs

[Max Bane]

On 8/29/06, Gunlaug Sørtun [EMAIL PROTECTED] wrote:
 Max Bane wrote:
  http://clml.uchicago.edu:8081/

  - the main content box (with the white background) is for some reason
   not flush with the menu to its left (as it is in firefox), and thus
  does not line up with the orange header and footer.

 3px jog bug.
 Simplest fix is to adjust the backside margin on the floating menu in
 IE6 (and older)...

 * html div#menu {margin-right: -3px;}

Aha - I had tried making the content box's margin-left -3px, but that
alone did not work. Neither did your suggestion by itself -- but both
of them together seem to have fixed it. Thanks!

 * html div#crossbox {overflow: hidden;}
 * html div#crossbox * {position: relative;}

 * html #content {height: 350px;}

These worked perfectly as is. :)

 Generally: font-size isn't fixed in any browser - despite the use of
 pixels, so it would be wise to change the element-dimensioning slightly
 to make it look better when subjected to regular, or optional,
 font-resizing. The menu overflows blue container in all my browsers.

Thanks for pointing this out. I'll play around with the overflow
options and see what I can do to make it play nice with arbitrary font
sizes.

Thanks for the help!
-- 
Max Bane
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/