[css-d] Companion column method

[Ingo Chao]

Hi,

this draft

http://www.satzansatz.de/cssd/companions.html

introduces a technique for equal heights aspect of columns.

Comments and corrections are appreciated. Thank you for your time.

Regards,

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Suckerfish Challenge

[Jennifer Knowles]

I am preparing a site for a redesign.  For now I am just trying to make 
the site more accessible while keeping the old design (it isn't mine) in 
place so I am reworking one element at a time.  I am starting with the 
top navigation menu, which is a horrible (in terms of being accessible) 
javascript drop-down which you can see here:
http://www.thecentersd.org/programs.php 
Is it possible to replicate this using some form of Suckerfish? 
I have a basic "Son of Suckerfish" experiment here
http://www.thecentersd.org/navtest.html
and the problems I am facing should be obvious.  I need the sub-item 
ul's to be wide enough not to wrap (I have specified 10em per the 
original Son of Suckerfish on html dog which is too short) but as it is 
they are already too wide for my top level (I only have 786 pixels to 
work with)
I have never tried anything like this with Suckerfish before and I am 
wondering if it is even possible. (I admit I am over my head.)  I have 
assigned ids for all of my top level li's as well as all sub-menu ul's.  
What I am thinking is I can specify the width of each of the different 
nav items and but then is there a way that I can make the top level li's 
evenly spaced as they are on the current menu?
Any help is really appeciated!!!




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Suckerfish Challenge

[Ross]

You have done well so far. I have always found it is a bit of trial and 
error to get these working the way you want it.

If you use the list id's then you can set the width of each dropdown. e.g

ul#programs_submenu  li a {
width:20em;
background-color: orange;
}

You will also have to tweek the horizontal sub menus so they move along a 
bit.


R.

- Original Message - 
From: "Jennifer Knowles" <[EMAIL PROTECTED]>
To: 
Sent: Monday, July 09, 2007 9:06 AM
Subject: [css-d] Suckerfish Challenge


>I am preparing a site for a redesign.  For now I am just trying to make
> the site more accessible while keeping the old design (it isn't mine) in
> place so I am reworking one element at a time.  I am starting with the
> top navigation menu, which is a horrible (in terms of being accessible)
> javascript drop-down which you can see here:
> http://www.thecentersd.org/programs.php
> Is it possible to replicate this using some form of Suckerfish?
> I have a basic "Son of Suckerfish" experiment here
> http://www.thecentersd.org/navtest.html
> and the problems I am facing should be obvious.  I need the sub-item
> ul's to be wide enough not to wrap (I have specified 10em per the
> original Son of Suckerfish on html dog which is too short) but as it is
> they are already too wide for my top level (I only have 786 pixels to
> work with)
> I have never tried anything like this with Suckerfish before and I am
> wondering if it is even possible. (I admit I am over my head.)  I have
> assigned ids for all of my top level li's as well as all sub-menu ul's.
> What I am thinking is I can specify the width of each of the different
> nav items and but then is there a way that I can make the top level li's
> evenly spaced as they are on the current menu?
> Any help is really appeciated!!!
>
>
>
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[David Laakso]

Ingo Chao wrote:
> Hi,
>
> this draft
>
> http://www.satzansatz.de/cssd/companions.html
>
> introduces a technique for equal heights aspect of columns.
>
> Comments and corrections are appreciated. Thank you for your time.
>
> Regards,
>
> Ingo
>
>   


Nice job, Ingo

The technique brings new thinking to the dilemma that plagues many and 
is a welcome addition to the "war chest."
It is well written, relatively easy to understand (even I get it), and 
the illustration and examples drive home the message perfectly.

Thank you!

Best,
~dL


-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Collapsing blocks within floats

[Barney Carroll]

I've hit this problem before, but have always ended up using deplorably 
complicated workarounds to avoid it.

How can I avoid block elements inside floated blocks collapsing to the 
minimum height?

I am using a two column setup (navigation and content) as follows:

div#column-left
{
float: left;
margin: 0;
padding: 8px 0 0 0;
width: 10em;
}

