[css-d] Test with Selectors

[Alan Gresley]

Hi all

Giving myself a nice learning curve, I have developed some test with selectors. 
Each test is still under review and slowly becoming more complex. I can see 
some test pages splintering on to other test pages.

I am developing it in a way that it shows firstly if a browser doesn't supports 
a selector and then if a browser does support a selector it will show either a 
match or non match. Also the tests show if the CSS is filtering or targeting 
any browser due to non support or buggy support of a selector. I was surprised 
to find how many there were. I will also have to redo the test in html4.01 
strict and xml. 

I have tested on Windows XP in FF 2.0.0.8, Mozilla 1.7.13, Flock 1.0.1, Opera 
9.10, Opera 9.24, Safari 3.0.4 (beta) and IE7.

I would like any feedback for any of the test with Mac browsers or some others 
browsers that I haven't got. I would also welcome criticism or suggestions 
about the techniques for showing non support and filtering or targeting of 
browsers. This I still have a lot of work with.

The first test show my attempts with namespace.




Each of these tests shows a lexical error with this

|p.test3

when I try to validate the CSS. Why is this the only p.class showing the error? 
I not even sure if there should be the word namespace in the url string in the 
later test page as both test pages with or without the word namespace works. I 
sure someone will clarify my errors.

The next test are with the Negation pseudo-class Selectors



The test on this page will needs to be done over several pages as I find that 
the test show quite broken support across browser land. Firefox and older Gecko 
is very broken and somewhat Safari but for different selectors.

The next test are with Attribute selectors.



This the only test that IE7 get a look in and surprisingly it passes with 
almost flying colours. It shows the way to target Safari at least on windows, 
which I believed is the same for Mac with case insensitivity.

Some of the test seem to be repeated over and over but this is done to 
demonstrates all possible way that class names can be used either in the string 
in the html or CSS.

The next test are with Attribute selectors with the Negation pseudo-class.



This is almost the total reverse of the last page (used the last page as a 
base) and will have to be streamlined. This page fails at this time because IE7 
seems to be picking up some of the colours which it should not since it does 
not support the negation pseudo-class.

The browser support overall is in this order.
Safari (beta) {Webkit)
Firefox (newer Gecko)
Mozilla (old Gecko)
Opera
IE7

The tests are intended to be used to check browser support or buggy support for 
various selector, not as a way to feed alternative styles to "x" browser. But 
having said that, I have done some extra test showing the possibilities.

Kind regards, Alan


__
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] Margins above table cells

[Philippe Wittenbergh]

On Nov 27, 2007, at 1:58 PM, Robert James wrote:

> I'm displaying  elements with CSS like this:
>
> a.button-style
> {
> display: table-cell;
> width: 100px;
> height: 70px;
> background-color: blue;
> vertical-align: middle;
> margin-top: 20px;
> }
>
> Works great.  However, the margin-top is ignored - I assume this is  
> because
> table-cell is not a block element.  Is there another way to create the
> equivalent of margins?

Margin does not apply to elements with display:table-cell.


(and, you probably know this, IE 6 and 7 do not support display:table- 
cell.)
As for an alternative to margin-top, no, not really. There is the  
border-spacing property that applies to tables (it is the equivalent  
to cellspacing in html).
You probably want to style the parent element somehow.

> Also: Is there a way to display more than one of these on the same  
> line?

If you have xxx xxx xxx
That should form one row.
Otherwise, while using display:table-cell, please read carefully:

A display:table-cell needs a display:table around it (and table-row).  
The rendering engine will generate this for you. The resulting  
construction may or may not be what you expect.


Philippe
---
Philippe Wittenbergh





__
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] Margins above table cells

[Robert James]

I'm displaying  elements with CSS like this:

a.button-style
{
display: table-cell;
width: 100px;
height: 70px;
background-color: blue;
vertical-align: middle;
margin-top: 20px;
}

Works great.  However, the margin-top is ignored - I assume this is because
table-cell is not a block element.  Is there another way to create the
equivalent of margins?

