I have been working a rounded content box approach. The layout
rendered beautifully in Firefox, yet IE threw a wrench into my layout.
The approach has to be re-thought and aligned for compatibility with
IE. The HTML and CSS code validates on the server.
The situation may relate to the Box Model Hack, but I have little
familiarity with the various workarounds and hack techniques. My
questions relate to improving my current approach and incorporating
any hacks if necessary. The layout no longer renders properly in
Firefox since adding the width property to the following classes.
div.ArticleHead er
div.ArticleHead er div
div.ArticleFoot er
div.ArticleFoot er div
My round content approach began from the following article:
My idea involved an approach, which could incorporate numerous content
box graphics; just like using tables. The content box could be square
with one corner angle or rounded corner; outlined, embossed, etc.
The redmelon approach uses a div wrapper containing the divs for the
top, content, and bottom. My approach removed this div wrapper, which
may be the first indicator. Let me simplify my questions.
Would you recommend adding a wrapper around the content box beside the
ID (navigation) wrapper?
What Box Model hack would you recommend for my layout?
How does the width property affect my content boxes? If I comment out
the width, the layout renders in Firefox; IE still fails to render it.
The #navigation container has a fix width; yet the #maincontent
container has a min-width and max-width. Tricky!
Why does the graphic, in div.ArticleFoot er, extend the full width of
#Navigation container? The class has a margin of 20px. The parent
container also has a margin of 20 px?
IE renders the whole layout as a mess. Once these content boxes
address the box model, then I could continue addressing other IE
issues like the fieldset, pre, and floats. Some people have mentioned
other approaches, but I prefer fixing this approach before move on to
a better method. It helps me to learn the idiosyncrasies behind CSS
and browser implementation. In addition, it helps me when aligning the
other CSS style with IE. Please give suggestions and lead me in the
right direction.
Comment