Re: [css-d] Flexible/elastic/liquid -- what's the diff?

[Felix Miata]

On 2008/10/07 10:57 (GMT+1100) Hedley Finger composed:

> On various CSS websites and mailing lists, the terms 'flexible', 
> 'elastic', and 'liquid' are frequently used about layouts.  Trouble is, 
> sometimes these seem to be applied to different things and at other 
> times are used as synonyms for the same thing.  Can anyone enlighten 
> this newbie with a more or less accepted definition of each?

There are really only two basic types of designs:

1-magazine pages hosted on the web, feigning to be web pages. These sites
have all or most of their containers that have explicit sizes set set in px.

2-real web pages. Strictly speaking, none of these would have container
widths explicitly set in px, but instead would have em or % widths set, or
few or no widths set at all. Most of the flexible, elastic and liquid designs
belong in this group, though some may set some widths in px, while others
none at all. The differences between the three are as much those of opinion
as fact. Usually flexible and elastic are more alike, and less than fully
liquid, such has having overall width constrained to a range that may be less
than the full width of the viewport. OTOH, fully liquid should normally fill
a viewport width totally, similar to a totally unstyled page.

The css-d wiki has a more conventional and detailed description:
http://css-discuss.incutio.com/?page=FluidDesign
-- 
"Everyone should be quick to listen, slow to speak, and
slow to become angry."  James 1:19 NIV

 Team OS/2 ** Reg. Linux User #211409

Felix Miata  ***  http://fm.no-ip.com/
__
css-discuss [EMAIL PROTECTED]
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] Flexible/elastic/liquid -- what's the diff?

[Hedley Finger]

On various CSS websites and mailing lists, the terms 'flexible', 
'elastic', and 'liquid' are frequently used about layouts.  Trouble is, 
sometimes these seem to be applied to different things and at other 
times are used as synonyms for the same thing.  Can anyone enlighten 
this newbie with a more or less accepted definition of each?

Regards,
Hedley

--

Hedley Finger

28 Regent Street   Camberwell VIC 3124   Australia
Tel. +61 3 9809 1229   Fax. (call phone first)
Mob. (cell) +61 412 461 558
Email. "Hedley Finger" <[EMAIL PROTECTED]>


__
css-discuss [EMAIL PROTECTED]
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] Internet Explorer 6 - 7 page correction needed

[Alexandru Dinulescu]

Hello.

It may be because you have a inner element inside a div like a paragraph or
height or long word if the div if small in which's width is wider that yoru
column adn because of that the entire layout gets messed up. This had
happened to me lots of times until i figured it out what caused this. Also
you can start with the w3c validation of XHTML and CSS

my 2 cents
Regards
-- 
---
Alexandru Dinulescu
Web Developer
(X)HTML/CSS Specialist


On Fri, Oct 3, 2008 at 6:52 AM, Nasu <[EMAIL PROTECTED]> wrote:

> Hello list,
>  I have reviewed my page CSS and thought I ensured that there were widths
> and heights to all main divs, but I still have a problem with IE 5 - 7.  In
> IE   the site content does not show up only the wrapper elements the top
> image, the middle background and the bottom image.  I am trying to create a
> curved rectangle frame for the page.
>
> I am using a css model that I wonder if it is creating a conflict...
> it separates a reset file and a typography from the layout.
> I would appreciate some help  reviewing my site in IE preferably 6 and 7.
>
> the page in question is www.giggleodee.com/indext.html
>
> Thank you in advance for any assistance
> Sui
> __
> css-discuss [EMAIL PROTECTED]
> 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-discuss [EMAIL PROTECTED]
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] div won't center in IE6

[Ingo Chao]

Scott Thigpen wrote:
> My site http://sthig.thigpendesigns.com/index.php/ has a problem with the
> div id="content" not centering in IE6.  I don't know what gives, can someone
> help me out (it just shifts to the left)
...
> nevermind, I fixed it.  it was the text align=center trick

The  -> IE6=quirks mode -> text-align:center = 
centering of blocks-trick? :)

Ingo

-- 
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
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] Internet Explorer 6 - 7 page correction needed

[Nasu]

Hello list,
 I have reviewed my page CSS and thought I ensured that there were widths
and heights to all main divs, but I still have a problem with IE 5 - 7.  In
IE   the site content does not show up only the wrapper elements the top
image, the middle background and the bottom image.  I am trying to create a
curved rectangle frame for the page.

I am using a css model that I wonder if it is creating a conflict...
it separates a reset file and a typography from the layout.
I would appreciate some help  reviewing my site in IE preferably 6 and 7.

the page in question is www.giggleodee.com/indext.html

Thank you in advance for any assistance
Sui
__
css-discuss [EMAIL PROTECTED]
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] CSS Select Box

[Jack Blankenships]

Please see the example at http://cssprovingground.com.  The bottom one
works fine because there is no element to be rendered in the middle of
the element displayed on hover.