div#column-right
{
float: left;
margin: 0 0 0 -10em;
width: 100%;
}

But within the right column is all the content housed in a Plone CMS 
structure of divs, and it collapses to 0 height, leaving me with no 
content. What's going on?


Thanks,
Barney


PS: I know all about the semantic ids debate - these are for 
illustration purposes only.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Ray Leventhal]

Ingo Chao wrote:
> Hi,
>
> this draft
>
> http://www.satzansatz.de/cssd/companions.html
>
> introduces a technique for equal heights aspect of columns.
>
> Comments and corrections are appreciated. Thank you for your time.
>
> Regards,
>
> Ingo
>
>   
Hi Ingo, et al,

A really concise and interesting presentation of truly requisite knowledge!

Thank you (again!) for sharing the wealth.

Best regards,
~Ray
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Ingo Chao]

Alex Robinson pointed me to a similar, very interesting layout by Paul 
O'Brien:
http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css

Thanks!

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Jason Crosse]

On 09/07/2007 08:03, Ingo Chao wrote:
> Hi,
> 
> this draft
> 
> http://www.satzansatz.de/cssd/companions.html
> 
> introduces a technique for equal heights aspect of columns.
> 
> Comments and corrections are appreciated. Thank you for your time.
> 
> Regards,
> 
> Ingo
> 

Great, thanks Ingo. 

I really appreciate you spending the time to bring together several techniques 
and adding your own thinking - it's people like you who really help push the 
web  forward with these techniques and in the process help thousands of other 
developers.

-- 
http://antanova.blogspot.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] page check :: ~dL

[Ray Leventhal]

David Laakso wrote:
> I get frequent reminders from the guy that the thing [1] is supposed to 
> work in all versions of win/ie.
> Comments, suggestions, and links to an "anger management" seminar 
> appreciated.
> Thanks.
>
> [1]  
>
> Best,
>
> ~dL
>
>   
Hi David,

The layout looks good in Win: FF1.5/2.0 IE 6/7.  In WinFF 2.0, the link
for GF Safe Lists shows GF underlined.  Not so in my view in FF1.5 or IE
6 or 7.

Linux FF 1.5/20, no issues, all appears well.

Looked in Linux Konqueror as well, no issues.

A site check is, I feel, the least I can do...having garnered and put
into use *so* many of the things I read on this list.  It's amazing how
many of those things are made better/easier/more understandable because
of your posts.

Thanks and best regards,
~Ray
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] page check :: ~dL

[David Laakso]

Ray Leventhal wrote:
> David Laakso wrote:
>   
>> [1]  
>>
>> Best,
>>
>> ~dL
>>
>>   
>> 
> Hi David,
>
> The layout looks good in Win: FF1.5/2.0 IE 6/7.  In WinFF 2.0, the link
> for GF Safe Lists shows GF underlined.  Not so in my view in FF1.5 or IE
> 6 or 7.
>
> ~Ray
>   
Ray, thanks for bringing the acronym element issue to my attention. I had not 
noticed this and will correct it.

Best,

~dL



-- 
http://chelseacreekstudio.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Joel D Canfield]

> http://www.satzansatz.de/cssd/companions.html
> 
> introduces a technique for equal heights aspect of columns.

I'll have to come back and give it a thorough read rather than just
scanning, but I have to say, this graphic

http://www.satzansatz.de/cssd/companions/co-pedestal.png

is a spectacular example of informational illustration. Without it, the
article might have become an incomprehensible blur to me, with my
rudimentary understanding of CSS. The illustration makes the entire
concept obvious and now I'm burning to try it. Thanks ever so much.

joel
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] with fixed width, but auto height

[James Gadrow]

Bartłomiej Kozielski wrote:
> what must I do for the textbox to automatically set its height depending on
> the number of lines in it? Is there any CSS rule?
No rule via number of lines, (well, perhaps if you calculated the height of 
each line in the textbox and applied it.. but would probably be inconsistent 
between browsers) however, the 'rows' attribute of the textarea (which may be 
required anyway, depending on your doctype) would perform exactly what you're 
trying to do. And since you're already using PHP...

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem with paragraphs and headers