Also: Is there a way to display more than one of these on the same line?
__
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 Layout problems

[Gunlaug Sørtun]

Peter Bradley wrote:

> Whilst I've got your attention, though ...  Does anyone happen to 
> know why IE leaves a big gap between the top_nav and the pennawd_gw.

The effect of 'hasLayout' triggers on div#cynnwys - 'width' and
'height', which makes the container clear the ul#top_nav as a "block".
No "sane" browser will copy that buggy behavior, but they have of course
copied it into IE7.

You'll get a cross-browser reliable start by adding / correcting to...

div#cynnwys {clear: both; height: auto;}

...and adjust the 'top: 70px' to taste. The clearing get browsers in
line, and the 'height' shouldn't be there in the first place.

Setting 'height: value' on an element containing text, is always a bad
move since it'll cause overlapping. If you want a minimum height, then
you should declare one - with workaround for IE6...

div#cynnwys {min-height: 1600px;}
* html div#cynnwys {height: 1600px;}


With div#cynnwys fixed in place below the ul#top_nav, you can move the
main content and/or the left-side container up and down as you like.


This leaves you with one problem in IE6 - the "quirky" box-model. Since
IE6 is in quirks mode it'll include the left padding in 'width: 78%',
while other browsers will add the left padding to that width. Either
delete the 'xml declaration' from above the 'doctype' and let IE6 run in
"Strict mode", or make IE6' box-model look right by feeding it another
'width: value'.

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] how to achieve space between ul ul li

[Philippe Wittenbergh]

On Nov 27, 2007, at 4:11 AM, jaklitsch maya wrote:

> I have been trying for some time to get some distance
> between
>
> ul
>   li
>   li
> ul
>   li
>   li
>/ul
>   li
>
> the last two li's and have had NO success. I have
> tried ever which way that I can think of and nothing
> happens.
>
> The website url is
>
> http://www.necwa.org/new_site/mwr.html

#nav ul ul {margin-bottom:100px;} ?
(obviously, adjust the value to taste :-))

BTW - IE 6 and 7 don't understand the keyword 'inherit'.

Philippe
---
Philippe Wittenbergh





__
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 Layout problems

[Peter Bradley]

Ysgrifennodd Gunlaug Sørtun:
> Add...
>
> ul#cyfeirio {margin-left: 0;}
>
> ...or...
>
> ul#cyfeirio {margin: 0;}
>
> ...depending on where you want that ul to stay.
>
> IE/win uses margin-defaults on lists, while most other browsers use
> padding-defaults. It is therefore a good practice to zero out both
> margins and paddings that aren't used/declared for positioning of lists.
>
D'oh!  I really should have worked that out for myself.  Thanks Georg.

Whilst I've got your attention, though ...  Does anyone happen to know 
why IE leaves a big gap between the top_nav and the pennawd_gw.   I 
notice that all the other browsers  leave a  large gap between the top 
of the cynnwys and the start of the first included p or h1/2.  It seems 
that IE is making the pennawd_gw and the cynnwys content line up (which 
is actually what I would like), but moving everything down about 30px 
(which is not), whilst all the other browsers have the content moved 
down (which is not what I would like), but not the pennawd_gw (which is).

I'll have to stop for tonight (my head's done in), but I'll fix the ul 
tomorrow and confirm all is well.  If anyone does know what the other 
problem is I'd be delighted to hear that as well.  If it would help to 
post that as a separate question, I'll do that, as it might make it 
easier for anyone else with the same problem.  Just let me know if you 
think I should re-post with a new title.

Thanks.


Peter

__
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 Layout problems

[Gunlaug Sørtun]

Peter Bradley wrote:
> http://www.peredur.uklinux.net/Amnesty/amdanom.html

> For some reason, IE insists on pushing the ul that forms the sidebar
>  navigation links out about 10px to the right.

Add...

ul#cyfeirio {margin-left: 0;}

...or...

ul#cyfeirio {margin: 0;}

...depending on where you want that ul to stay.

