[css-d] Beyond CC's, targeting Mozilla, Safari and Opera
Hi list, Currently I'm thinking about a consistent and simple method for CSS to target not only IE's but also Mozilla, Safari and Opera, each of them separately and standards compliant. Up to now the CSS language actually available for developing web sites is limited by the weakest browser to be supported (IE 6, IE 7). Many great techniques have been generated and documented by web developers to overcome bugs and shortcomings. These constrains will not go away for years to come. But if we had a method to target the most advanced browsers, we would be able to _add_ something new to the (technically) minimalistic approach dictated by MS. Web sites would then look differently in different browsers while functionally still equivalent (a must, I suppose). What are your pros and cons? Regards, Manfred __ 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] Laying out a form, adjacent graphic causing me headache
Darren Best wrote:
The desired look for the
form is to have the labels to the left of the data fields, the labels
right-justified, the data fields left-justified (pretty standard).
In markup, use a table with the labels in one column, the fields in
another. (This is the logical markup and also by far the easiest for
styling purposes.) E.g.,
table
trtd class=lbllabel for=nameYour name:/label/td
tdinput type=text id=name size=30 //td/tr
...
/table
In CSS, set text-align: right for the first column, text-align: left
(the default, but it does not hurt to specify it explicitly) for the
second, and vertical-align: top for both.
The class=lbl attributes wouldn't really be needed, since you could
use contextual selectors to refer to the first column, but they make it
easier to cope with IE 6 and older that don't support such selectors.
E.g.,
td { text-align: left; vertical-align: top; }
td.lbl { text-align: right; }
This approach does no create problems arising from floating, so the
adjacent graphic problem should vanish. Since you don't use any floating
to present tabular data in tabular appearance, you're free to use it for
other purposes, like floating the table as a whole or floating something
on the right side of it.
width: 100px;
Using a table, you also avoid such nasty problems (100px might not be
enough, for the user-selected font size, and anything you set might be
too wide too), since a browser automatically decides on column widths
that are just sufficient for the content.
Jukka K. Korpela (Yucca)
http://www.cs.tut.fi/~jkorpela/
__
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] Beyond CC's, targeting Mozilla, Safari and Opera
Manfred Staudinger wrote: What are your pros and cons? pros: none, or some very limited and short-sighted ones. con: anyone can disregard any browser - by choice or by lack of knowledge or interest. result: total anarchy - as if it wasn't bad enough out here already. Browsers should only be separated by their qualities and capacities, not by name or version. We already do that - it's known as progressive enhancement and drives browser-developers to constantly improve their products. That's what we want. All other attempts on separating browsers will be and/or already are counteracted by browser-vendors, as separation/targeting/versioning tend to break browsers instead of letting them do their job in an optimal way and keep on improving and competing on the (somewhat) leveled playing-field of standard compliance. 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] CSS Drop-Down in IE6?
Highpowered wrote: Victor Subervi wrote: On Thu, Apr 17, 2008 at 11:29 AM, Highpowered [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: IE6's lack of multi-elemental :hover support makes Javascript a necessity for any mouseover-triggered menu to work the same as it does in 7. Apologies if I am misinterpreting your question. That´s what I thought, but the above-mentioned page *does* work in IE6 w/o JS! Victor You're right. I usually don't delve too deeply into the MS proprietary stuff like .htc files, so I hadn't even thought about that. It does make sense to use a proprietary MS solution to a strictly MS problem. As far as I know, if it is using an .htc file, it is using Javascript (or whatever MS calls their version of it). It's just sitting there in the .htc file instead of a JS file. -- David [EMAIL PROTECTED] authenticity, honesty, community __ 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] identify all text elements and wrapping in screen width
hi, i have a requirement to wrap all text elements in the page to the screen width to improve readability on a small screen device like a mobile phone/pda. would like to know if this can be accomplished just with a user agent css - rule to identify all text elements - fit them to the screen width - layout of all other elements should adjust accordingly - any exceptions or usecases that cannot be addressed. thanks in advance for any inputs. regards, Zaheer __ 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] Laying out a form, adjacent graphic causing me headache
On 18/04/2008, Philippe Wittenbergh [EMAIL PROTECTED] wrote:
On Apr 18, 2008, at 2:56 PM, Darren Best wrote:
is there an
elegant solution staring me in the face that I just don't see? Thanks
in
advance.
.narrowForm {float:left; width 450px;}
and your problem is solved.
Well I asked for it!! (Is there a smiley that conveys joy and gratitude
whilst simultaneously smacking oneself on the forehead?)
Seriously, thank you so much!
Darren Best
__
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] identify all text elements and wrapping in screen width
You can use the declaration text-align: justify; on all textual elements, if that what you mean by your post. On Fri, Apr 18, 2008 at 2:09 PM, zaheer ahmad [EMAIL PROTECTED] wrote: hi, i have a requirement to wrap all text elements in the page to the screen width to improve readability on a small screen device like a mobile phone/pda. would like to know if this can be accomplished just with a user agent css - rule to identify all text elements - fit them to the screen width - layout of all other elements should adjust accordingly - any exceptions or usecases that cannot be addressed. thanks in advance for any inputs. regards, Zaheer __ 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] identify all text elements and wrapping in screen width
hi,
thanks for your reply. i think my problem is different. text-align:justify
would justify the text in the container that its in. so it does not solve my
problem where it should always wrap in the screen width (e.g. as google
search results do if you resize the window). i also need a way to identify
all text elements with a rules otherwise do i need to something like
div,span,p,marquee..{some rule }
thanks,
Zaheer
On Fri, Apr 18, 2008 at 5:53 PM, Usamah M. Ali [EMAIL PROTECTED] wrote:
You can use the declaration text-align: justify; on all textual
elements, if that what you mean by your post.
On Fri, Apr 18, 2008 at 2:09 PM, zaheer ahmad [EMAIL PROTECTED]
wrote:
hi,
i have a requirement to wrap all text elements in the page to the
screen
width to improve readability on a small screen device like a mobile
phone/pda.
would like to know if this can be accomplished just with a user agent
css
- rule to identify all text elements
- fit them to the screen width
- layout of all other elements should adjust accordingly
- any exceptions or usecases that cannot be addressed.
thanks in advance for any inputs.
regards,
Zaheer
__
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] identify all text elements and wrapping in screen width
zaheer ahmad wrote: i have a requirement to wrap all text elements in the page to the screen width That's what happens automatically, unless you do something to prevent it, provided that the text contains spaces (or other characters that allow a line break to be generated by a browser). So what is the problem, in practical terms? URL? If it's long words, then there's really nothin in CSS that helps, but inserting soft hyphens usually helps. would like to know if this can be accomplished just with a user agent css - rule to identify all text elements - fit them to the screen width - layout of all other elements should adjust accordingly - any exceptions or usecases that cannot be addressed. I cannot see what you mean. You don't need to identify anything to make text wrap. In a narrow window, images, tables, and long words will be problems, but they each need different treatment. Jukka K. Korpela (Yucca) http://www.cs.tut.fi/~jkorpela/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] CSS Drop-Down in IE6?
On Fri, Apr 18, 2008 at 3:33 AM, david [EMAIL PROTECTED] wrote: Highpowered wrote: Victor Subervi wrote: On Thu, Apr 17, 2008 at 11:29 AM, Highpowered [EMAIL PROTECTED] mailto:[EMAIL PROTECTED] wrote: As far as I know, if it is using an .htc file, it is using Javascript (or whatever MS calls their version of it). It's just sitting there in the .htc file instead of a JS file. The only files necessary are the html file and three css files. I whittled it all down to that. I don´t use any htc files. Victor __ 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] Drop-Down Menu In Table?
At 7:57 -0500 18.4.2008, Victor Subervi wrote: However, now I am perplexed by the problem of how to get it to work within a table. He says in the note This one also has problems with IE when used within a table. So you might want to try the more recent version: http://www.cssplay.co.uk/menus/final_drop.html Sorry, but I haven't tried these in a table. Cheers Martin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Drop-Down Menu In Table?
Hi; Another problem. In my earlier post asking for a css drop-down menu that works in both IE6 and IE7, I was appreciative to have been pointed to the following link: http://www.cssplay.co.uk/menus/dd_valid.html which does indeed work. However, now I am perplexed by the problem of how to get it to work within a table. In the table in which I would like it to work, I have a row above the menu, a td on either side and another row below. I could do away with the row below if necessary, but even if I just make a bare table: tabletrtd menu here /td/tr/table it won´t show any of the drop-downs. Any ideas? TIA, Victor __ 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] Drop-Down Menu In Table?
Victor Subervi wrote: http://www.cssplay.co.uk/menus/dd_valid.html which does indeed work. However, now I am perplexed by the problem of how to get it to work within a table. it won´t show any of the drop-downs. Any ideas? Victor Stacking context? [1] Put it on a public server with a clickable link to it [1] http://www.w3.org/TR/CSS21/zindex.html -- 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] Beyond CC's, targeting Mozilla, Safari and Opera
Manfred Staudinger wrote: Hi list, Currently I'm thinking about a consistent and simple method for CSS to target not only IE's but also Mozilla, Safari and Opera, each of them separately and standards compliant. Up to now the CSS language actually available for developing web sites is limited by the weakest browser to be supported (IE 6, IE 7). Many great techniques have been generated and documented by web developers to overcome bugs and shortcomings. These constrains will not go away for years to come. But if we had a method to target the most advanced browsers, we would be able to _add_ something new to the (technically) minimalistic approach dictated by MS. Web sites would then look differently in different browsers while functionally still equivalent (a must, I suppose). What are your pros and cons? Hi Manfred, As others have already said, there are no real advantages to browser detection and targeting. However, your idea of giving more advanced browsers more advanced CSS does have advantages. It's called progressive enhancement, and it's quite possible without browser detection. I suggest Googling progressive enhancement for more on the general idea, and reading the book Transcending CSS for in-depth teaching of how to design and develop web sites with a progressive enhancement mindset. (The author states the transcending way of designing goes beyond progressive enhancement, but I think it's just mincing words -- same basic concept and techniques.) Best, Zoe -- Zoe M. Gillenwater Design Services Manager UNC Highway Safety Research Center http://www.hsrc.unc.edu __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Drop-Down Menu In Table?
On Fri, Apr 18, 2008 at 8:39 AM, David Laakso [EMAIL PROTECTED] wrote: Victor Subervi wrote: http://www.cssplay.co.uk/menus/dd_valid.html which does indeed work. However, now I am perplexed by the problem of how to get it to work within a table. it won´t show any of the drop-downs. Any ideas? Victor Stacking context? [1] If it were that, what difference would it make with just one element? Put it on a public server with a clickable link to it http://livestocksling.com/bre/es-do/index.html This works fine in IE7, but not in IE6 arrrggghhh! (I hate IE6 now ;) At any rate, I have 3 different versions of the menu. The one at the top is how I would like it, as described earlier, embedded in the middle of a table. The second ¨bare table¨ menu further down is the one embedded in just this: tabletrtd menu here /td/tr/table The last one is without any table. TIA, Victor __ 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] Override Style Class in a Child TD Element
I am displaying tabular data and for a give row of data I have a tr
class=RowStyle element and than a td element for each of my columns.
There is specific td that I want to have a class of its own and override
the RowStyle class by saying td class=NotesColumnStyle. This is my CSS:
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td
/*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
font-weight:bold;
}
.NotesColumnStyle td
{
overflow: scroll;
width:30px;
height:20px;
background-color:Aqua;
}
Right now the RowStyle class is overriding or covering the NotesColumnStyle
class styles.
Thanks you all!!
__
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] Override Style Class in a Child TD Element
On Friday 18 April 2008 6:38 pm Brian Ogden wrote:
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td
/*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
font-weight:bold;
}
.NotesColumnStyle td
{
overflow: scroll;
width:30px;
height:20px;
background-color:Aqua;
}
Change that to 'td.NotesColumnStyle' in the CSS.
A space is a descendant selector, i.e. it says you are looking for a td inside
any element with the NotesColumnStyle class.
You need to put the td in front of the rule so that it has the same
specificity as the first rule.
Nicholas
__
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] Override Style Class in a Child TD Element
If the html code is td class=NotesColumnStyle, then the td is of class
NotesColumnStyle, and the css selector has to be td.NotesColumnStyle.
You wrote .NotesColumnStyle td. That selector would select any td element
that is inside any element of class NotesColumnStyle.
Best regards,
Christian Kirchhoff
-Original Message-
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Brian Ogden
Sent: Friday, April 18, 2008 7:39 PM
To: css-d@lists.css-discuss.org
Subject: [css-d] Override Style Class in a Child TD Element
I am displaying tabular data and for a give row of data I
have a tr class=RowStyle element and than a td element
for each of my columns. There is specific td that I want to
have a class of its own and override the RowStyle class by
saying td class=NotesColumnStyle. This is my CSS:
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td,
.EditRowStyle td /*Common Styles*/ {
padding: 5px;
border-right: solid 1px #1d1d1d;
font-weight:bold;
}
.NotesColumnStyle td
{
overflow: scroll;
width:30px;
height:20px;
background-color:Aqua;
}
Right now the RowStyle class is overriding or covering the
NotesColumnStyle class styles.
Thanks you all!!
__
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] Control Column width and height
I have a column that I want to put into a scroll area in a table. I have
attached the a screen shot. Depending on how long the notes are I want the
column to scroll. How do I control the height of columns in a table. Here is
my CSS: (The max-height does not seem to do much).
td.NotesColumnStyle
{
overflow: scroll;
max-height:50px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td
/*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
font-weight:bold;
max-height:50px;
}
__
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] Control Column width and height
On Friday 18 April 2008 8:13 pm Brian Ogden wrote:
I have a column that I want to put into a scroll area in a table. I have
attached the a screen shot. Depending on how long the notes are I want the
column to scroll. How do I control the height of columns in a table. Here
is my CSS: (The max-height does not seem to do much).
td.NotesColumnStyle
{
overflow: scroll;
max-height:50px;
}
/*RowStyles*/
.RowStyle td, .AltRowStyle td, .SelectedRowStyle td, .EditRowStyle td
/*Common Styles*/
{
padding: 5px;
border-right: solid 1px #1d1d1d;
font-weight:bold;
max-height:50px;
}
Attachments are not allowed, I'm afraid. The max-height you are using is
applying only to the individual rows, which are presumably not tall enough to
exceed the 50px limit. Overflow also only applies to block level or replaced
elements.
What do you mean by wanting 'the column to scroll'? The cells in a table will
always line up, so you cannot have one column scroll vertically independently
of the others (if you want this, are you sure you should be using a table?).
Nicholas
__
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] Displays mostly OK in IE7 but not in IE6 or IE8
Hi list http://www.internationalorganbuilders.com/new-build-delivered/members/test-member-index.php When I checked this with Browsercam, I was expecting problems with IE7 and was surprised that this displayed OK in IE7. Then I found a helpful post by Gunlaug Sørtun a while ago about position:fixed and _position:absolute which (although the CSS validator at w3.org doesn't recognise _position as valid css) has stopped the menu in IE6 filling up the whole screen), but have run out of ideas about what to do to fix the remaining display problems for IE6 and IE8. I also need a small fix for Safari - on the yellow horizontal bar, the words on the lefthand end are at the edge of the screen, instead of being inset a little; all the other browsers inset the words. Browsercam captures are here: http://www.browsercam.com/public.aspx?proj_id=385801 The css file is here http://www.internationalorganbuilders.com/new-build-delivered/styles/test-isoconsole.css I would be grateful for your help with these two things. TVMIA Rachel __ 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] a:active giving horiz scroll bar
Hi guys, FireFox problem. I have a floated list with the width set on ul li in ul li a, when active, i get a horizontal scrollbar of about 1-2px in firefox. I have no rules for :active. My anchor is just ul li a and ul li a:hover (both which don't produce the scroll) Is there something obvious i'm missing? why does the active state get wider, and overflow my fixed-width li? __ 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] making one tab bigger?
Can someone point me to a bulletproof way of making a selected tab larger than the other tabs? ul lia href=#Tab 1/a/li li class=activea href=#Tab 2/a/li lia href=#Tab 3/a/li /ul I would like Tab 2, to be a bit taller and wider, I've tried absolute positioning, but it falls apart in IE6 (a requirement). Negative top/bottom margins tend to make the tabs overlap each other when the window is thin (ie: cell phone browser size). -- Anthony Ettinger 408-656-2473 http://anthony.ettinger.name __ 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] Drop-Down Menu In Table?
Victor Subervi wrote: http://livestocksling.com/bre/es-do/index.html This works fine in IE7, but not in IE6 arrrggghhh! (I hate IE6 now ;) At any rate, I have 3 different versions of the menu. The one at the top is how I would like it, as described earlier, embedded in the middle of a table. The second ¨bare table¨ menu further down is the one embedded in just this: tabletrtd menu here /td/tr/table The last one is without any table. TIA, Victor Good grief. That thing is a disaster waiting to happen. It a credit to software error recovery that it appears on the screen at all. The menu is a spin on Sperling's [1]. Quick checked in IE/6, IE/7, Mac/Opera, Mac/FF, and Safari. [1] http://sperling.com/examples/menuh/ -- 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] Drop-Down Menu In Table?
David Laakso wrote: Victor Subervi wrote: http://livestocksling.com/bre/es-do/index.html This works fine in IE7, but not in IE6 arrrggghhh! (I hate IE6 now ;) At any rate, I have 3 different versions of the menu. The one at the top is how I would like it, as described earlier, embedded in the middle of a table. The second ¨bare table¨ menu further down is the one embedded in just this: tabletrtd menu here /td/tr/table The last one is without any table. TIA, Victor Good grief. That thing is a disaster waiting to happen. It a credit to software error recovery that it appears on the screen at all. The menu is a spin on Sperling's [1]. Quick checked in IE/6, IE/7, Mac/Opera, Mac/FF, and Safari. [1] http://sperling.com/examples/menuh/ And I am a bigger disaster waiting to happen. The uri is: http://www.chelseacreekstudio.com/ca/cssd/bara.htm -- 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] IE6 rendering of nested ul: three issues
Again, I thank this mailing list for the fast, excellent responses to my
questions. Tonight, I have another bug that I cannot squash through Google
alone. (Trust me, I've been applying independent study for most of this, my
first genuine attempt at web design with, or even without, CSS.) Also,
sorry in advance for this *long* message, but I wanted to make sure I
spelled out my problems thoroughly.
I've read that IE6 has some issues with nested lists (lists within a line
item of another list). Of course, I'm complicating things with links as
well. I've gotten quite far (with some CSS that confuses me now that its
written), and it works perfectly in FF. But, IE6 shows some definite
quirks. I didn't want to mess with popup menus, so I tried to work with
more standard markup.
Here's the Welcome page (
http://www.unemployedhelp.on.ca/clientswelcome.html). The stylesheet is at
images/clientstyle.css.
My site has a left-side navigation panel, made up of an unordered list of
links to other main pages. For three of these list items (Services,
Workshops, and Resources), there are sublists of items that link to
pages related to the subject in question. These sublists are only to be
visible when the main subject is selected (only one sublist visible at any
one time). With little elegance, I've simply omitted the non-relevant
sublists from the XHTML markup on the appropriate pages, so I don't have to
hide anything with CSS. I'll figure out a more graceful method of showing
a navigation bar on my *next* website :-)
My desired effect is to create a raised button look around the
currently-displayed page on the navigation list (using a class called
displayed). 1st small IE6 problem: when viewing the three pages that
contain nested sublists, the button surrounds not only the displayed
page's link, but also the entire sublist. Odd looking, but not
showstopping.
I also have a hover effect of a pressed button look for each item on the
list. 2nd small IE6 problem: whereas the hover activates over the entire
area of the button in FF, IE6 only activates the hover when the cursor is
over the text. A bit annoying, but again, I'll live with it if necessary.
Finally, my 3rd (and biggest) IE6 problem. When I select one of the pages
in the small (2 line item) sublists under Services or Workshops, I get
strange results from the nested list. There seems to be a bunch of bottom
padding added to the list items. The first of the two items seems to
otherwise display correctly when selected. But when the second item is
selected (Resource Centre and Job Search Workshop), strangeness indeed!
Initially the raised button look is absent (save a grey line). The hover
pressed button effect works, but if you move the cursor to the *next* (and
*only* the next) main line item (Online Guide to Employment), the raised
effect finally appears, but around *both* sublist line items (not just the
one with class=displayed). It then disappears again if you hover over the
offending currently-displayed page link. WTF?
(To add even more intrigue, the 3rd nested sublist, under Resources line
item, shows absolutely *none* of the problems from the above paragraph.
Other than the fact that there are four sublist items rather than two, they
are identically formatted in their XHTML and I can see no reason why this
list comes out swimmingly while I have problems with the other two.)
Oh, yeah, and I quick glance through a friend's computer with IE7 shows the
exact same issues :-(
Here is a snip of the code from clientjobworkshop.html (the page for Job
Search Workshop above):
div id=supplemental
div id=navList1
..
ul
..
lia href=clientworkshops.htmlWorkshops/a/li
ul class=sublist
li class=sublista href=clientjobclub.htmlJob
Club/li
li class=sublist displayeda
href=clientjobworkshop.htmlJob Search Workshop/li
/ul
lia href=clientguide.htmlOnline Guide to
Employment/a/li
..
/ul
/div
..
/div
And here's the relevant CSS:
#supplemental {
position: absolute;
}
#navList1 {
width: 155px;
padding: 200px 0 40px 2px;
font-size: small;
font-family: 'Arial Narrow', Arial, Helvetica, sans-serif;
font-weight: bold;
}
#navList1 ul {
margin: 0 0 0 0;
padding: 0 0 0 0;
}
#navList ul.sublist {
margin: 0 0 0 15px;
padding: 0 0 0 0;
}
#navList1 li a {
width: 142px;
display: block;
padding: 6px 5px 6px 5px;
list-style-type: none;
}
#navList1 li.sublist a {
width: 126px;
display: block;
padding: 2px 3px 2px 23px;
list-style-type: none;
font-weight: normal;
}
#navList1 li a:hover {
padding: 3px 4px 5px 2px;
border-top: 3px solid #66;
border-right: 1px solid #cc;
border-bottom: 1px solid #cc;
border-left: 3px solid #66;
}
#navList1