On Mon, Oct 6, 2008 at 9:50 AM, BobSharp <[EMAIL PROTECTED]> wrote:
> I would checkout the source of CSS menus
> because this sounds like the same arrangement.
>
>
>
> - Original Message - From: "Jack Blankenships"
> <[EMAIL PROTECTED]>
> To: 
> Sent: Monday, October 06, 2008 4:19 PM
> Subject: [css-d] CSS Select Box
>
>
>> I am building a pseudo-"select" with css to allow for
>> submenus/subselects, i.e. when an element with sub options is hovered,
>> another set of options appears to the right.  With the provided css
>> and sample HTML below this functionality works just fine, however when
>> I place this into rows of a table for a grid the pseudo-select not
>> hovered appears above the popup for the hovered element.  As you can
>> see I tried the application of a z-index, but this did not seem to
>> help.  In any case what I am attempting to do is have the ul/li
>> element I am hovering over always be above any similar elements.
>>
>> Any suggestions?
>>
>> CSS:
>>
>> ul.subselect {
>>  background: #FF url(text-bg.gif) repeat-x scroll 0 0;
>>  font-size: 1.1em;
>>  z-index: -10;
>> }
>> ul.subselect:hover {
>>  z-index: 10;
>> }
>> ul.subselect, .subselect ul {
>>  padding: 0;
>>  margin: 0;
>>  border: 1px solid silver;
>> }
>> ul.subselect li {
>>  list-style-type: none;
>>  position: relative;
>>  margin: 0;
>> }
>> ul.subselect > li {
>>  background: #FF url(pull_down.gif) no-repeat 98% 50%;
>>  padding: 4px;
>>  padding-right: 20px;
>> }
>> ul.subselect ul {
>>  display: none;
>>  background-color: #ff;
>> }
>> ul.subselect li:hover > ul {
>>  display: inline-block;
>>  position: absolute;
>>  top: -1px;
>>  left: 100%;
>> }
>> ul.subselect li:hover > ul > li {
>>  text-wrap: nowrap;
>>  white-space: nowrap;
>> }
>> ul.subselect li a, ul.subselect li.sub a {
>>  display: inline-block;
>>  padding: 3px;
>>  padding-right: 5px;
>>  text-decoration: none;
>>  font-weight: normal;
>>  color: black;
>> }
>> ul.subselect li:hover {
>>  background-color: #407ad8;
>> }
>> ul.subselect li.sub {
>>  background: url(black_triangle.gif) 98% 50% no-repeat;
>> }
>> ul.subselect li.sub:hover {
>>  background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat;
>> }
>> ul.subselect > li:hover > ul {
>>  left: -1px;
>> }
>>
>> HTML:
>>
>> 
>>  Select ...
>>   
>>   Option 1
>>   Option 2
>>   Option 3
>>   
>>  Option 3 Sub 1
>>   
>>   
>>   Option 4
>> 
>> Option 4 Sub 1
>> 
>>   
>>   Option 5
>>   
>>  
>> 
>> __
>> css-discuss [EMAIL PROTECTED]
>> 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/
>>
>>
>> --
>> No virus found in this incoming message.
>> Checked by AVG.
>> Version: 7.5.526 / Virus Database: 270.7.6/1709 - Release Date: 10/5/2008
>> 09:20
>>
>>
>
>
> --
> I am using the free version of SPAMfighter for Personal use.
> SPAMfighter has removed 88 of my spam emails to date.
> Get the free SPAMfighter here: http://www.spamfighter.com/len
>
> The Trial and Professional version does not have this message in the email
>
>
>
__
css-discuss [EMAIL PROTECTED]
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] CSS Select Box

[Jack Blankenships]

Apparently the problem was the application of the z-index property to
the ul element rather than the li element.