IE/win uses margin-defaults on lists, while most other browsers use
padding-defaults. It is therefore a good practice to zero out both
margins and paddings that aren't used/declared for positioning of lists.

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] IE Layout problems

[Peter Bradley]

Hi,

I'm sure this is a common problem.  I've seen quite a few similar posts 
in the archives, but nothing that I recognised as being of direct help.  
If I've missed something, please point me at the right place and I'll 
bother you no more :0)

My basic problem is that I have a layout that works in every browser I 
can lay my hands on across two operating systems, but doesn't work in 
IE7 (so almost certainly not in IE6 either).  An example of the problem 
can be seen at:

http://www.peredur.uklinux.net/Amnesty/amdanom.html

The style sheet can be retrieved from:

http://www.peredur.uklinux.net/Amnesty/styles/default.css

For some reason, IE insists on pushing the ul that forms the sidebar 
navigation links out about 10px to the right.  And yes, I did pinch the 
style from Sitepoint.

This is a non-work project (I do Web programming, but not Web designing, 
so I know my way around, in a general sort of way without being all that 
familiar with markup and style sheets) to translate a site.  I really 
want to get to grips with this CSS thing, if I can.  This is the first 
time I've really used them.

The site is under construction and not in its final resting place, so 
there's only really this one page to look at, and the home page which 
doesn't have a sidebar.  The other pages, such as they are, are just 
placeholders.

Thanks in advance for any help you can give.

Regards


Peter

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css menu obscured by form input in IE6 [revised]

[Jack Albright]

I have a horizontal css-based dropdown menu and the  dropdowns are  
obscured by form  form elements in Win / IE6.  So, when I  
hover over the first-level menu item, the dropdown menu slides behind  
the  form element, but only in IE6. (I didn't test IE7 yet).  
It works fine in Firefox (Win and Mac) and Safari.

The seems like that kind of problem that lots of people on this list  
will know the answer to.
What is the css property that will allow my menu to ride on top of  
the input field.

The page is behind a firewall, so I cannot provide a link to it.

Thanks,
Jack

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] css menu obscured by form input in IE6

[Jack Albright]

I have a horizontal css-based dropdown menu and the  dropdowns are  
obscured by form  fields in Win / IE6.  So, when I  
hover over the first-level menu item, the dropdown menu slides behind  
the  fields, but only in IE6. (I didn't test IE7 yet). It  
works fine in Firefox (Win and Mac) and Safari.

The seems like that kind of problem that lots of people on this list  
will know the answer to.
What is the css property that will allow my menu to ride on top of  
the input field.

The page is behind a firewall, so I cannot provide a link to it.

Thanks,
Jack
__
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] Quick flash of header background problem (IE6, IE7)

[Gunlaug Sørtun]

[EMAIL PROTECTED] wrote:
> http://www.mycoast.eu/index.php?lang=EN
> 
> If you open it in IE7 (IE6 behaves the same), you'll notice a quick
> sort of 'flash' of the background *below* the header, before the
> header background is rendered on screen.

Observed in IE6 on a slow connection:
There's an enormous amount of loading and reloading going on in that
page on page-load and :hover.
I'm counting seconds of reload/re-rendering time for that first "flash",
and even on regular hover.

I'd look at what effects those scripts have, and also whether you are
repeating addresses for IE/win in the IE-only stylesheets.
IE/win tends to reload, or check for the original, every time it sees an
url - depending on its settings, so address those images on first load
and never again - whenever possible.

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] IE7 zoom breaking the Holy Grail layout

[David Laakso]

Ann Randall wrote

Oh, gosh, that's a disaster. Any good alternatives to ALA's Holy Grail? 
I completed a prototype in that format at 
http://izann.com/studentservices/ and can't even see the left-side 
navigation links in IE7. Ann Ann Randall Unfortuately you're not doing 
well in IE6, either. The solution is to understand and use Brill's 
3-column negative-margin concept [1]. And, if you do a spin on it, not 
make the kind of mistakes Levine did with his. Brill's 3-col layout will 
hold in 6 and 7. Mind well what you put in it as well. Best, ~dL

