[css-d] VERTICALLY elastic layout--possible? How?

[Scott Glasgow]

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 
decided to use ems for text sizes and for all vertical dimensions (except 
images, of course), and pixels for horizontal widths. In the end, I had to 
use a couple of pixel top/bottom margins and a conditional comment or two 
for tweaking to align the bottoms of the two columns. At present, I've got 
IE6 and FF3 giving pretty much the same presentation at default size, and 
the design degrading relatively gracefully with scaling. That is to say, the 
text maintains its relative size and positioning with respect to other text 
and to the images, and doesn't overwrite either other text or other 
elements. The bottom borders of the two side by side columns, of course, no 
longer match after scaling. Here's the result at present 
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. I think that it might be relatively trivial if all elements in each 
column scaled the same with text size changes, but, of course, images do 
not.

Then again, even without the images, varying text elements would also scale 
differentially. A heading at 1.4em will scale a different absolute amount 
than body text at, say, .8em, so if one column has no headings and the other 
has several there will be a difference in the vertical dimension of the 
columns after scaling. And the amount of text wrapping that occurs as text 
scales up also has to be considered. A short line might not cause a wrap for 
several increments, while a longer line might wrap on the first increment, 
and bingo, your column is one line longer right off the bat.

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.

I've done a lot of searching, and a LOT of experimentation using elements 
with colored backgrounds to observe results, but I'm damned if I can figure 
out a way to accomplish it. And logically it just seems that the factors 
mentioned above mitigate against the possibility. Still, there's a ton of 
CSS knowledge hanging around here, so I figure if anyone knows a way, 
someone here will. Thanks.

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/

Re: [css-d] Why do they do the things they do?

[David Laakso]

Mary Ellen Curtin wrote:
> This is more a general question about how you use CSS than about a 
> specific technique.
>
>
>
> What I would expect if I were building a site logically is:
> a. a doctype
> b. styles in .css sheets
> c. linked in the header directly or by @import
> d. no styling or formatting codes elsewhere
>
> Mary Ellen
>   

Seems to me you answered your own question-- follow best practice. A 
style ruleset, now and then, embedded in the head of the document to 
override a style sheet ruleset for a specific need is not a criminal 
offense, but a sometimes very practical common sense one-time solution...

-- 

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] Why do they do the things they do?

[Gunlaug Sørtun]

Mary Ellen Curtin wrote:

> Only two of these big sites don't even have a doctype: Google and 
> Amazon. In Google's case I'm guessing it's because they place the 
> highest priority on fast-loading pages, and they don't want 
> *anything* in there they don't have to. In Amazon's case I'm inclined
>  to think it's because the code is an incredible kluge job, put 
> together over a long period by many hands not all working in the same
>  direction, and the thought of a doctype just makes the coding dept. 
> laugh hollowly.

They may laugh because they don't know any better, or because they _do_
know better. Probably the former in most cases.

Fact: apart from for validation-reasons, there's no need for a doctype
_if_ the styling takes that into account and/or the styling is kept
simple enough.

When it comes to browsers, only IE needs a doctype...


Not that I encourage anyone to ditch the doctype, but it is only there
for mode-switching purposes.
For those who rely on quirks mode rendering and for those who can style
mode-independent, the doctype is either in the way or it doesn't really
matter much.

> What surprises me is how many sites have style codes directly in the 
> head, either instead of style sheets or in addition to one. Is there 
> a good reason for this?

For some more or less manually created sites/documents it makes sense to
link in site-wide styles add page-specific styles in the page-head.
I practice this a lot to avoid stylesheets that are full of "used once"
styles.

Styles in page-head are applied faster than stylesheets first time
around, but if page-head styles are repeated over several pages or whole
sites they'll slow down the rendering instead simply because the
document becomes larger.

> And then there's something like MySpace, with linked style sheets in 
> the head, *and* some styling directly in the head, *and* styles on 
> individual page elements. Is there any way in which this is a good 
> thing?

Support for very old and very obsolete browsers, maybe. Can't think of
any other reason.

> or should I stick with my original impression, which is that it's 
> about what I expect from MySpace.

Pretty much so. Myspace also places extreme restrictions on what the
individuals can do style-wise and otherwise.

> I'm impressed that 3 of these sites pass the validator. I was 
> expecting it of Wikipedia, but not of MSN or BBC -- it speaks, I 
> think, to a high level of consistency and discipline in their coding 
> depts.

Achieving validity is the easy part, and it is even easier if one cheats.
Not much "valid" _behind_ the 

Re: [css-d] List items overlap floated left div

[Gene Falck]

Hi Ian and Philippe

Ian wrote about the numbers in an ordered list being
under a floated-left item

Philippe wrote:

> That is always a complex situation. Depeending on what the overal look  
> of the page needs to be you can:
> 
> 1. set a wide enough left margin on the ol, wider than the width of  
> the floated block, and use padding-left to create the space for the  
> list marker. In your example, this would do:
> ol {margin-left: 240px; padding-left:1.5em;}
> 
> or
> 
> 2. set ol {list-style-position: inside}.
> 
> Both have advantages and weaknesses.