On Mon, Oct 6, 2008 at 10:17 AM, Jack Blankenships
<[EMAIL PROTECTED]> wrote:
> Please see the example at http://cssprovingground.com.  The bottom one
> works fine because there is no element to be rendered in the middle of
> the element displayed on hover.
>
> On Mon, Oct 6, 2008 at 9:50 AM, BobSharp <[EMAIL PROTECTED]> wrote:
>> I would checkout the source of CSS menus
>> because this sounds like the same arrangement.
>>
>>
>>
>> - Original Message - From: "Jack Blankenships"
>> <[EMAIL PROTECTED]>
>> To: 
>> Sent: Monday, October 06, 2008 4:19 PM
>> Subject: [css-d] CSS Select Box
>>
>>
>>> I am building a pseudo-"select" with css to allow for
>>> submenus/subselects, i.e. when an element with sub options is hovered,
>>> another set of options appears to the right.  With the provided css
>>> and sample HTML below this functionality works just fine, however when
>>> I place this into rows of a table for a grid the pseudo-select not
>>> hovered appears above the popup for the hovered element.  As you can
>>> see I tried the application of a z-index, but this did not seem to
>>> help.  In any case what I am attempting to do is have the ul/li
>>> element I am hovering over always be above any similar elements.
>>>
>>> Any suggestions?
>>>
>>> CSS:
>>>
>>> ul.subselect {
>>>  background: #FF url(text-bg.gif) repeat-x scroll 0 0;
>>>  font-size: 1.1em;
>>>  z-index: -10;
>>> }
>>> ul.subselect:hover {
>>>  z-index: 10;
>>> }
>>> ul.subselect, .subselect ul {
>>>  padding: 0;
>>>  margin: 0;
>>>  border: 1px solid silver;
>>> }
>>> ul.subselect li {
>>>  list-style-type: none;
>>>  position: relative;
>>>  margin: 0;
>>> }
>>> ul.subselect > li {
>>>  background: #FF url(pull_down.gif) no-repeat 98% 50%;
>>>  padding: 4px;
>>>  padding-right: 20px;
>>> }
>>> ul.subselect ul {
>>>  display: none;
>>>  background-color: #ff;
>>> }
>>> ul.subselect li:hover > ul {
>>>  display: inline-block;
>>>  position: absolute;
>>>  top: -1px;
>>>  left: 100%;
>>> }
>>> ul.subselect li:hover > ul > li {
>>>  text-wrap: nowrap;
>>>  white-space: nowrap;
>>> }
>>> ul.subselect li a, ul.subselect li.sub a {
>>>  display: inline-block;
>>>  padding: 3px;
>>>  padding-right: 5px;
>>>  text-decoration: none;
>>>  font-weight: normal;
>>>  color: black;
>>> }
>>> ul.subselect li:hover {
>>>  background-color: #407ad8;
>>> }
>>> ul.subselect li.sub {
>>>  background: url(black_triangle.gif) 98% 50% no-repeat;
>>> }
>>> ul.subselect li.sub:hover {
>>>  background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat;
>>> }
>>> ul.subselect > li:hover > ul {
>>>  left: -1px;
>>> }
>>>
>>> HTML:
>>>
>>> 
>>>  Select ...
>>>   
>>>   Option 1
>>>   Option 2
>>>   Option 3
>>>   
>>>  Option 3 Sub 1
>>>   
>>>   
>>>   Option 4
>>> 
>>> Option 4 Sub 1
>>> 
>>>   
>>>   Option 5
>>>   
>>>  
>>> 
>>> __
>>> css-discuss [EMAIL PROTECTED]
>>> 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/
>>>
>>>
>>> --
>>> No virus found in this incoming message.
>>> Checked by AVG.
>>> Version: 7.5.526 / Virus Database: 270.7.6/1709 - Release Date: 10/5/2008
>>> 09:20
>>>
>>>
>>
>>
>> --
>> I am using the free version of SPAMfighter for Personal use.
>> SPAMfighter has removed 88 of my spam emails to date.
>> Get the free SPAMfighter here: http://www.spamfighter.com/len
>>
>> The Trial and Professional version does not have this message in the email
>>
>>
>>
>
__
css-discuss [EMAIL PROTECTED]
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] VERTICALLY elastic layout--possible? How?

[Scott Glasgow]

tedd wrote:
<<::snip::>>
> Maintaining relative size of the two columns will be probably best
> solved using faux columns, as Laakso suggested.
>
> Considering that your post discussed zooming, let me take this
> opportunity to provide my $0.02.
>
> If you are not willing to allow the layout (including images) to
> expand during zoom, then it's going to be difficult to create
> something that will look good throughout all zooms.
>
> As such, you might consider doing everything (including graphics) in
> em's. Here's a couple of examples:
>
> http://php1.net/b/zoom/
>
> http://webbytedd.com/clients/beckyscan/index.php
>
> In any event, it's obvious that holding a page to a static width can
> produce problematic layouts during zooms -- as prompted your post.
>
> Cheers,
>
> tedd

Thank you, Tedd (and David). I don't know how I overlooked that article in 
all my searching, but I will give that approach a shot and see if I can make 
it work. After reading the explanation in the article, it seems that it 
would resolve at least the uneven ends issue, although as you said, Tedd, 
column content itself will not line up nicely at the bottom. Thanks again 
for the input!

cheers,
scott 

__
css-discuss [EMAIL PROTECTED]
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] fixed it

[Scott Thigpen]

nevermind, I fixed it.  it was the text align=center trick

S c o t t  T h i g p e n
Illustrative Designer
art: http://www.sthig.com
design: http://www.thigpendesigns.com
photos: http://www.giantgreenjungle.com
Phone: 770.527.3958
__
css-discuss [EMAIL PROTECTED]
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] div won't center in IE6

[Scott Thigpen]

Hi,

My site http://sthig.thigpendesigns.com/index.php/ has a problem with the
div id="content" not centering in IE6.  I don't know what gives, can someone
help me out (it just shifts to the left)