[1]





-- 
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] IE7 zoom breaking the Holy Grail layout

[Ann Randall]

>>> On 11/26/2007 at 12:45 PM, Ingo Chao <[EMAIL PROTECTED]>
wrote:
Ingo Chao wrote:
> David Laakso wrote:
>> [EMAIL PROTECTED] wrote:
>>> Hi,
>>>
>>> I notice that the Holy Grail layout on A List Apart 
>>> (http://www.alistapart.com/articles/holygrail) breaks in IE7 when
the 
>>> zoom feature is used. The columns appear to shift horizontally as
the 
>>> zoom is increased or decreased. This is a popular layout, has
anyone 
>>> figured out a way to keep it from breaking whilst zoomed?
>>>
>>> ...
>>
>> That's nothing. That horror show (personal opinion) drops the left 
>> float at zoom-level 100% text-size "largest in IE7, too.
>>...
> 
> #container {zoom:1; overflow-x:hidden) helps a little, but won't fix

> other issues, like
> http://www.satzansatz.de/cssd/hgjump.html 

This will let the left column appear on the screen here, but doesn't 
prevent the shifting. Further wrappers are needed to make it more 
stable, or choose another layout.
http://www.satzansatz.de/cssd/companions/alalevine.html 
http://www.satzansatz.de/cssd/companions.html 

Ingo

-- 
http://www.satzansatz.de/css.html 

Oh, gosh, that's a disaster. Any good alternatives to ALA's Holy Grail?
I completed a prototype in that format at
http://izann.com/studentservices/ and can't even see the left-side
navigation links in IE7. Ann
 

Ann Randall, Faculty Support and Projects Coordinator
Distance Education, Extended Studies
1910 University Drive-MS 1120
Boise ID 83725-1120
 
Phone: 208.426.4223
Fax: 208.426.3467
http://www.boisestate.edu/distance/

__
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 not working with iphone

[David Laakso]

[EMAIL PROTECTED] wrote:
> Yes, the dropdowns are the problem.  I don't remember what I used as a 
> template
> to develop the dropdown menus, but it looks similar to Tedd Sperling. Spent a
> lot of time tweaking (trial and error) to get it to work right,but never
> (obviously) tested it with iphone. Hoping I don't have to redo that effort.
>
>
>
>
>   
>> www.kepcopower.com
>> 
>
>   
>
>>
>> CSS file is www.kepcopower.com/menu04-pic.css
>>
>>
>> Steve
>>   
>> 
>
>
>
>
>
>   
This is a test page I did with a simple drop-down such as yours (one
sub) [1] based on Tedd's [2]. Both drop-down in my iPhone.

Do not worry about your difficulties in Mathematics. I can assure you mine are 
still greater.
 --  Albert Einstein

Regards,
~dL

[1] 

[2] 




-- 
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] IE7 zoom breaking the Holy Grail layout

[Ingo Chao]

Ingo Chao wrote:
> David Laakso wrote:
>> [EMAIL PROTECTED] wrote:
>>> Hi,
>>>
>>> I notice that the Holy Grail layout on A List Apart 
>>> (http://www.alistapart.com/articles/holygrail) breaks in IE7 when the 
>>> zoom feature is used. The columns appear to shift horizontally as the 
>>> zoom is increased or decreased. This is a popular layout, has anyone 
>>> figured out a way to keep it from breaking whilst zoomed?
>>>
>>> ...
>>
>> That's nothing. That horror show (personal opinion) drops the left 
>> float at zoom-level 100% text-size "largest in IE7, too.
>>...
> 
> #container {zoom:1; overflow-x:hidden) helps a little, but won't fix 
> other issues, like
> http://www.satzansatz.de/cssd/hgjump.html

This will let the left column appear on the screen here, but doesn't 
prevent the shifting. Further wrappers are needed to make it more 
stable, or choose another layout.
http://www.satzansatz.de/cssd/companions/alalevine.html
http://www.satzansatz.de/cssd/companions.html

Ingo

-- 
http://www.satzansatz.de/css.html
__
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] IE7 zoom breaking the Holy Grail layout