Also following Philippe's caveat that a solution is
only suitable if it fits the needed "look" of the
page, this issue can also be avoided by floating to
the right. I do a lot of that for my local apps--I
use HTML for my work notes, for instance, because
the computer in my work area doesn't have any DB
program at all, but it does have IE.

-- 

Regards,

Gene Falck
[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] List items overlap floated left div

[Ian M. Evans]

Thanks. I'll give those tips a try.
__
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] Why do they do the things they do?

[Mary Ellen Curtin]

This is more a general question about how you use CSS than about a 
specific technique.

I make a habit of from time to time looking at the code in popular 
and/or cool-looking and/or horrible sites, to see what other people are 
doing or not doing and what seems to work. I also do this because I 
frequently am brought in to work on a project that someone else left, 
and I need to be able to figure out what they might have been thinking 
so I can unscramble it.

Recently I was looking under the hoods of a bunch of high-traffic sites
http://datagnostics.com/design/topsites.html
and I'm trying to figure out what's going on with them, and why they're 
not doing what I'd expect.

What I would expect if I were building a site logically is:
a. a doctype
b. styles in .css sheets
c. linked in the header directly or by @import
d. no styling or formatting codes elsewhere

Only two of these big sites don't even have a doctype: Google and 
Amazon. In Google's case I'm guessing it's because they place the 
highest priority on fast-loading pages, and they don't want *anything* 
in there they don't have to. In Amazon's case I'm inclined to think it's 
because the code is an incredible kluge job, put together over a long 
period by many hands not all working in the same direction, and the 
thought of a doctype just makes the coding dept. laugh hollowly.

What surprises me is how many sites have style codes directly in the 
head, either instead of style sheets or in addition to one. Is there a 
good reason for this? Do you-all think the head styles are coming in via 
server side includes, and are SSIs faster than links or @import? Or are 
they using some sort of templating, so that the head styles are in 
before they even get to the server? All of these sites are, by 
definition, under much higher than normal server pressure.

And then there's something like MySpace, with linked style sheets in the 
head, *and* some styling directly in the head, *and* styles on 
individual page elements. Is there any way in which this is a good 
thing? or should I stick with my original impression, which is that it's 
about what I expect from MySpace.

I'm impressed that 3 of these sites pass the validator. I was expecting 
it of Wikipedia, but not of MSN or BBC -- it speaks, I think, to a high 
level of consistency and discipline in their coding depts.

Mary Ellen
Doctor Science, MA
datagnostics.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] IE6 displaying some text twice

[Tim Dawson]

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.

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/

Re: [css-d] IE6 displaying some text twice

[Tim Dawson]

Mark Senff wrote:
> --- On Sun, 10/5/08, Tim Dawson <[EMAIL PROTECTED]> wrote:
> 
>> I have a problem with IE6 displaying (part of) some text
>> twice.  The page advertises eight B&B properties, each in 
>> identical format.   Underneath the last entry, the last
>> part of the last line is getting repeated at the top of
>> the footer (on the left).
> 
> It's IE6's "duplicate characters" bug -- it can happen to the last of a 
> series of DIVs that are floated left combined with comment-tags in your 
> source code (see 
> http://www.positioniseverything.net/explorer/dup-characters.html for details).
> 
> All you need to do to fix it, is add the property "display:inline" to your 
> div "item" (line 21 in the source).
> 
Thanks, I'll make that change.
I'm also seeing the same problem in IE7: 
http://www.holidaymullandiona.co.uk/accn/bb-central-mull.php

But NOT http://www.holidaymullandiona.co.uk/accn/bb-tobermory.php

Which is curious because both pages call the same CSS (so that would also rule 
out a caching problem, I think).  However, the Tobermory page has more space at 
the bottom of each item, so there clearly is a difference somewhere !

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/

Re: [css-d] IE6 displaying some text twice

[Ingo Chao]

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?

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/

Re: [css-d] IE6 displaying some text twice

[Tim Dawson]

David Laakso wrote:
> Tim Dawson wrote:
>> Tim Dawson wrote:
>>  
>>> I have a problem with IE6 displaying (part of) some text twice.  The 
>>> page
>>> advertises eight B&B properties, each in identical format.   
>>> Underneath the last
>>> entry, the last part of the last line is getting repeated at the
>>> top of the footer (on the left).
>>>
>>> There's no problem in FF3 or IE7, the HTML and CSS validate, I've 
>>> looked at 'View Source' (in notepad) and there's no extra text there.
>>> 
>>
>> I spoke too soon, I've seen it in IE7 now (previously hidden owing to 
>> colour selection)
>>
>> Tim
>>
>>   

> Only see it in IE/6.0 on this end (color disabled for the blind).
> 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.

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.

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/

Re: [css-d] IE6 displaying some text twice

[David Laakso]

