Re: [css-d] Faux column - check on high res please + accessibility problems

2008-09-12 Thread Gunlaug Sørtun
Luc wrote:

> [1] I'm using the faux column technique to achieve the following:
> 
> avoiding  that  on high res monitors the borders are stretched all
> the way  down  the viewport regardless the content. In other words,
> to avoid  e.g.  putting a bottom border on the wrapper so users know
> it's "the end". I'm assuming that this technique is the 'easiest' 
> x-browser.
> 
> Could somebody check for me if the borders stretch until the bottom 
> of the viewport on high res (above 1440 x 900) and that the footer 
> sticks to the bottom?

Border stretches down. Footer stays below content.

You can check this yourself by zooming down in Opera and/or Firefox.
Page-zoom: 20% in Opera should give you a clear picture.

> [2] Besides that i have a huge accessibility problem:
> 
> The page falls apart on:
> 
> Mozilla 1.7.13 : at 200%
> 
> IE6 and IE7 also
> 
> Opera is ok at + 300% and Firefox also with 8 times ctrl +

Page-zoom, yes. Font-resizing, no.

> How do i resolve that? Has this to do with the widths applied on the
> #contentleft and #contentright? Seems weird that 2 out of 6 get it
> right (but hey, what do i know?).

Page-zoom scales, font-resizing doesn't.

Better go back to using "all px" for dimensions, margins and paddings,
as mixing px and em as you do now rarely ever works well.

> [3] And  to  top  it  all off, after changing the width on those divs
> from pixels  to  ems,  the  left  and  right borders on the li items
> didn't stretch  anymore until the bottom-border. Adding the height:
> 1%; trick on  the  #navcontainer  li resolved that but as a result,
> the distance between the li are 2px wider in IE as opposed to Opera,
> Moz and FF. Do i have to feed IE 6 and IE 7 other paddings through a
> hack for this?

See above.

> http://www.dzinelabs.com/sandbox/MP/Pages/original.html

regards
Georg
-- 
http://www.gunlaug.no
__
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] Faux column - check on high res please + accessibility problems

2008-09-12 Thread Luc
 Good afternoon list,

 A few snags, i'm running in:

[1] I'm using the faux column technique to achieve the following:

avoiding  that  on high res monitors the borders are stretched all the
way  down  the viewport regardless the content. In other words, to
avoid  e.g.  putting a bottom border on the wrapper so users know it's
"the end". I'm assuming that this technique is the 'easiest'
x-browser.

Could somebody check for me if the borders stretch until the bottom
of the viewport on high res (above 1440 x 900) and that the footer
sticks to the bottom?

[2] Besides that i have a huge accessibility problem:

The page falls apart on:

Mozilla 1.7.13 : at 200%

IE6 and IE7 also

Opera is ok at + 300% and Firefox also with 8 times ctrl +

How do i resolve that? Has this to do with the widths applied
on the #contentleft and #contentright? Seems weird that 2 out of 6
get it right (but hey, what do i know?).

[3] And  to  top  it  all off, after changing the width on those divs from
pixels  to  ems,  the  left  and  right borders on the li items didn't
stretch  anymore until the bottom-border. Adding the height: 1%; trick
on  the  #navcontainer  li resolved that but as a result, the distance
between the li are 2px wider in IE as opposed to Opera, Moz and FF. Do
i have to feed IE 6 and IE 7 other paddings through a hack for this?

http://www.dzinelabs.com/sandbox/MP/Pages/original.html

css embedded

-- 
Best regards,
 Luc

 

Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"And how is 'education' supposed to make me smarter?" - The Simpsons.



__
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] ie/6.0 right-side of right col clip <600 window

2008-09-12 Thread David Laakso
Gunlaug Sørtun wrote:
> David Laakso wrote:
>> Now what  I'll do? Affected selector is .four. 
>> 
>
> .one {overflow-x: hidden;}
>
> ...and this will go a long way towards keeping all columns inside the
> clipping .wrapper even in IE6.
>
>
> * html #nav ul li {width : 25.1%; margin-right: -.2%;}
>
>
> regards
> Georg (and Molly 't.c.')



Excellent! Done deal. Thanks.

Best,
Melinda (and Bill)

PS
We decided to feed .one {overflow-x: hidden;} to IE/6 only.  Mac Safari 
objects. At least for now. But we could be wrong, and often are...



-- 

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] [Slightly OT] Font sizes