[Ingo Chao]

David Laakso wrote:
> [EMAIL PROTECTED] wrote:
>> Hi,
>>
>> I notice that the Holy Grail layout on A List Apart 
>> (http://www.alistapart.com/articles/holygrail) breaks in IE7 when the zoom 
>> feature is used. The columns appear to shift horizontally as the zoom is 
>> increased or decreased. This is a popular layout, has anyone figured out a 
>> way to keep it from breaking whilst zoomed?
>>
>> Many thanks,
>>
>> Chris
>>
>>   
> 
> That's nothing. That horror show (personal opinion) drops the left float 
> at zoom-level 100% text-size "largest in IE7, too.
> 
> Best,
> 
> ~dL
> 

What left column?

;)

#container {zoom:1; overflow-x:hidden) helps a little, but won't fix 
other issues, like
http://www.satzansatz.de/cssd/hgjump.html

Ingo

-- 
http://www.satzansatz.de/css.html
__
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] how to achieve space between ul ul li

[Ray Leventhal]

> I have been trying for some time to get some distance
> between 
>
> ul
>   li
>   li
> ul
>   li
>   li
>/ul
>   li
>
> the last two li's and have had NO success. I have
> tried ever which way that I can think of and nothing
> happens.
>
>   
Hi,

I'm sure wiser minds than I will find a more elegant solution, but using
Firebug, this seemed to do the trick for me