[Mark Wheeler]

Hi all,

I'm trying my first liquid layout and have run into a  couple of  
snags. Forgive me if I'm totally going about this the wrong way, but  
I had to start somewhere. First, here are the links:

http://dev.tonedeafdesign.com/ob/test.html
http://dev.tonedeafdesign.com/ob/css/global.css

The problem is that there is a space above and below my #main_content  
div when I place a  or an  tag in the first or last part  
of  the content. This is happening in IE6, IE7, FF and Safari. The  
weird thing is when place a visible border around #main_content, that  
all goes away and things act as I expected. So what am I missing  
here? Below is the css for the #main_content div. Uncomment the  
border to see what I mean.

#main_content {
/*  border: 1px solid red;*/
margin-left: 170px;
line-height: 150%;
}

Any help is appreciated.

Thanks,

Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Normal bulleted lists... with smaller bullets

[Complex]

There's at least one thing I don't know how to do well with bulleted
lists. I would like to make normal unordered (bulleted) lists using
smaller bullets. I'd really like the smaller bullets to increase in
size when you increase the text size -- just like the default bullets,
only smaller. I'd love to make the bullet the same size as the •
character (yes, it's smaller than UL bullets, I don't know why!)

Compare:


one
two
three


with
• one
• two
• three

I want to get bullets the size of the second example, but using a real
bulleted list.

The only method I know is to set all unordered lists to use images for
bullets, and use an image of a smaller bullet. But that image won't
increase in size when the reader increases their browser's font size.

Help, anyone?


-- 
--> CC <---
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] What is happening to my navbar in IE? Very strange problem.

[Brooke Nelson]

Help! What is happening to my navbar in IE?

A big space appears between the first letter and the rest of the
letters of each link. For example: It should be "Contact" but looks
like this: "C[big space]ontact"

Here is a screenshot which show what it looks like in Firefox
(correct) and IE (wrong!) -
http://moon4schools.com/test/screenshots.gif

Here is the page: http://moon4schools.com/test/index-test.html

And the css: http://moon4schools.com/test/style.css

This is so strange, please help!

Brooke
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] What is happening to my navbar in IE? Very strange problem.

[Brooke Nelson]

Well, I think I may have fixed it, although I cannot understand what
was going wrong...


All I did was change one thing in the CSS styling the navbar:

>From my CSS - all I did was change the background-color of the ul to
transparent. How would that have been causing that problem??


/* ==Main horizontal navigation menu=== */

#vdividermenu {
margin: 0;
padding: 0;
}

#vdividermenu ul{
margin: 0;
padding: 0;
margin-bottom: 1em;
float: left;
font: bold 10px verdana;
width: 100%;
height: 26px;
background-color: transparent;
/*background-color: #fbe20d;*/
line-height: 26px;
}

* html #vdividermenu ul{ /*IE only rule, reduce menu width*/
width: 99%;
}

#vdividermenu ul li{
display: inline;
}

#vdividermenu ul li a{
float: left;
color: black;
padding: 0px 12px;
text-decoration: none;
background: transparent
url(http://moon4schools.com/images/vertical.gif) top right no-repeat;
height: 26px;
}

#vdividermenu ul li a:visited{
color: black;
}

#vdividermenu ul li a:hover{
color: black;
background-color: #ff;
}


On 7/9/07, Brooke Nelson <[EMAIL PROTECTED]> wrote:
> Help! What is happening to my navbar in IE?
>
> A big space appears between the first letter and the rest of the
> letters of each link. For example: It should be "Contact" but looks
> like this: "C[big space]ontact"
>
> Here is a screenshot which show what it looks like in Firefox
> (correct) and IE (wrong!) -
> http://moon4schools.com/test/screenshots.gif
>
> Here is the page: http://moon4schools.com/test/index-test.html
>
> And the css: http://moon4schools.com/test/style.css
>
> This is so strange, please help!
>
> Brooke
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Alan Gresley]

Ingo Chao wrote:

> Hi,
>
> this draft
>
> http://www.satzansatz.de/cssd/companions.html
>
> introduces a technique for equal heights aspect of columns.
>
> Comments and corrections are appreciated. Thank you for your time.
>
> Regards,
>
> Ingo