2008-09-12 Thread David Laakso
Michael Adams wrote:
>
>
> These are great and may take me a day or two to work through. 
>
> It is
> the graphics designer in us all that want's to reduce the font size
> because we feel it makes the page look tidier. 



A day or two? What's wrong with right now? Let go.




-- 

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] Unwanted margin in IE7 when applying border to an image

2008-09-12 Thread Tim Dawson
Bobby Jack wrote:
> --- On Fri, 9/12/08, Simone Haider | Nullstars <[EMAIL PROTECTED]> wrote:
> 
>> 2008/9/12 Tim Dawson <[EMAIL PROTECTED]>
>>> No problem in FF3, but IE7 is introducing extra space (margin ?) above
>>> the border.  I've not tried IE6 yet.
> 
>> Perhaps you should try "display:block;" for the two images. Otherwise they
>> will be displayed as inline elements.
> 
> If you're aligning other elements alongside the image, this might not be
> ideal. You could also check out "vertical-align: bottom" on the image - see
> the following for a bit of info.
> 
> http://www.fiveminuteargument.com/image-space
> 
Thank you, both.  'display: block;' seems to have done the trick for IE7 at
least. The images are the full width of the page, so there's nothing to display
beside them.

Tim Dawson

-- 
Tim Dawson
Maolbhuidhe
Fionnphort
Isle of Mull  PA66 6BP

01681 700718
__
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] [Slightly OT] Font sizes

2008-09-12 Thread Gunlaug Sørtun
Michael Adams wrote:

> I have in this last week come across the idea that the last word on 
> web site design perhaps should be given to the typographer, not the 
> graphics designer. This is probably a concept that you CSS Gurus are
>  familiar with, but it is new to me.

Graphic designers can ruin any web design in their attempt to make it
"perfect". It pays to expose designs to real-world challenges - before
they are released.

> It may also be one that i was unknowingly using given that my 
> websites are mainly using WCAG techniques within the markup and CSS 
> (the issue i am raising here is an accessibility one of setting body
>  font at 100% with all other font settings in Ems). It is the
> graphics designer in us all that want's to reduce the font size
> because we feel it makes the page look tidier.

I think one may be allowed to ask: "tidier in who's browser?"
Your accessible font-size settings look reasonable. However, I've seen
so many layouts blow apart in my browsers, that I'll just throw in my
thoughts on the issue, for good measure...



regards
Georg
-- 
http://www.gunlaug.no
__
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] border of relatively positioned container div ignores contained absolutely positioned div

2008-09-12 Thread Gunlaug Sørtun
Michael Leibson wrote:

> It's amazing how much CSS one can forget in a few months!   I'm sure 
> there's a very simple answer to this -- but I've forgotten it!

Happens at times.

> My containing div has a border.  It also contains three other divs: 
> two that are within the normal flow, and one (class="rightside") that
>  is absolutely positioned.  Rather than figuring the 
> absolutely-positioned div in its own border calculations, the 
> containing div's border ignores it.
> 
> 1) Why?

You mean: "absolute positioned elements take up no layout-space" ?

Well, they don't, so the .rightside element has no impact on
.container's dimensions, and will overflow.

> 2) The proper way around this CSS fact-of-life?

We would most often float .rightside and _contain_ the float. Maybe this
way...



> http://members.distributel.net/~leibson/tests/border_problem.html

BTW: is it your intention to trigger quirks mode in all browsers...



...or did you just paste in the wrong doctype declaration for this
test-page by mistake? Mode will affect a few things - especially in
IE/win, but doesn't affect how A:P works.

regards
Georg
-- 
http://www.gunlaug.no
__
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] [Slightly OT] Font sizes

2008-09-12 Thread Michael Adams
On Thu, 11 Sep 2008 17:13:45 -0400
Felix Miata increased personal carbon footprint by exciting electrons
the world over with these memorable words:

> On 2008/09/12 08:41 (GMT+1200) Michael Adams composed:
> 
> > On Wed, 10 Sep 2008 17:12:01 -0400
> 
> > David Laakso increased personal carbon footprint by exciting
> > electrons the world over with these memorable words:
> 
> >> Michael Adams wrote:
> 
> >> > Does anyone have a good article, and/or a reference to WCAG, that
> >i> > can use to support the idea that default text size should not be
> >> > less than the browser default.
> 
> > >> A Dao of Web Design
> >> 
> 
> > Not sure i can use this one as a reference. It is designed for us to
> > read and learn from. Plus it does not conform to 100% body text
> > size.
> 
> Would be good if its CSS was consistent with its message.
> 
> >> 100e2r
> >> 
> 
> > This is great and has many worthwhile comments
> 
> I thought so too when it was first published, but it later changed its
> site styles and no longer practices what it preaches. Several weeks
> ago I started a rewrite of it that isn't finished and may never be.
> http://fm.no-ip.com/auth/tmp/new100e2r.html
> 
> You might want to look through the following, where you might find a
> link to something appropriate to those artists but doesn't use
> mousetype to convey an inconsistent message:
> 
> http://fm.no-ip.com/auth/wauth2.html
> http://fm.no-ip.com/auth/wauth1.html
> http://fm.no-ip.com/auth/refmarks.html
> 
> Among them, http://tobyinkster.co.uk/article/web-fonts/ is my recent
> favorite, while http://www.w3.org/QA/Tips/font-size ought to be more
> authoritative, and http://www.lighthouse.org/accessibility/top-10/
> arguably a good business approach. http://cssliquid.com/ might be
> something to point those with an artistic priority to.
> 

These are great and may take me a day or two to work through. 

I have in this last week come across the idea that the last word on web
site design perhaps should be given to the typographer, not the graphics
designer. This is probably a concept that you CSS Gurus are familiar
with, but it is new to me. It may also be one that i was unknowingly
using given that my websites are mainly using WCAG techniques within the
markup and CSS (the issue i am raising here is an accessibility one of
setting body font at 100% with all other font settings in Ems). It is
the graphics designer in us all that want's to reduce the font size
because we feel it makes the page look tidier. So the secret now becomes
designing the best looking website we can around the 100% font content,
which ends up being an exciting challenge in itself. I may post a case
study of the reasoning behind the website i am working on as an example
as this is what i am writing for the client.

Thankfully Eric has allowed this thread to continue to date, it does
involve CSS design principles, i hope many CSS designers are gaining
something from it. But i do expect it to dry up naturally soon, so
please bear with us or ignore the thread if you are not interested.



-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
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] overflow: auto does not behave as I thought it would

2008-09-12 Thread Olivier Sannier
Well, yes, if I remove the padding, it shows up in SeaMonkey, but I need 
the padding.

And I also checked the page on IE, it works just fine as I expect it to 
work.
The issue I'm having is with SeaMonkey, so I suspect it is also showing 
with FireFox 2

Anyone has any idea?

Thanks
Olivier

Susan Grossman wrote:
> On Wed, Sep 10, 2008 at 1:15 PM, Olivier Sannier <[EMAIL PROTECTED]> wrote:
>
>   
>> Hi all,
>>
>> I have a test page here:
>>
>> http://obones.free.fr/cssbox/
>>
>> The miniadmin box should contain links that are visible inside an inner
>> div that shows up a vertical scroll bar.
>> However, as it is, the links are not visible at all and I don't really
>> know how to make it behave the way I want.
>>
>> Any help would be much appreciated.
>>
>> Regards
>> Olivier
>>   I think the issue is in box-title h1   If you remove   padding: 10px;,
>> then the text is visible.(you have padding declared, which covers right,
>> and then padding-right declared again BTW)  There's probably another issue
>> since I don't know why.
>>
>> HTH
>>
>> Susan
>>
>>
>> --
>> Susan R. Grossman
>> [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/
>
>
>   


__
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] border of relatively positioned container div ignores contained absolutely positioned div

2008-09-12 Thread Michael Leibson
Greetings;

It's amazing how much CSS one can forget in a few months!   I'm sure there's a 
very simple answer to this -- but I've forgotten it!  

My containing div has a border.  It also contains three other divs:  two that 
are within the normal flow, and one (class="rightside") that is absolutely 
positioned.  Rather than figuring the absolutely-positioned div in its own 
border calculations, the containing div's border ignores it.  

1) Why?

2) The proper way around this CSS fact-of-life?

Here's where you can see the problem, and the css behind it:  
http://members.distributel.net/~leibson/tests/border_problem.html

Many thanks, in advance.

- Michael


  __
Ask a question on any topic and get answers from real people. Go to Yahoo! 
Answers and share what you know at http://ca.answers.yahoo.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 killing my l/h nav

2008-09-12 Thread Gunlaug Sørtun
Eric Heitz wrote:
> IE6 is adding more height to my l/h nav and is showing the rest of my
>  sliding images.

> http://www.kucia.com/bcs/BCS_08B/insights/index.html

Strengthen specificity on the individual list-item IDs, like so...

ul#insights_container li#audioVideo {...}