change this:
nav li {
font-size:1em;
line-height:1.6em;
list-style-type:none;
padding:0pt .2em; /* wrong order, gives 0.2em width to l/r instead
of top/bottom which is what you want.
padding: 0.2em 0;
}

I hope this helps...but was only a quick try.

Kind regards,
~Ray




__
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 not working with iphone

[SKugler]

Yes, the dropdowns are the problem.  I don't remember what I used as a template
to develop the dropdown menus, but it looks similar to Tedd Sperling. Spent a
lot of time tweaking (trial and error) to get it to work right,but never
(obviously) tested it with iphone. Hoping I don't have to redo that effort.


Reply Separator
Subject:Re: [css-d] css not working with iphone
Author: David Laakso <[EMAIL PROTECTED]>
Date:   11/26/2007 1:44 PM

[EMAIL PROTECTED] wrote:
> I'm using css menus and submenus at www.kepcopower.com, and it has been
working
> fine for quite some time, however I discovered it does not work at all with
the
> iphone browser.
>
> CSS file is www.kepcopower.com/menu04-pic.css
>
> Anyone have a clue? Any help would be most appreciated.
>
> Thanks,
>
> Steve
>   


The top-level worked (clickable and take me to the page) for me; 
however, the drop-downs to not drop. Is that what you mean? I regret I 
do not know the fix for that. There are many things about the iPhone 
that seem problematic to some sites. All I can suggest is to look at 
other sites using drop-down menus on an iPhone and see if they work; 
and, if so, compare their code with yours to see where you may be going 
wrong.

I did check Tedd Sperlings drop-down on my iPhone and it works:


Best,

~dL



-- 
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] how to achieve space between ul ul li

[jaklitsch maya]

I have been trying for some time to get some distance
between 

ul
  li
  li
ul
  li
  li
   /ul
  li

the last two li's and have had NO success. I have
tried ever which way that I can think of and nothing
happens.

The website url is

http://www.necwa.org/new_site/mwr.html

For this I have been using document level style tag,
but will move to css file if this will ever work.

Thank you in advance,

Maya Jaklitsch



  

Never miss a thing.  Make Yahoo your home page. 
http://www.yahoo.com/r/hs
__
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] IE7 zoom breaking the Holy Grail layout

[David Laakso]

[EMAIL PROTECTED] wrote:
> Hi,
>
> I notice that the Holy Grail layout on A List Apart 
> (http://www.alistapart.com/articles/holygrail) breaks in IE7 when the zoom 
> feature is used. The columns appear to shift horizontally as the zoom is 
> increased or decreased. This is a popular layout, has anyone figured out a 
> way to keep it from breaking whilst zoomed?
>
> Many thanks,
>
> Chris
>
>   

That's nothing. That horror show (personal opinion) drops the left float 
at zoom-level 100% text-size "largest in IE7, too.

Best,

~dL

-- 
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] IE7 zoom breaking the Holy Grail layout

[David Hucklesby]

On Mon, 26 Nov 2007 13:12:20 -0500, [EMAIL PROTECTED] wrote:
> Hi,
>
> I notice that the Holy Grail layout on A List Apart
> (http://www.alistapart.com/articles/holygrail) breaks in IE7 when the zoom 
> feature is
> used. The columns appear to shift horizontally as the zoom is increased or 
> decreased.
> This is a popular layout, has anyone figured out a way to keep it from 
> breaking whilst
> zoomed?
>
Hmm. I wish I could find a way of IE7 zoom not breaking some of *my*
designs, too. The *best* I can hope for is that the visitor has to scroll
horizontally as well as vertically.

It does not work like Opera's zoom feature at all.

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/

Re: [css-d] css not working with iphone

[David Laakso]

[EMAIL PROTECTED] wrote:
> I'm using css menus and submenus at www.kepcopower.com, and it has been 
> working
> fine for quite some time, however I discovered it does not work at all with 
> the
> iphone browser.
>
> CSS file is www.kepcopower.com/menu04-pic.css
>
> Anyone have a clue? Any help would be most appreciated.
>
> Thanks,
>
> Steve
>   


The top-level worked (clickable and take me to the page) for me; 
however, the drop-downs to not drop. Is that what you mean? I regret I 
do not know the fix for that. There are many things about the iPhone 
that seem problematic to some sites. All I can suggest is to look at 
other sites using drop-down menus on an iPhone and see if they work; 
and, if so, compare their code with yours to see where you may be going 
wrong.

I did check Tedd Sperlings drop-down on my iPhone and it works:


Best,

~dL



-- 
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] css not working with iphone

[SKugler]

Hakan, 

No, I don't think so. I'm not using  textarea.

Reply Separator
Subject:Re: [css-d] css not working with iphone
Author: "Hakan K" <[EMAIL PROTECTED]>
Date:   11/26/2007 12:53 PM

iPhone Safari CSS positioning bug

http://groups.google.com/group/iphonewebdev/browse_thread/thread/d12fcddc7b7eb2e
9

Is this the same issue you have ?



Hakan
http://dominor.com

On Nov 26, 2007 12:28 PM,  <[EMAIL PROTECTED]> wrote:
> I'm using css menus and submenus at www.kepcopower.com, and it has been
working
> fine for quite some time, however I discovered it does not work at all with
the
> iphone browser.
>
> CSS file is www.kepcopower.com/menu04-pic.css
>
> Anyone have a clue? Any help would be most appreciated.
>
> Thanks,
>
> Steve
> __
> 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] IE7 zoom breaking the Holy Grail layout

[HARDIE.CA]

Hi,

I notice that the Holy Grail layout on A List Apart 
(http://www.alistapart.com/articles/holygrail) breaks in IE7 when the zoom 
feature is used. The columns appear to shift horizontally as the zoom is 
increased or decreased. This is a popular layout, has anyone figured out a way 
to keep it from breaking whilst zoomed?

Many thanks,

Chris

__
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] Quick flash of header background problem (IE6, IE7)

[michel]

Hello,

I'd like to ask about a strange behaviour/bug, which I observe only in IE6
and IE7 (Win) in some of my designs. I thought it was accidental, but now
I see similar behaviour in another CSS design of mine and am quite
puzzled...

Here it is, in 2 words description:

The first site:
http://www.mycoast.eu/index.php?lang=EN

If you open it in IE7 (IE6 behaves the same), you'll notice a quick sort
of 'flash' of the background *below* the header, before the header
background is rendered on screen.

Now, it's not sort of 'caching' problem. If you browse a couple of pages
from the same site (simply click any of the links in the left nav), you'll
see that every time a page loads, the page background (which imitates
columns a la "faux columns") starts loading first, then, in a matter of
milliseconds (but still visibly) the header covers the page background.

If you open the same site with Firefox/Win, you'll see that there's no
flashing at all. The header is rendered OK across all pages and you won't
see first the page background loading before the header background,

Now I'm starting a new design, here's a quick test:

http://www.optimiced.com/web/2007/pecsd_test/index-test-1.html
  (css: /web/2007/pecsd_test/css/master.css)

I'm worried I see same bug here...

(There are two links in the left: try them, pages are same as design)

Again, the background flashed before header covers it...

I have pretty good experience with CSS -- am I doing something wrong, so
IE behaves so weird?...

In these designs, basically, I have a small background image applied with
repeat-y, 'faux columns' technique. #header has its own background. This
never was a problem with Firefox, but now I see IE, even v.7, has problems
with something in my page...

Please, give me a hint how I may prevent this nasty 'flashing', thanks a
lot!! :-)

Greetings from my cold and snowy part of the world, Michel


--
Michel
www.optimiced.com (personal blog)
__
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 not working with iphone

[Hakan K]

iPhone Safari CSS positioning bug

http://groups.google.com/group/iphonewebdev/browse_thread/thread/d12fcddc7b7eb2e9

Is this the same issue you have ?



Hakan
http://dominor.com

On Nov 26, 2007 12:28 PM,  <[EMAIL PROTECTED]> wrote:
> I'm using css menus and submenus at www.kepcopower.com, and it has been 
> working
> fine for quite some time, however I discovered it does not work at all with 
> the
> iphone browser.
>
> CSS file is www.kepcopower.com/menu04-pic.css
>
> Anyone have a clue? Any help would be most appreciated.
>
> Thanks,
>
> Steve
> __
> 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] css not working with iphone

[SKugler]

I'm using css menus and submenus at www.kepcopower.com, and it has been working
fine for quite some time, however I discovered it does not work at all with the
iphone browser.

CSS file is www.kepcopower.com/menu04-pic.css

Anyone have a clue? Any help would be most appreciated.

Thanks,

Steve
__
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] Suckerfish dropdown problem with multiple layers

[Alan Gresley]

Dan Smith wrote:

> I'm trying to adapt the suckerfish dropdowns for a Drupal menu structure, 
> which is a series of
> nested unordered lists.
> 
> My aim is to make the first 2 lists invisible, keep the 3rd list as the main 
> navigation, and have
> 4th level elements as dropdowns within their parent item.
> 
> My problem is that the hover-triggered dropdown is appearing on every 3rd 
> level list item. See:
> 
> http://www.dansmithdev.com/helena/node/6
> 
> I suspect I'm incorrectly selecting the element which triggers the hover 
> behaviour, which is the
> line:
> 
> #nav li:hover ul.menu ul.menu ul.menu, #nav li.sfhover ul.menu ul.menu 
> ul.menu {
> left: auto;
> }
> 
> I'm not experienced enough with the CSS syntax to know what to look for. If 
> anyone has any advice
> it would be very gratefully received.
> 
> Many thanks
> 
> Dan

You need to select the 3rd generation  list item instead of the top list 
item. I find all those class names doing nothing. Why are they there? My big 
question is why are you hiding the 1st and 2nd generations of this list?

#nav ul ul ul ul {
position: absolute;
width: 10em;
left: -999%; /* change */
}