Hi Ingo and fellow contributors, well done!

Give me a few years to catch up with CSS or is it my understanding of the CSS 
involved when tired.

What you have created is brilliant, you have twisted back underneath part of 
the document tree and now that allows for something not possible by a non 
companion method. Having a companion method allows you to now add opacity to 
the document background in an amazing way, by having background colours or 
images that exist in transparent layers within the space between the stacker 
and the pedestal, and most importantly, a technique that doesn't effect the 
page content. Playing around with the z-indexes and having extra nested divs, 
well wait and see, a whole new chapter in web design.

Kind Regards, Alan
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] What is happening to my navbar in IE? Very strange problem.

[Ingo Chao]

Brooke Nelson wrote:
> Well, I think I may have fixed it, although I cannot understand what
> was going wrong...
> 
> 
> All I did was change one thing in the CSS styling the navbar:
> 
>>From my CSS - all I did was change the background-color of the ul to
> transparent. How would that have been causing that problem??

I cannot reproduce the problem, with or without your fix. Can you please 
provide a link to a page that shows the error?

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Brooke Nelson]

I haven't had time yet to read through it thoroughly, but the
illustrations are fantastic!!

On 7/9/07, Ingo Chao <[EMAIL PROTECTED]> wrote:
>
> Hi,
>
> this draft
>
> http://www.satzansatz.de/cssd/companions.html
>
> introduces a technique for equal heights aspect of columns.
>
> Comments and corrections are appreciated. Thank you for your time.
>
> Regards,
>
> Ingo
>
> --
> http://www.satzansatz.de/css.html
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[James Gadrow]

I'm actually putting this to use today. It's a REALLY simple concept and 
I'm surprised no one (well, references aside :p) thought of it before! 
Hopefully, if all goes well I may be able to post a test of this in 
action! :)

-- 
Thanks,

Jim

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Bottom Chunk of Site Content Not Showing in IE6

[cj]

On 7/8/07, Jade True <[EMAIL PROTECTED]> wrote:
> I'm working on http://www.zencart137.jadetrue.com.
>
> I recently made some changes as I wanted the site to be source
> ordered; now I'm using some absolute positioning, and for some
> unbeknownst reason, IE6 isn't scrolling all the way down the page.


have you looked at the unscrollable content or guillotine bugs yet?

http://www.positioniseverything.net/explorer/unscrollable.html
http://www.positioniseverything.net/explorer/guillotine.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Normal bulleted lists... with smaller bullets

[Jukka K. Korpela]

On Mon, 9 Jul 2007, Complex wrote:

> There's at least one thing I don't know how to do well with bulleted
> lists. I would like to make normal unordered (bulleted) lists using
> smaller bullets.

You're not the only one with the problem, and I'm afraid there's no one 
with a solution.

It's possible to set things up so that default bullets are suppressed and 
author-specified characters are presented instead using generated content 
(and :before pseudo-elements). The bad news is that on IE, even on IE 7, 
the first suggestion is obeyed and the second is not, resulting in a list 
with no bullets or other markers.

> • one
> • two
> • three
>
> I want to get bullets the size of the second example, but using a real
> bulleted list.

I'm afraid it's not possible. Well, you _could_ use • ... 
with list-style-type: none, though that would result in double bullets 
when CSS is off.

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

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Normal bulleted lists... with smaller bullets

[Brian Cummiskey]

Jukka K. Korpela wrote:
> On Mon, 9 Jul 2007, Complex wrote:
>
>   
>> There's at least one thing I don't know how to do well with bulleted
>> lists. I would like to make normal unordered (bulleted) lists using
>> smaller bullets.
>> 
>
> You're not the only one with the problem, and I'm afraid there's no one 
> with a solution.
Correct me if i'm wrong, but wouldn't something like this work:


li { font-size: .6em; line-height: 2em; }
li span {font-size: 1em; }



Normal text, small bullet



Surely, it adds another (useless) tag, but solves the :after issue Jukka 
brings up.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Suckerfish Challenge

[Alan Gresley]