my code is
#content {
background-repeat: no-repeat;
background-position: right top;
margin-right: auto;
margin-left: auto;
color: white;
background-color: #a8aa6b;
width: 820px;
}

and here is the rest of the CSS
http://sthig.thigpendesigns.com/index.php?css=sthig/style/

thanks!
Scott

S c o t t  T h i g p e n
Illustrative Designer
art: http://www.sthig.com
design: http://www.thigpendesigns.com
photos: http://www.giantgreenjungle.com
Phone: 770.527.3958
__
css-discuss [EMAIL PROTECTED]
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] CSS Select Box

[Jack Blankenships]

I am building a pseudo-"select" with css to allow for
submenus/subselects, i.e. when an element with sub options is hovered,
another set of options appears to the right.  With the provided css
and sample HTML below this functionality works just fine, however when
I place this into rows of a table for a grid the pseudo-select not
hovered appears above the popup for the hovered element.  As you can
see I tried the application of a z-index, but this did not seem to
help.  In any case what I am attempting to do is have the ul/li
element I am hovering over always be above any similar elements.

Any suggestions?

CSS:

ul.subselect {
  background: #FF url(text-bg.gif) repeat-x scroll 0 0;
  font-size: 1.1em;
  z-index: -10;
}
ul.subselect:hover {
  z-index: 10;
}
ul.subselect, .subselect ul {
  padding: 0;
  margin: 0;
  border: 1px solid silver;
}
ul.subselect li {
  list-style-type: none;
  position: relative;
  margin: 0;
}
ul.subselect > li {
  background: #FF url(pull_down.gif) no-repeat 98% 50%;
  padding: 4px;
  padding-right: 20px;
}
ul.subselect ul {
  display: none;
  background-color: #ff;
}
ul.subselect li:hover > ul {
  display: inline-block;
  position: absolute;
  top: -1px;
  left: 100%;
}
ul.subselect li:hover > ul > li {
  text-wrap: nowrap;
  white-space: nowrap;
}
ul.subselect li a, ul.subselect li.sub a {
  display: inline-block;
  padding: 3px;
  padding-right: 5px;
  text-decoration: none;
  font-weight: normal;
  color: black;
}
ul.subselect li:hover {
  background-color: #407ad8;
}
ul.subselect li.sub {
  background: url(black_triangle.gif) 98% 50% no-repeat;
}
ul.subselect li.sub:hover {
  background: #407ad8 url(black_triangle.gif) 98% 50% no-repeat;
}
ul.subselect > li:hover > ul {
  left: -1px;
}

HTML:


  Select ...

Option 1
Option 2
Option 3

   Option 3 Sub 1


Option 4
  
  Option 4 Sub 1
  

Option 5

  

__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[David Laakso]

Daniel Kessler wrote:
> That might be because I made the changes that Holly suggested.  I  
> have a page (http://sph.umd.edu/events/wellness2/ 
> conditions_treated.html) that has a paragraph at the bottom, "Please  
> call if . . . ".  I was trying to shove it to the left, but it was  
> being cut off when it wandered into the first column (in IE6 only).
>
> Holly's correction worked to make it so that the text was no longer  
> cut off.  However it introduced an allergy to my content on another  
> page where on IE6 only, a couple of white pixels appear on the right  
> size all the way down.  http://sph.umd.edu/events/wellness2/ 
> about_acupuncture.html
> This goes away if I delete the top half of the content, but I  
> couldn't narrow it down to particular content.
>
> daniel
>
>
>   
>
>   



On the page  
in the source document add a body id #acupuncture to target that page.

Boonsboro Wellness Center


<--- :: add ::



In the CSS add this selector to target that id on that page to close the 
vertical gap on the right side in IE/6.:

* html body#acupuncture #content {overflow-x:hidden;}

BTW, the text in the header walks out the bottom of it with font-scaling 
in compliant browsers a little early if that is of any concern...

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[Holly Bergevin]

From: Daniel Kessler <[EMAIL PROTECTED]>

>That worked  for the one bit of text.  However, oddly, it created a  
>couple of pixel gap across the right side of the page.  It only shows  
>up on one of the URLs:
>http://sph.umd.edu/events/wellness2/about_acupuncture.html
>Additionally, if I delete the top half of the content, the gap goes  
>away.  Very odd.  I didn't see
>
>The solution wasn't what I expected.  

The width you had added to #content triggered 'haslayout' [1] in IE6, 
contributing to the problem you were having. There were probably other ways to 
ultimately fix the problem, but what I suggested may reduce other potential 
problems as well.

Now, if that solution wasn't what you expected, neither will the next one be 
expected. The issue you're seeing in IE6 with the expanded content on - 
http://sph.umd.edu/events/wellness2/about_acupuncture.html - is the result of a 
bug due to the content you have emphasized (em element) [2]. 