#nav ul ul ul li:hover ul, #nav ul ul ul li.sfhover ul {
left: auto;
}

The change to left: -999% having a percentage is to stops the sticky hover bug 
in IE7.

Kind regards, Alan

__
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] absolute positioned dropdown going wrong in IE

[Eystein Alnaes]

> Basically I'm saying that you'll have to apply z-index: 2 to #header, to
> have the entire #header higher in the stack, nearer to the user, than
> #main.
>
> Ingo


Thank you! I've read about the IE stacking context before, but not been able
to understand it until now. It even solved my iframe problem. I love easy
solutions.
Do you mind if I blog your explanation?

Eystein
__
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] Should z-index apply to elements with opacity

[Philippe Wittenbergh]

On Nov 26, 2007, at 2:40 PM, Alan Gresley wrote:

> ...
> 
>
> #stackB {opacity:0.80}
>
> Firefox, Opera and IE7 shows the same as the last test. Opacity has  
> created a stacking content for the blue box in Safari so now the  
> blue box is above the yellow and red box.

Hmm. Opacity creates a stacking context in Gecko, as I explained in  
my previous mail.
Firefox 2.0 puts the blue box behind the yellow box. Gecko 1.9  
(nightly builds, Fx 3 beta 1) puts the blue box in front, just as  
Safari 2 and 3. Which one is correct ?
The yellow box has a z-index of '1',  higher than the implicit z- 
index of the blue box (according to D.Hyatt [1], opacity gives a z- 
index of '0'). Shouldn't the yellow box be on top ?