Jennifer Knowles wrote:

> I am preparing a site for a redesign.  
>
> I have a basic "Son of Suckerfish" experiment here
> http://www.thecentersd.org/navtest.html
> and the problems I am facing should be obvious.  I need the sub-item
> ul's to be wide enough not to wrap (I have specified 10em per the
> original Son of Suckerfish on html dog which is too short) but as it is
> they are already too wide for my top level (I only have 786 pixels to
> work with)
> I have never tried anything like this with Suckerfish before and I am
> wondering if it is even possible. (I admit I am over my head.)  I have
> assigned ids for all of my top level li's as well as all sub-menu ul's.
> What I am thinking is I can specify the width of each of the different
> nav items and but then is there a way that I can make the top level li's
> evenly spaced as they are on the current menu?
> Any help is really appeciated!!!

Hi Jennifer

For IE7, you already have a the IE7 re-calculated offset bug and your are 
halfway there to a sticky hover bug. Have you tested in IE7 yet and noticed 
that nothing happens? See this page for an explanation.

http://css-class.com/articles/explorer/sticky/stickybug4.htm

You can use a percentage or use a bug fix (see the main article). I believe 
that the menu contains to many items to function properly. The beauty of the 
sons of suckerfish menus is that the text can be resized. I have added another 
demo to my site showing a menu with fixed width top menu items.

http://css-class.com/articles/ursidae/bears5fixedwidth.htm

To have the top level li's evenly spaced, you need to change your 10ems to 
pixels since you want a fixed width page, but check with text resizing. I do 
recommend browsing around for many good examples of these types of CSS menus 
and do many test across browserland. Would I use one myself? most likely not. 
:-)

BTW, those ids are just adding unnecessary markup to the code, unless they are 
used as page markers.

Kind Regards, Alan

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Normal bulleted lists... with smaller bullets

[Complex]

Yes, this was Jennifer Ham's solution, too.

It looks like a working solution. Good, except for the extra span
tags. Since I'm working in a collective environment, I think asking
for extra span tags might not be workable; on the other hand, that
might be the solution to take.

One note for both you and Jennifer: I haven't tested it extensively
yet, but so far it looks like you have to increase the font size. For
example:

ul {font-size: 0.5em;}
li span {font-size: 1em;}

makes everything half size; 1 em for the li is now half of the default em. Ummm.

So instead set

ul {font-size: 0.5em;}
li span {font-size: 2em;}

and now we've returned the list text to its normal size.

Maybe putting list items in spans *would* be workable; its definitely
still better than the old HMTL currently in place.

thanks!

if anyone has better solutions, please don't hesitate to propose them!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Resizing leads to big trouble in little china

[David Hucklesby]

On Mon, 9 Jul 2007 09:49:56 +0800, Edward Spodick wrote:
> Hello all!
>
> I have been working on a design mockup - a copy of which is now at
> http://lbzm02.ust.hk/pagetest/mockup2.html
>
> Currently it validates for css and xhtml 1 transitional, and people here are 
> mostly
> very happy with it.
>
> The big problem I am trying to eliminate is the moving/pushing down of much 
> of the main
> right column if the window is smaller or the font-size is larger - in IE and 
> FireFox
> and others.  Clearly I have a conflict somewhere, but I cannot find it. ...

Hi Edward,
You have widths in pixels and padding in EMs. I think that is what is 
causing your float to drop when the text is enlarged. The EMs are added 
to the defined width.

Also, you have a min-width defined in EMs for #tabsTable. This, too,
is conflicting with your (mostly) pixel-sized layout. I think you'd be
better off deciding between pixel sizes or EM sizes for your layout,
and sticking with one or t'other.

Cordially,
David
--

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Companion column method

[Ingo Chao]

Thanks to all for sharing your impressions!

If you are testing the experimental method: let me know if you've 
encountered major problems - and how you've fixed them :)

There is a glitch with the correct vertical alignment of the companions 
in Opera < 9 in some of the examples, they do not start exactly at the 
same level.

And I am of course interested in seeing your modified layouts and 
designs. Please send them offlist, thank you.