Tim Dawson wrote:
> Tim Dawson wrote:
>   
>> I have a problem with IE6 displaying (part of) some text twice.  The page
>> advertises eight B&B properties, each in identical format.   Underneath the 
>> last
>> entry, the last part of the last line is getting repeated at the
>> top of the footer (on the left).
>>
>> There's no problem in FF3 or IE7, the HTML and CSS validate, I've looked at 
>> 'View Source' (in notepad) and there's no extra text there.
>> 
>
> I spoke too soon, I've seen it in IE7 now (previously hidden owing to colour 
> selection)
>
> Tim
>
>   


Only see it in IE/6.0 on this end (color disabled for the blind).
See IE/6 duplicate char bug--



-- 

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] IE6 displaying some text twice

[Mark Senff]

--- On Sun, 10/5/08, Tim Dawson <[EMAIL PROTECTED]> wrote:

> I have a problem with IE6 displaying (part of) some text
> twice.  The page advertises eight B&B properties, each in 
> identical format.   Underneath the last entry, the last
> part of the last line is getting repeated at the top of
> the footer (on the left).

It's IE6's "duplicate characters" bug -- it can happen to the last of a series 
of DIVs that are floated left combined with comment-tags in your source code 
(see http://www.positioniseverything.net/explorer/dup-characters.html for 
details).

All you need to do to fix it, is add the property "display:inline" to your div 
"item" (line 21 in the source).



  
__
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:
> I have a problem with IE6 displaying (part of) some text twice.  The page
> advertises eight B&B properties, each in identical format.   Underneath the 
> last
> entry, the last part of the last line is getting repeated at the
> top of the footer (on the left).
> 
> There's no problem in FF3 or IE7, the HTML and CSS validate, I've looked at 
> 'View Source' (in notepad) and there's no extra text there.

I spoke too soon, I've seen it in IE7 now (previously hidden owing to colour 
selection)

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/

[css-d] IE6 displaying some text twice

[Tim Dawson]

I have a problem with IE6 displaying (part of) some text twice.  The page
advertises eight B&B properties, each in identical format.   Underneath the last
entry, the last part of the last line is getting repeated at the
top of the footer (on the left).

There's no problem in FF3 or IE7, the HTML and CSS validate, I've looked at 
'View Source' (in notepad) and there's no extra text there.

http://www.holidaymullandiona.co.uk/accn/bb-central-mull0.php

I thought it might be overflow (there's a hack in the CSS using overflow), so I
have made the div backgrounds transparent and outlined them black, for clarity.
No sign of repeated text on any but the last entry.

I've tried adding some extra text, and find that only the last eight characters 
show ('y with us').  If I remove the words 'with us' then 'and stay' gets 
repeated.  I think that would rule out an overflow effect ?

It's not something peculiar to the CSS or content of the last div itself:
http://www.holidaymullandiona.co.uk/accn/bb-central-mull.php shows the same
page, but with the order of divs randomised.  The extra text is shown no matter
which entry is last (different words, of course).  (The order will change if 
you 
refresh after 4 mins, or turn cookies off).

Can anyone help with this one, please ?  I'm resigned to the fact that it's 
probably something trivial I've overlooked.

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/

Re: [css-d] [off-topic] about me

[Alan Gresley]

Gabriele Romanato wrote:
> I'd like to say that I am not a CSS guru nor a CSS expert.
> I'm only a sensitive person who hates but still uses the web (aaw, such
> contradictions are stunning!).
[..]


Gabriele, we are alike in some ways. It's called passion for life and at 
the same time knowing that what you have is rare in this world.

*Behind perceived madness is genius.*


Not admin and off-topic.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo

http://www.wearechange.org/
__
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] List items overlap floated left div

[Serge Krul]

One more thing you can do is to organize your page elements a little:

Quid pro quo

Message from sponsor



Introductory paragraph. Yada yada yada


List Item 1
List Item 2
List Item 3
List Item 4




and then float left both the sponsors div and the content div.
this way you'll have more control over what happens.

Serge Krul

__
> 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] List items overlap floated left div

[Philippe Wittenbergh]

On Oct 5, 2008, at 10:08 AM, Ian M. Evans wrote:

> I have a problem where the first few list items in an ordered list  
> have
> their numbers overlapping a left floated div, i.e. the list item  
> numbers
> appear inside the border of the left-floated box.
>
> Here's the html:
>
> Quid pro quo
>
> Message from sponsor
>
> Introductory paragraph. Yada yada yada
>
> 
> List Item 1
> List Item 2
> List Item 3
> List Item 4
> 

That is always a complex situation. Depeending on what the overal look  
of the page needs to be you can:

1. set a wide enough left margin on the ol, wider than the width of  
the floated block, and use padding-left to create the space for the  
list marker. In your example, this would do:
ol {margin-left: 240px; padding-left:1.5em;}

or

2. set ol {list-style-position: inside}.

Both have advantages and weaknesses.

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] List items overlap floated left div

[Serge Krul]

Hi Ian,
It's a little difficult to tell without seeing a (non) working example, but
you probably need to specify left margin for the OL instead of (or in
addition to) the LI:

ol {
 margin-left:30px;
}

Hope this helps,

Serge Krul


> __
> 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/