...as IE6 doesn't support max-height and therefore is locked onto...

ul#insights_container li {height:49px;}

...from higher up.

Once the specificity issue is solved, 'max-height' won't make a
difference in any browser. They will all obey individually declared
'height' on those list-items.

regards
Georg
-- 
http://www.gunlaug.no
__
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] HT Conditional CSS

2008-09-12 Thread David Hucklesby
On Tue, 09 Sep 2008 12:01:31 +0200, Luis Speciale wrote:
> Hi ;
>
> Looking for a way to make Opera behave in a certain manner, I googelised this
>
> http://conditional-css.com/
>
> Did you know about that ?
>

With new browsers coming out, and older browsers continually updated
to behave better, why would you do this? I would think it would be
more productive to file a bug report if you come across an issue,
rather than make a fix of your own that may become unnecessary
with the browser's next release, no?

A different matter if your site's visitors are using an old browser.
But in the case of Opera users, I think most of us keep fairly
up-to-date.

Cordially,
David
--

__
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 killing my l/h nav

2008-09-12 Thread Eric Heitz
IE6 is adding more height to my l/h nav and is showing the rest of my sliding 
images.

IE7 is displaying the l/h correctly and is okay on the mac side.

Any thoughts on why IE6 is extending the nav?

beta site here:

http://www.kucia.com/bcs/BCS_08B/insights/index.html

CSS: http://www.kucia.com/bcs/BCS_08B/css/main_new.css


Thanks
Eric
__
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] ie/6.0 right-side of right col clip <600 window

2008-09-12 Thread Gunlaug Sørtun
David Laakso wrote:
> Now what  I'll do? Affected selector is .four. 
> 

Cause is auto-expansion of .two. For testing (only), add...

* html .primary p {width: 100%; overflow-x: hidden; }

Difficult to add the usual fix for bad overflow-handling in IE6, since
.two has no declared width. You can however prevent .two from expanding
.one - which has a width - by declaring...

.one {overflow-x: hidden;}

...and this will go a long way towards keeping all columns inside the
clipping .wrapper even in IE6.

--

I'll also suggest using these styles...

* html #nav ul li {width : 25.1%; margin-right: -.2%;}

...to counteract IE6' weak percentage calculations. No flickering with
this - at my end at least.

regards
Georg (and Molly 't.c.')
-- 
http://www.gunlaug.no
__
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] ie/6.0 right-side of right col clip <600 window

2008-09-12 Thread David Laakso
Now what  I'll do?
Affected selector is .four.

Best,
Melinda
PS Correction, suggestion, or comment on any other issues I am not aware 
of at the moment are always welcome...




-- 

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/


css-d@lists.css-discuss.org

2008-09-12 Thread Aaron Gray
> Aaron Gray wrote:
>> ... IE, even IE 7 does not support CSS Child Selectors !
>
> As Philippe said, IE7 does in Standardsmode.
>
>> I was wondering whether there is a work around at all
>
> Does this help, including the comments section?
> http://meyerweb.com/eric/thoughts/2005/05/31/universal-child-replacement/
>
> But I think this is what David meant. You may have to upload a
> simplified reduction of the problem.

No I have tied that. The only thing that worked was to do all binary 
combinations for upto a certain depth but that was lengthy (doubleing in 
size for each new level) and would only work to a certain depth.

Aaron

__
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] separating submenu width from parent width

2008-09-12 Thread Gunlaug Sørtun
Richard Johnson wrote:

> Im working on the menu at www.eyetonline.com/terrafirma and on the 
> what we can do for you bit where it pops out I cant for the life of 
> me get the width to how I want it.. as you will see the text flies 
> off the end.

You can add any width-value you want to the submenu, by targeting it
down the selector-chain - like so...

#menuv li ul li a {width: auto;}

...and "auto" works well there too.

The submenu ends up out of reach when page is subjected to the slightest
font-resizing though. Mixing 'em' in with 'px' tends to cause such problems.

#menuv li ul {left: 100%;}

...will work better and keep the submenu in place.

regards
Georg
-- 
http://www.gunlaug.no
__
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@lists.css-discuss.org

2008-09-12 Thread Aaron Gray
> On Sep 11, 2008, at 4:03 AM, Aaron Gray wrote:
> 
>> ... only to find out the IE, even IE 7 does not support CSS Child  
>> Selectors !
> 
> IE 7 supports child selectors just fine. You document _must_ be in  
> standards mode, however (that is, start with a valid doctype).
> If your document lacks a doctype, then IE 7 behaves the same way a IE 6.