Regards,

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Normal bulleted lists... with smaller bullets

[Jukka K. Korpela]

On Mon, 9 Jul 2007, Complex wrote:

> It looks like a working solution.
- -
> ul {font-size: 0.5em;}
> li span {font-size: 2em;}

I'm probably missing something, but I cannot see the effect, using e.g. 
default settings on IE. The bullet size is the same, independently of the 
font size of the li element or the ul element. This is explainable (though 
not really acceptable) on the grounds that the bullets are not textual 
content but part of rendering style. To puzzle us more, if the font size 
is changed (e.g. to Smaller) in IE's font size menu, the bullet size is 
modified too.

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

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CSS image rollovers

[George Vernon]

On 7/5/07 2:43 PM, "Mark Finney" <[EMAIL PROTECTED]> wrote:

> Is there a way to change the image in one div by clicking a link in another
> using purely css?  What should I be searching for to find this?


The best link for this I have found from:
http://wellstyled.com/css-nopreload-rollovers.html


George
http://georgevp.net

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Footer alignment problem

[Abduraoof T]

Hi friends,

I'm new to this mailing list.
I've been struggling with this footer alignment problem for more than a day,
tired of different combinations such as* auto*, *absolute*, *100%* etc

The structure of my page is as follows


 


 

  
Content

  



  




My content text enclosed in *item_div* has a varying height(retrieving from
DB)


1) I want to keep my *footer* aligned at bottom.
2) I want to stretch my *center_col * to the full height of window even when
the content is too small.
3) After all cross-browser compatible.

Link to my demo page is
FooterPos.htm
and that of CSS is km.css 

Any help would be appreciated.

Thanks and regards,
raoof
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Avoiding Bugs and Hacks, Any Resources?

[Victor B. Gonzalez]

-BEGIN PGP SIGNED MESSAGE-
Hash: SHA1

Hello all,

Is there an authoritative resource on how to *avoid* bugs and hacks?
Granted, I am certain there might be some very legitimate reasons to
*not* avoid them but in my case, about ready to approach the drawing
board, I wish to avoid them completely (if possible).

I am opened to alternative markup strategies and do not mind extra divs,
spans, etc. I am aware of div-itis, span-itis, id-itis, class-itis, and
all the other-itises out there (I hope). I wish to refer to what I want
as alternative markup because I am also opposed to semantic-itis.

I understand the semantics from a to z-index. I plan on working in
strict mode and really do not mind solutions that may require extra
divs, spans, negative margins, etc. As long as it is valid and can be
made semantic I am all ears.

Thank you for your understanding. Any help is appreciated!

- --
Best Regards
Victor B. Gonzalez

-BEGIN PGP SIGNATURE-
Version: GnuPG v1.4.6 (GNU/Linux)

iD8DBQFGjmhkLS+HVvcAElURAqY2AJ0XpFXx6u+UeZ1L5BH3RWq4OOBZqQCgllK4
6EJckCDDwkqPX2UCx6YIuTk=
=bvL8
-END PGP SIGNATURE-
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Left 50% margin- 497

[Colin Mcgarry]

Looking at the css of a website I was visiting i noticed the following 
page layout.

#page { 
position: absolute;
width: 994px;
left: 50%;
margin-left: -497px;
}

I can follow the logic of this but is it better than
left 0
margin 0




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Viewport width vs. 100% page width

[tsooki.com]

Hi

When I resize the browser so that it is smaller than the content, I get 
a horizontal scroll bar. The problem is, the banner at the top fits to 
the viewport width, not the content width. I've played with the width 
values but can't get it to work.

What's the best way to make sure all elements that are supposed to be 
100% of the content really are? Let me know if I am doing something 
wrong. Thanks!

-Laurence