This is what happens if the blue box had 'position:relative' and 'z- 
index:0' instead of using 'opacity'. (position relative with auto z- 
index being analogous to opacity).


[1] 

Philippe
---
Philippe Wittenbergh





__
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] Suckerfish dropdown problem with multiple layers

[dan smith]

I'm trying to adapt the suckerfish dropdowns for a Drupal menu structure, which 
is a series of nested unordered lists.

The test structure is:

* Home
  o Photography
+ About me
+ Portfolio
  # Events
+ Clients
+ Contact
  o Writing and editing

My aim is to make the first 2 lists invisible, keep the 3rd list as the main 
navigation, and have 4th level elements as dropdowns within their parent item.

My problem is that the hover-triggered dropdown is appearing on every 3rd level 
list item. See:

http://www.dansmithdev.com/helena/node/6

I suspect I'm incorrectly selecting the element which triggers the hover 
behaviour, which is the line:

#nav li:hover ul.menu ul.menu ul.menu, #nav li.sfhover ul.menu ul.menu ul.menu {
left: auto;
}

I'm not experienced enough with the CSS syntax to know what to look for. If 
anyone has any advice it would be very gratefully received.

Many thanks

Dan

The navigation styles:

#nav, #nav ul.menu li {
padding: 0;
margin: 0;
list-style: none;
}

#nav ul.menu li {
margin: 0.25em;
background-color: #ff0;
}

#nav a {
display: block;
width: 6em;
}

#nav li.leaf, ul.menu ul.menu ul.menu li.expanded {
float: left;
width: 6em;
}

#nav ul {
visibility: hidden;
}

#nav li ul li ul {
visibility: visible;
}

#nav ul.menu ul.menu ul.menu ul.menu {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul.menu ul.menu ul.menu, #nav li.sfhover ul.menu ul.menu ul.menu {
left: auto;
}

The navigation HTML:




Primary links




Home


Photography


About me


Portfolio


Events




Clients


Contact




Writing and editing










  ___ 
Want ideas for reducing your carbon footprint? Visit Yahoo! For Good  
http://uk.promotions.yahoo.com/forgood/environment.html
__
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] a html 4.01 strict problem

[Yolanda van Nieuwkoop]

Hi jaklitsch maya,

You could use a java script
in the head put:

Re: [css-d] update, can you check this site now

[Ibrahim Y]

Looks Good on FF 2.0.0.9

On Nov 25, 2007 10:35 PM, Hakan K <[EMAIL PROTECTED]> wrote:

> Looks ok on IE6, FF 2.0.0.9
>
>
>
>
>
> Hakan
> http://dominor.com
>
> On Nov 25, 2007 2:03 PM, Rob freeman <[EMAIL PROTECTED]> wrote:
> > http://www.precociouscollective.com/
> >
> > --
> > Rob Freeman
> > [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-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/