One solution you can try, that should fix things up is to add a small negative 
margin on the right side of your content. I didn't check this on other pages, 
only the acupuncture one, so you'll need to test it out.

Change the declarations in your content selector, again - 

#content {
padding : 10px 15px 60px 0;
min-height:445px;
margin-left: 180px;
margin-right: -3px; /* add this */
}

and you should see the space disappear.

~holly

[1] http://www.satzansatz.de/cssd/onhavinglayout.html

[2] http://www.positioniseverything.net/explorer/italicbug-ie.html - Bruno's 
explanation and suggestions 
 
   
__
css-discuss [EMAIL PROTECTED]
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] site all messed up in Internet Explorer

[tedd]

At 3:19 AM -0400 10/6/08, Scott Thigpen wrote:
>http://sthig.thigpendesigns.com/index.php/sthig/portfolio_detail/cancer_horoscope/
>
>in contact the text area is WY too large.  It's not in any other
>browser, not sure what gives here either
>http://sthig.thigpendesigns.com/index.php/sthig/contact/
>
>Here is my CSS
>http://sthig.thigpendesigns.com/index.php?css=sthig/style/
>
>I know I'm asking help for a lot of things, I was just shocked that IE gave
>me this much grief on what I figured to be pretty solid CSS

Scott:

This might help:



Once you get those fixed, then check it again.

Cheers,

tedd

PS: Great artwork!
-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
css-discuss [EMAIL PROTECTED]
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] VERTICALLY elastic layout--possible? How?

[tedd]

At 2:48 AM -0400 10/6/08, Scott Glasgow wrote:
>So, am I chasing a chimera? I can finish the other two pages the way I did
>the others, with even bottom borders at default and graceful degradation
>when scaled. But, if in fact there is a way to accomplish vertical
>elasticity and maintain relative size of the two columns, I'd like to try
>it. In looking around, I found that a whole bunch of very big time sites
>have designs that either don't scale at all, or that shyte the bed pretty
>messily when scaled.

Scott:

Maintaining relative size of the two columns will be probably best 
solved using faux columns, as Laakso suggested.

Considering that your post discussed zooming, let me take this 
opportunity to provide my $0.02.

If you are not willing to allow the layout (including images) to 
expand during zoom, then it's going to be difficult to create 
something that will look good throughout all zooms.

As such, you might consider doing everything (including graphics) in 
em's. Here's a couple of examples:

http://php1.net/b/zoom/

http://webbytedd.com/clients/beckyscan/index.php

In any event, it's obvious that holding a page to a static width can 
produce problematic layouts during zooms -- as prompted your post.

Cheers,

tedd

-- 
---
http://sperling.com  http://ancientstones.com  http://earthstones.com
__
css-discuss [EMAIL PROTECTED]
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] Same declarations, different results

[Philippe Wittenbergh]

On Oct 6, 2008, at 3:12 PM, Kim Brooks Wei wrote:

> At http://bc4hkids.com/events/ I have defined h2 and h3 under the
> turqbox div. The two headers are identical in every way except for
> margins. But, they don't render the same. Type in h2 is larger than
> in h3. And, the padding renders differently in each.
>
> Does anyone spot why this may be happening?

#copy h3 {  /*bc4hkids.css (line 218)*/
font-size:1.1em;
...
}

.turqbox h3 {   /*bc4hkids.css (line 456)*/
background:#62A6B9 none repeat scroll 0 0;
color:#FF;
font-size:1.12em;
...
}

#copy h3 wins over .turqbox h3 as it is more specific (id vs class)

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [EMAIL PROTECTED]
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] Same declarations, different results

[David Laakso]

Kim Brooks Wei wrote:
> Hi All,
>
> At http://bc4hkids.com/events/ I have defined h2 and h3 under the 
> turqbox div. The two headers are identical in every way except for 
> margins. But, they don't render the same. Type in h2 is larger than 
> in h3. And, the padding renders differently in each.
>
> Does anyone spot why this may be happening?
>
>
> Kimi
>
>   


The difference in size is an optical illusion of sorts.
Kill the ital and they'll appear the same font-size.
h2 em {font-style: normal;}
The padding for h2 is specified greater than the padding for h3; the 
software behaves accordingly to the instructions you've given it.

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[Daniel Kessler]

That might be because I made the changes that Holly suggested.  I  
have a page (http://sph.umd.edu/events/wellness2/ 
conditions_treated.html) that has a paragraph at the bottom, "Please  
call if . . . ".  I was trying to shove it to the left, but it was  
being cut off when it wandered into the first column (in IE6 only).

Holly's correction worked to make it so that the text was no longer  
cut off.  However it introduced an allergy to my content on another  
page where on IE6 only, a couple of white pixels appear on the right  
size all the way down.  http://sph.umd.edu/events/wellness2/ 
about_acupuncture.html
This goes away if I delete the top half of the content, but I  
couldn't narrow it down to particular content.

daniel