#wrapper {
 margin: 0;
 padding: 0;
 width: 100%;
}
#header {
position: absolute;
top: 0; left: 0;
 width:100%;
 height: 125px;
}
#banner {
 position: absolute;
 top: 0;
 left: 0;
 height: 100px;
 width: 100%;
}
#toolbar {
 position: absolute;
 top: 101px;
 left: 0;
 height: 25px;
 width:100%;
 min-width: 800px;
}
#columnwrapper {
 position: static;
 padding: 0;
 margin: 0;
 min-width: 800px;
 min-height: 600px;
 clear:both;
}
#mainnav {
 float: left; width: 150px; left: 0;
}
#contentwrapper {
 position:absolute;
 left: 150px;
 top: 125px;
 min-width:650px;
}
#content {
 margin: 0 auto 0 0;
 padding: 10px 15px 15px 15px;
 clear: left;
}




 
 
 
 


 
 
 
 
 





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Aligning an img element with an input element?

[George Bills]

Hi all.

I have the following html / css:
http://www.w3.org/TR/html4/strict.dtd";>
example

img { border: none; }
p { border: 1px solid black; }
* { margin: 0; padding: 0; }



http://validator.w3.org";>
http://www.w3.org/Icons/valid-html401";
 alt="Valid HTML 4.01 Strict">




When displayed, the bottom of the  is above the bottom of the 
. It looks like the  aligns to the top of the enclosing  
(given a black border for identification), and the  aligns to the 
bottom of the enclosing . I would like them to display such that they 
are both on the same "line" - the bottom of the  is at the same 
horizontal row as the bottom of the . It doesn't appear to be a 
margin or padding problem, as both are set to 0. There does seem to be 
some whitespace under the  and inside the , but I don't know if 
that's the problem, and I don't know how to remove it if it is.

The following things seem to work as fixes, but seem ugly:
* Putting the  /  elements inside individual table cells.
* Giving the  elements a margin-bottom of around 5px.

Does anyone know why this is happening, and/or what the fix would be? 
Thanks for any advice.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How can I put 2 columns inside this div?

[Allan Douglas]

Hi Alicia,

At Ruthsarian Layouts Tank! there is a two column css that can be  
used in any element. I have used this in some of my pages & it seems  
to work & play with all the browsers.

Variations of it are in www.vtneaprofessionalprograms.org. The 3  
boxes in the center are using a 3 column variation.

Allan
DDGraphics WebMedia
25 Nash Road
Cummington, MA 01026
(413) 634-5372
Skype: allanddg
[EMAIL PROTECTED]


When confronted by a difficult problem, you can solve it more easily  
by reducing it to the question, "How would the Lone Ranger handle this

On Jul 9, 2007, at 2:12 AM, Alicia Morgan wrote:

> Hi all -
>
> I'm sorry to repeat my question, and it was my bad for not realizing
> you can't embed links in text on this list, but I can't seem to
> figure out how to do this right - the content in the columns always
> busts out of the surrounding div when I try to have 2 columns  
> inside it.
>
> When it's just a div with content (no columns) the div stretches to
> fit the content. When I put one column to the left (relative) with a
> fixed width, both the column div and the surrounding content div
> stretch to fit the content, without the column going outside the
> content div.
>
> But if I try to put 2 div columns in underneath the h1 and h2 (which
> stretch across the div and are flexible) , all bets are off. I tried
> to make both columns relative, but then they only stack up on top of
> each other - I would like them side by side. If I keep the right
> column div absolute, they stay side by side but the right-column div
> goes out of the containing content div.
>
> As I mentioned before, I used Eric Meyer's complexspiral as a
> starting point and adapted it, but I'm not sure what else to do if I
> want those columns. I know that he uses negative margins, but I don't
> understand how they actually work and what they accomplish.
>
> Here's the style sheet  for the page:
>
> body {background: #2c3031 url(images/bree-bg.jpg) 0 0 no-repeat  
> fixed;}
> div#content {background: #2c3031 url(images/bree-fade.jpg) 0 0 no-
> repeat fixed;}
> div#links a {background: transparent url(images/bree-fade.jpg) 0 0 no-
> repeat fixed;}
> div#links a:hover {background: transparent url(images/bree-wash.jpg)
> 0 0 no-repeat fixed;}
>
> Here's the code for the page:
>
>
>"http://www.w3.org/TR/REC-html40/strict.dtd";>
> 
> 
>
> Multimedia
>
>  type="text/css" media="screen">
>
> 
>