Re: ASP.NET newbie - how to align panels horizontally
- From: Axel <n@xxxxxx>
- Date: Thu, 26 Mar 2009 22:12:00 +0000
JM,
indeed display: inline-block works in IE6 because of 2 bugs in IE6. IE7 has only one "bug" there is an undocumented feature called hasLayout which is triggered by switching on "display:inline" . this markup works in both browsers (Fx and IE7. I am ignoring IE6, but there is an additional setting for the hacks line) - the * in front of the display is important as all browsers except for IE7 ignore it. zoom is used to toggle hasLayout, display: inline switches IE7 to inline-block mode.
div.hbox
{
border: dotted 1px Gray; /* layout test */
-moz-border-radius: 3px; /* layout test */
text-align: left;
Width: 100%;
margin-bottom: 5px;
}
div.hpanel
{
border: dotted 1px #CCC; /* layout test */
-moz-border-radius: 2px; /* layout test */
display: inline-block;
padding-left:5px;
margin-right: 5px;
vertical-align:top;
/* ie7 quirk for toggling hasLayout and inline-block! */
zoom:1.0; *display: inline;
}
<div class="hbox">
<div class="hpanel">
Area1
<div>
<div class="hpanel">
Area2
<div>
<div class="hpanel">
Area3
<div>
</div>
the advantage of this approach that this is almost fluid layout with nicely horizontally arranged form panels - the hbox containers always fill the whole width of their parent, which should allow for nice multiple nesting (not tested). Border should be set to 0 for the finished product, I am displaying as dashed to see how my browsers render the panels.
The only thing this is missing is a nice "flex" attribute to grow selected hpanels and make the layout even more fluid. That's probably not possible with CSS 2, but hopfully CSS 3 will introduce something like this.
If anybody here has ever tried XUL, they have a brilliant and very simple layout language which achieves just about any form layout with hbox, vbox and flex attributes. ASP.NET could be great if it had CSS compliant hbox and vbox container controls.
cheers
Axel
JM wrote:
.If I insert 3 divs that do not containt panels they show up as expected:
<div class="hpanel"> pre hpanel </div>
<div class="hpanel"> another one </div>
<div class="hpanel"> another one </div>
the panels however always show on top of each other, no matter what style rules I set. Any idea how I can make 2 panels beside each other using the panel - Style builder?
I just tried the above snippet with your div.hpanel and it worked fine
in both FF2 and IE6 with the xhtml1-transitional DTD.
Do a Google search for IE6 vs IE7 div issues and I'll bet you find
the keys to the answer.
John
- References:
- ASP newbie - how to align panels horizontally (or what other container to use)
- From: Axel
- Re: ASP.NET newbie - how to align panels horizontally (or what other container to use)
- From: Axel
- Re: ASP.NET newbie - how to align panels horizontally (or what other container to use)
- From: Alexey Smirnov
- Re: ASP.NET newbie - how to align panels horizontally (or what other container to use)
- From: Axel
- Re: ASP.NET newbie - how to align panels horizontally (or what other container to use)
- From: Axel
- ASP newbie - how to align panels horizontally (or what other container to use)
- Prev by Date: Re: Printing from IE fails due to Froms authentication - Microsoft Bug?
- Next by Date: Re: .NET horizontal layout question (SOLUTION)
- Previous by thread: Re: ASP.NET newbie - how to align panels horizontally (or what other container to use)
- Next by thread: Re: ASP.NET newbie - how to align panels horizontally (or what other container to use)
- Index(es):
Relevant Pages
|