On Oct 6, 2008, at 7:06 AM, David Laakso wrote:

> You'll need to clarify, as I'm afraid I do not understand the  
> question. Other than IE/6 and IE/7, suffer from the em-font-scaling  
> bug you never corrected [1], the pages appear pretty identical in  
> an IE/6 side by side comparison to FF/3.0.2 on this end.
>
> [1] Add yo style sheet:
> html, body {font-size: 100%;}
> -- 
>
> A thin red line and a salmon-color ampersand forthcoming.
>
> http://chelseacreekstudio.com/
>


-- 

Daniel Kessler

University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD  20742-2611
Phone: 301-405-2545
http://sph.umd.edu




__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[Daniel Kessler]

That might be because I made the changes that Holly suggested.  I  
have a page (http://sph.umd.edu/events/wellness2/ 
conditions_treated.html) that has a paragraph at the bottom, "Please  
call if . . . ".  I was trying to shove it to the left, but it was  
being cut off when it wandered into the first column (in IE6 only).

Holly's correction worked to make it so that the text was no longer  
cut off.  However it introduced an allergy to my content on another  
page where on IE6 only, a couple of white pixels appear on the right  
size all the way down.  http://sph.umd.edu/events/wellness2/ 
about_acupuncture.html
This goes away if I delete the top half of the content, but I  
couldn't narrow it down to particular content.

daniel


On Oct 6, 2008, at 7:06 AM, David Laakso wrote:

> You'll need to clarify, as I'm afraid I do not understand the  
> question. Other than IE/6 and IE/7, suffer from the em-font-scaling  
> bug you never corrected [1], the pages appear pretty identical in  
> an IE/6 side by side comparison to FF/3.0.2 on this end.
>
> [1] Add yo style sheet:
> html, body {font-size: 100%;}
> -- 
>
> A thin red line and a salmon-color ampersand forthcoming.
>
> http://chelseacreekstudio.com/
>


-- 

Daniel Kessler

University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD  20742-2611
Phone: 301-405-2545
http://sph.umd.edu




__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[Daniel Kessler]

That worked  for the one bit of text.  However, oddly, it created a  
couple of pixel gap across the right side of the page.  It only shows  
up on one of the URLs:
http://sph.umd.edu/events/wellness2/about_acupuncture.html
Additionally, if I delete the top half of the content, the gap goes  
away.  Very odd.  I didn't see

The solution wasn't what I expected.  I was thinking that if I wanted  
a two column setup, I should float one left, sized, and the other  
right.  I hadn't thought of doing it this way.  I guess the 180px  
goes off of the right side since the left column is floated?

daniel


On Oct 5, 2008, at 12:34 AM, Holly Bergevin wrote:

>
> -- Original Message --
> From: Daniel Kessler <[EMAIL PROTECTED]>
>
>> I have a two column layout.  In the right column, I have a paragraph
>> that I want to hop out and overlap the right column too.  This works
>> other than in IE6:
>> http://sph.umd.edu/events/wellness2/condtions_treated.html (url  
>> corrected)
>
>
> See if the following changes work for you.
>
> #content {
> /* float : right; */ /* delete */
> /* width : 500px; */ /* delete */
> padding : 10px 15px 60px 0;
> min-height:445px;
> margin-left: 180px; /* add this property, adjust value to suit */
> }
>
> ~holly
>
>


-- 

Daniel Kessler

University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD  20742-2611
Phone: 301-405-2545
http://sph.umd.edu




__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[David Laakso]

Daniel Kessler wrote:
> Sorry, you are correct that my link didn't work.  Left the 'e' off  
> of .edu
> http://sph.umd.edu/events/wellness2/conditions_treated.html
>
> On Oct 4, 2008, at 7:14 PM, Alexandru Dinulescu wrote:
>
>   
>> I have a two column layout.  In the right column, I have a paragraph
>> that I want to hop out and overlap the right column too.  This works
>> other than in IE6:
>> http://sph.umd.du/events/wellness2/condtions_treated.html
>>
>> 
>
>
>   

You'll need to clarify, as I'm afraid I do not understand the question. 
Other than IE/6 and IE/7, suffer from the em-font-scaling bug you never 
corrected [1], the pages appear pretty identical in an IE/6 side by side 
comparison to FF/3.0.2 on this end.

[1] Add yo style sheet:
html, body {font-size: 100%;}  
   

-- 

A thin red line and a salmon-color ampersand forthcoming.

http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] shifted text cut-off on ie6

[Daniel Kessler]

Sorry, you are correct that my link didn't work.  Left the 'e' off  
of .edu
http://sph.umd.edu/events/wellness2/conditions_treated.html

On Oct 4, 2008, at 7:14 PM, Alexandru Dinulescu wrote:

> I have a two column layout.  In the right column, I have a paragraph
> that I want to hop out and overlap the right column too.  This works
> other than in IE6:
> http://sph.umd.du/events/wellness2/condtions_treated.html
>


