Re: [css-d] Why didn't div border wrap around div contents?

2011-04-08 Thread Keith Purtell 
 Date: Thu, 07 Apr 2011 12:13:48 -0400
 From: David Laakso da...@chelseacreekstudio.com
 To: css-d@lists.css-discuss.org
 Subject: Re: [css-d] Why didn't div border wrap around div contents?
 
 Try opening the nav block and containing the content within it...
 
 body {
  /*font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 1.0em;*/
  font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
  }
 
 #navigatex {
  border: 1px solid /*#F3E5CE*/red; overflow: hidden;
  }
 
 ul#navlistx {
  /*font: normal bold 2em Arial, 'Helvetica Neue', Helvetica, 
 sans-serif;*/
 }
 
 #articlex {
  /*display:block;*/
  /*font: italic bold 1.25em Arial, 'Helvetica Neue', Helvetica, 
 sans-serif;*/
  margin: /*17em*/0 auto 5em auto;
  /*width: 606px;*/
 width: 60%;
 }

David, I built a successful version using Jukka's suggestion about
modifying the li borders, but I'm also going to build one using your
idea and compare the two to see which is better suited for my site.
Thanks, both of you!

-K

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Why didn't div border wrap around div contents?

2011-04-07 Thread David Laakso 

On 4/6/11 11:58 PM, Keith Purtell wrote:

What's the deal?

http://www.keithpurtell.com/kthings/indexNew.htm

- Keith Purtell







Try opening the nav block and containing the content within it...

body {
/*font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 1.0em;*/
font: 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#navigatex {
border: 1px solid /*#F3E5CE*/red; overflow: hidden;
}

ul#navlistx {
/*font: normal bold 2em Arial, 'Helvetica Neue', Helvetica, 
sans-serif;*/

}

#articlex {
/*display:block;*/
/*font: italic bold 1.25em Arial, 'Helvetica Neue', Helvetica, 
sans-serif;*/

margin: /*17em*/0 auto 5em auto;
/*width: 606px;*/
   width: 60%;
}

Best,
Studs T.
Chicago

--
http://chelseacreekstudio.com/
http://chelseacreekstudio.com/fa/

__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Why didn't div border wrap around div contents?

2011-04-06 Thread Keith Purtell 
I'm experimenting with a different version of my site entry page that is
stripped down to banner, complimentary color boxes, simplified
navigation buttons, and shorter introductory text.

The problem I've just encountered is the borders on the navigation
buttons. When I gave each list element a 1-pixel border, I knew they
would double where the elements touched. But I figured the easy fix
would be to add a 1-pixel border to the enclosing div. To my surprise,
it only added thickness at the top. When I checked in Firebug, it seemed
to indicate that the surround div border is acting like it is vertically
squashed instead of drawing a line around the perimeters of where I
believe the div exists.

On top of that malfunction, adding the border to the div pushed the
intro text way down, and along with it, the margin area below.

What's the deal?

http://www.keithpurtell.com/kthings/indexNew.htm

- Keith Purtell


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Why didn't div border wrap around div contents?

2011-04-06 Thread Jukka K. Korpela 

Keith Purtell wrote:


The problem I've just encountered is the borders on the navigation
buttons.


You mean links (though they may look somewhat like buttons),


When I gave each list element a 1-pixel border, I knew they
would double where the elements touched. But I figured the easy fix
would be to add a 1-pixel border to the enclosing div. To my surprise,
it only added thickness at the top.


The enclosing div, with id=navigatex, has zero height. You can see this if 
you tentatively set, say, a red border for it, then add 3px padding.


The reason is that the li elements have float: left, effectively taking 
them out of the div box as far as height calculation is concerned.


You might consider setting a fixed height for the div as well as the li 
elements - you already have fixed widths in pixels, so fixed heights can't 
make things much worse.


But perhaps simpler, you could modify the borders for the li elements so 
that doubling is avoided, e.g. setting just bottom and right border for 
them, adding top border for the first row as well as left border for the 
first column. This won't work if the setup is supposed to be fluid (as many 
li elements appear in a row as the available width permits), but it isn't.


--
Yucca, http://www.cs.tut.fi/~jkorpela/ 


__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/