Ah ! DOCTYPE again, I must remember to do this.

Feeling silly.

Thanks,

Aaron

__
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] Table formatting and the 'empty-cells' property

2008-09-12 Thread Philippe Wittenbergh

On Sep 12, 2008, at 6:00 PM, Bobby Jack wrote:

> I'm a /little/ sketchy on exactly how to interpret "there is  
> vertical border-spacing on only one side of the row", but, at  
> minimum, I would expect an overall table height difference when  
> switching between 'hide' and 'show' values for this property.  
> Firefox and WebKit do not change the height at all, and I'm not sure  
> whether this is a misreading of the spec (certainly possible) or an  
> implementation issue (less likely, but equally possible!).
>
> For a demo, see:
> http://www.fiveminuteargument.com/table-formatting

As far as Gecko is concerned, it is considered a bug, atm.

Note that Opera 9.52 has exactly the same behaviour as Gecko and WebKit.

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/


[css-d] separating submenu width from parent width

2008-09-12 Thread Richard Johnson
Hi all, I can’t find a relative thread for predicament so here goes!

Im working on the menu at www.eyetonline.com/terrafirma and on the what we
can do for you bit where it pops out I cant for the life of me get the width
to how I want it.. as you will see the text flies off the end.. I don’t want
to change the width of the main menu on the left though if poss.
I think the main problem is I cant get the submenu to have its own defined
column width and the fact the page has two css scripts!

Css and html below


Richard.

Apologies if it’s a bit lengthy!








/* CSS Popout menuv */ /* THIS MENU IS JUST FOR THE WHAT WE CAN DO FOR YOU
HOVER MENU THE REST IS COMMANDED BY MM.CSS */

/* Fix IE. Hide from IE Mac \*/
* html #menuv ul li{float:left;height:1%;}
* html #menuv ul li a{height:1%;}
/* End */

#menuv a
    {
    width: 193px;
    display:block;
    padding-top:
0.1em;   /*
expands menu box vertically*/
    padding-bottom: 0.2em;  /* adds bottom border */
    white-space:nowrap;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #5C743D;
    }

#menuv a, #menuv a:visited /*
all menus at rest */
    {
    color: white;
    background-color: #5C743D;
    text-decoration:none; 
   /* removes underlines from links */
    }

#menuv a.parent, #menuv a.parent:hover /* attaches parent-arrow on all
parents */
    {
    background-image: url(nav_white.gif);
    background-position: right center;
    background-repeat: repeat-x;
    }

#navigation td
{  /* keeps it
in with other css menu (mm_health_nutr.css) */
    border-bottom: 1px solid #F4FFE4;
    }
    
#navigation a {
    color: #D5EDB3;
    line-height:16px;
    letter-spacing:.1em;
    text-decoration: none;
    display:block;
    padding:8px 6px 10px 20px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    }

#menuv a:hover   /* all
menus on mouse-over */
    {
    color:#993300;
    background-color: #99CC66;
    }
    
#menuv li
    {
    list-style-type:none;        /* removes
bullets */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    line-height: 16px;
    font-weight: bold;
    text-decoration: none;
    position: absolute;
    }

#menuv ul li
    {
    position:relative;
    }

#menuv li ul
    {
    position: absolute;
    top: 0;
    left: 19.84em;   
    /* distance from  left menu (this should be the same as width
value in #menuv [1]) above */
    display: none;
    }

div#menuv ul, #menuv ul ul, #menuv ul ul ul
    {
    margin:0;  
   /* keeps the menu parts together */
    padding:0;
    width: 100*;     /*
width of sub menus  (this should be the same as width value in #menuv [1])
above */
   
}   
    

div#menuv ul ul, div#menuv ul ul ul, div#menuv ul li:hover ul ul, div#menuv
ul li:hover ul ul ul
    {
    display: none;
    }

div#menuv ul li:hover ul, div#menuv ul ul li:hover ul, div#menuv ul ul ul
li:hover ul
    {
    display: list-item;
    }









**HTML**















http://www.w3.org/TR/html4/strict.dtd";>


Terra Firma Environmental Ltd



//--- LOCALIZEABLE GLOBALS ---
var d=new Date();
var monthname=new
Array("January","February","March","April","May","June","July","August","Sep
tember","October","November","December");
//Ensure correct for language. English is "January 1, 2004"
var TODAY = monthname[d.getMonth()] + " " + d.getDate() + ", " +
d.getFullYear();
//---   END LOCALIZEABLE   ---