-- 

Daniel Kessler

University of Maryland College Park
School of Public Health
3302E SPH Building
College Park, MD  20742-2611
Phone: 301-405-2545
http://sph.umd.edu




__
css-discuss [EMAIL PROTECTED]
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] Same declarations, different results

[Kim Brooks Wei]

Hi All,

At http://bc4hkids.com/events/ I have defined h2 and h3 under the 
turqbox div. The two headers are identical in every way except for 
margins. But, they don't render the same. Type in h2 is larger than 
in h3. And, the padding renders differently in each.

Does anyone spot why this may be happening?

Incidentally, I wrote a while back asking if someone could see why my 
character codes won't work in many of the pages on this site. I can't 
code an exclamation mark or a parenthesis because the individual 
characters of my code show up & # 38 ; instead of the symbol I want 
them to reveal. I'm wondering if there's a declaration in my css that 
I unwittingly evoked which is causing this odd behaviour. Or 
something.

As always, thanks for tips and assistance.
Kimi

-- 
This email sent by
Kimi Wei
http://thewei.com
201-475-1854
__
css-discuss [EMAIL PROTECTED]
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] site all messed up in Internet Explorer

[David Laakso]

Scott Thigpen wrote:
> I thought I'd built solid css that would work cross browser but no such luck
> in Internet Explorer.  My site's got issues and I could use a little help as
> to what's going on.
>
> http://sthig.thigpendesigns.com/index.php/sthig/portfolio_detail/cancer_horoscope/
>
>   


Start with the w3c Markup Validation Service.


http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] VERTICALLY elastic layout--possible? How?

[David Laakso]

Scott Glasgow wrote:
> http://bytekrafterstech.com/index-1.html.
>
> The first three selections on the menu work, but before I start on the next 
> page, I thought that I would ask here if there were any way to provide this 
> kind of vertical elasticity and maintain even bottom borders on the two 
> columns.
>
> scott 
>
>   




You might look into using equal height columns.





-- 


http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
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] Newbie problem with templates

[Edward Collier]

Many thanks to Georg and David, who both pointed me in the right
direction!

Edward


__
css-discuss [EMAIL PROTECTED]
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] float: right does not work via DOM - looking for substitute

[Rees, Mark]

From: "Aaron Gray" <[EMAIL PROTECTED]>
Subject: Re: [css-d] float: right does not work via DOM - looking for
substitute
To: "Ms2ger" <[EMAIL PROTECTED]>
Cc: CSS-D , Philippe Wittenbergh
<[EMAIL PROTECTED]>
Message-ID: <[EMAIL PROTECTED]>
Content-Type: text/plain; format=flowed; charset="UTF-8";
reply-type=response

> Aaron Gray wrote:
>>> On Oct 4, 2008, at 3:09 AM, Aaron Gray wrote:
>>>
 Yes I know it works in HTML and CSS.

 BUT it does NOT work dynamically via DOM using Javascript.

 On IE7, FF3.0.1, Opera9.51 my test program fails but it works on 
 Safari and Chrome.

 What I want is an alternative to 'float:right' if there is one.
>>> Can you provide an example that actually shows the issue ? Otherwise, 
>>> one can only speculate.
>>
>> Okay, I have done an example in plain Javascript without my library :-
>>
>> http://www.aarongray.org/Examples/CSS/floatRight.html
>>
>> It works on WebKit based browsers but not on IE7, FF3.0.1, or Opera 9
>>
>
> The solution is to use |.style.styleFloat| and |.style.cssFloat|.[1]
>
> [1]
> http://www.demay-fr.net/blog/index.php/2008/01/22/99-stylefloat-vs-stylecssfloat-vs-stylestylefloat

>Yes, thanks alot.

>Feeling very dumb,

>Aaron

Worth noting perhaps that you could keep the style information in a CSS file 
and use JavaScript to change the class attribute of the eleemnt you wish to 
float. You will still come across a similar problem with IE in that you have to 
set both the class and className attributes. Something like this:

element=document.getElementById('myEL');
element.setAttribute('class','right');
element.setAttribute('className','right');

No doubt your chosen library provides a one-line method for doing the above

__
css-discuss [EMAIL PROTECTED]
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] Drop-down menus, suckerfish and IE7.js

[Tim Dawson]

I've recently stumbled upon Dean Edwards's IE7.js script for correcting
non-compliance in IE6 and earlier.  It seems a great step forward, to get away
from ad hoc hacks.  But I've instantly hit a problem with my drop-down menus.

I know there's a problem with IE6 restricting hover effects to
hyperlinks, and I've carefully worked round that with suckerfish.  It's worked
for a long time with no problems (mostly thanks to Eric Meyer).

But when I add IE7.js (using the conditional), IE6 only highlights the ,
instead of the whole  box, so the menu becomes unworkable because the 
drop-downs collapse when one tries to move the mouse to the next level.  It 
makes no difference whether the suckerfish script is called or not.  See:

http://www.holidaymullandiona.co.uk/accn/bb-central-mull.php (no IE7.js, works 
normally)
http://www.holidaymullandiona.co.uk/accn/bb-central-mull0.php (IE7.js + 
suckerfish, only  highlighted, menus collapse)
http://www.holidaymullandiona.co.uk/accn/bb-central-mull1.php (IE7.js, no 
suckerfish script called, only  highlighted, menus collapse)

No problem in FF3 or IE7, of course, only IE6.
One would expect IE7.js to prevent this behaviour, not cause it.
This time I thought I should seek advice before spending all day tearing my 
hair 
out.

Tim Dawson


__
css-discuss [EMAIL PROTECTED]
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] VERTICALLY elastic layout--possible? How?

[Scott Glasgow]

BTW, I didn't do that first page. It was the reason the client turned the 
job over to me. Thought I might have given the wrong impression in my first 
message.

cheers,
scott

- Original Message - 
From: "Scott Glasgow" <[EMAIL PROTECTED]>
To: 
Sent: Monday, October 06, 2008 2:48 AM
Subject: [css-d] VERTICALLY elastic layout--possible? How?


> Here's the original page http://www.jameswmikesellphd.com/index-1.html. 
> It's
> not terrible in IE6, at least at default size, but quickly breaks when 
> text
> size is increased. It's worse in FF3, even at default, and breaks worse 
> when
> scaled. The guy wants to keep the design and basic fixed-width centered
> content, but have it degrade gracefully when text-size is scaled. So, I 
> said
> I would work on it.
>
> Since he wants basically the same horizontal dimensions and layout, I

<<::snip::>> 

__
css-discuss [EMAIL PROTECTED]
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] site all messed up in Internet Explorer

[Scott Thigpen]

I thought I'd built solid css that would work cross browser but no such luck
in Internet Explorer.  My site's got issues and I could use a little help as
to what's going on.

the menu
it's supposed to be home | portfolio | about |...

IE shows it as

home| portfolio| about|

that looks fine in FF and Safari.  I don't know what gives.

Then there is the text under the Big picture.  There should be 10px worth of
space underneath there.  What do I need to add to get that to work?

Also, the text is really, really small.  In FF, Safari the text is fine

the details page is off, too.  There is no space at the bottom like there is
supposed to be.  My copy just ends and the and the footer begins.  There
shuold be at least 10px of space

http://sthig.thigpendesigns.com/index.php/sthig/portfolio_detail/cancer_horoscope/

in contact the text area is WY too large.  It's not in any other
browser, not sure what gives here either
http://sthig.thigpendesigns.com/index.php/sthig/contact/

Here is my CSS
http://sthig.thigpendesigns.com/index.php?css=sthig/style/

I know I'm asking help for a lot of things, I was just shocked that IE gave
me this much grief on what I figured to be pretty solid CSS

Thanks!!!
Scott

(ps-I'll address some of these issues tomorrow myself so if they seemed to
be fixed, you'll know I got to them...but if not, I'd really like your
help!)

S c o t t  T h i g p e n
Illustrative Designer
art: http://www.sthig.com
design: http://www.thigpendesigns.com
photos: http://www.giantgreenjungle.com
Phone: 770.527.3958
__
css-discuss [EMAIL PROTECTED]
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] IE6 displaying some text twice

[Tim Dawson]

Tim Dawson wrote:
> Ingo Chao wrote:
>> Tim Dawson wrote:
>>> ...
 See IE/6 duplicate char bug-- 
 
>>>
>>> Thank you.  That looks promising; I've had a quick look, but need to go
>>> back.  I habitually use a comment when I close a division, as: 
>>>   So that's going to get me into lots of trouble.
>>
>> Not necessarily, because the problem shows up on - 2 html-comments 
>> (mostly) -
>> near hidden-inputs - near display:none-elements - in tight float settings
>> with or without html-comments
>>
>>> I note the article says the problem is fixed in IE7, so if I'm seeing it
>>> there too it must be something else.  I thought I'd fixed it, by 
>>> updating a
>>> file, but it's still there on some pages, so I'm working on it.
>>
>> what page?
>>
> Well it WAS happening on
> http://www.holidaymullandiona.co.uk/accn/bb-central-mull.php but I've 
> increased the space at the bottom of each item and it has gone away.  At 
> this point I'm unsure exactly whether it was margin or padding I 
> changed, but it did the trick.  To find out which, I'll have to see if I 
> can reverse it.
> 
Thanks to everyone who helped.  Removing the comments after div closures has 
solved the problem in IE6.  I haven't been able to produce it again in IE7, but 
I certainly wasn't imagining it.  Now that the comments are gone I doubt if 
I'll 
see it no matter what I try.

Tim
__
css-discuss [EMAIL PROTECTED]
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/