Re: [css-d] IE6 and down issue

2007-04-13 Thread Gunlaug Sørtun
Donna Jones wrote:
 http://www.westendwebs.net/pulse-ie-issue/picks.html

Adding/changing to...

#content {margin: 0; float: right;}
#insidewrapper {width: 100%; overflow: hidden;}
* html #insidewrapper {overflow: visible;}

...will extend pixel-perfection into the IE6 down world.

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


Re: [css-d] Nested @import in IE

2007-04-13 Thread cFA
On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote:

 Hi all,

 Has anyone ever experienced a problem with having style applied in IE
 when '@import's have been nested 4 levels deep?

 I've just tried to do this, and can't view the styles which are at the
 deepest level of nesting in IE6. Firefox works fine.

 I tried clearing my cache, but to no avail.

 Thanks (I hope!)
 Zoe


Yes, it is a problem~ I have a test page for it, but havent found a way
around it, other than of course importing what I can on the same level.

http://aenonfiredesign.com/sandbox/importlevels/


-clint


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


Re: [css-d] Nested @import in IE

2007-04-13 Thread Ingo Chao
cFA wrote:
 On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote:
 Hi all,

 Has anyone ever experienced a problem with having style applied in IE
 when '@import's have been nested 4 levels deep?

 I've just tried to do this, and can't view the styles which are at the
 deepest level of nesting in IE6. Firefox works fine.

 I tried clearing my cache, but to no avail.

 Thanks (I hope!)
 Zoe


 Yes, it is a problem~ I have a test page for it, but havent found a way
 around it, other than of course importing what I can on the same level.
 
 http://aenonfiredesign.com/sandbox/importlevels/
 
 
 -clint
 

With this testcase, IE7 shows the same problem. Plus a pretty long FOUC.

- added it to the wiki.

Ingo

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


[css-d] Comments on a summary of what happens in Quirks Mode?

2007-04-13 Thread Jukka K. Korpela
I have tried to summarize the effects of Quirks Mode, since the summaries 
and notes that I found were rather limited. Would someone like to comment 
on what's missing?
What happens in Quirks Mode?
http://www.cs.tut.fi/~jkorpela/quirks-mode.html

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

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


[css-d] research on styling links

2007-04-13 Thread Kelley Greenman
Hi,

In my experience, and from advice on this list, I have typically found 
that, with complicated designs where you have several types of link design 
designs (background images and colors, borders, etc), including 
navigational links with complex dropdown hierarchies, that your best bet is 
to define all the properties of the link pseudo class -- in order to get it 
to work correctly with IE 6. Thus, for every section in my stylesheet where 
I style the link, I use a:link, a:visited, a:hover, a:active if I want 
those links to behave differently in each case. Even if my a:link and 
a:visited are the same, I define them. And, I define them in that order, 
the old LoVe HA mnemonic.

I'm doing research on a problem we're having with links showing up in 
different font sizes. The CSS someone else wrote for the links relies 
either on the font size defined in the selector or on the font-size defined 
by a. E.g., selector a {font-size: 12px;}.

 From my experience, the erratic font size, happening in IE 6 only, is 
because the links for each selector haven't been defined as above. The 
visited links are displaying in smaller font size, inheriting the font size 
of the selector containing them. Sometimes this goes away, only to reappear 
five minutes later. I haven't had time to fully experiment with the 
behavior and nail it down.

I've found the typical resources on the problem with IE and some places 
where the LoVeHA mnemonic is mentioned. (list of links below). Are there 
any other good resources for documenting this in the company WIKI?

Of course, on that note, I could be all washed up, so please correct me if 
I'm wrong about the above. Most of the material I've found is dated (in 
Internet time).

Also, I did a search on the list archives and the wiki but struck out or 
got so many false positives that I gave up.

thanks for your help.

Links:

http://www.w3.org/TR/REC-CSS2/selector.html#dynamic-pseudo-classes

http://antone.geckotribe.com/alpha-gecko/2005/01/12/how-to-avoid-using-classes-in-too-many-places/

http://class.thefactoryfactory.com/docs/interm_css_selectors.html

http://www.ericmeyeroncss.com/bonus/proj04-excerpt.html

http://locusoptimus.com/css-trickery/ie7-hover-bug.php

http://css-discuss.incutio.com/?page=IE7

http://carpe.ambiprospect.com/buttons/links.htm


Kelley
(who apologizes for odd typos. It's early and I'm typing in a hotel room 
that's dark while my partner sleeps. :) 

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


[css-d] How to remove usemap link borders with css ?

2007-04-13 Thread Susan T (cocomomi)
Hello
I  need to do a quick fix on a tables based site before I move it to
css format and unfortunately when I did that there are link borders  
on several of the
table cells that have usemaps links in them.

I tried to add link styles to eliminate them but the borders still
appear in firefox and internet explorer.  However, In Safari and  
camino the site shows up correctly.

Is there another style class or property tag that i should be using  
to make the image map borders disappear ?


Here is the site page http://cozyandbright.com/index7.html

and here are the styles I am trying to use to eliminate the borders in
firefox

style type=text/css
!--

a:link img {
 text-decoration: none;
 border:0;
 border:none;
}

a:visited img {
   color: #3366FF;
border:0;
 border:none;

}

a:hover img{
 text-decoration: none;
 border:0;
 border:none;

}

.style1 {font-size: 9px}

--
/style

Thank you,
Suisun

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


[css-d] Semi-transparent PNGs as background images in IE6 - documentation wanted

2007-04-13 Thread Peter-Paul Koch
Hello,

Yesterday I talked to a web developer who passed me a technique for
using semi-transparent PNGs as background images even in IE6 and
lower. The technique works, up to a point. See my test page at
http://www.quirksmode.org/css/png/png.html .

I already had a private conversation with someone who knows this
technique and drew my attention to a few bugs (can't use CSS height;
links/form fields may become unclickable unless they have a z-index).
Before continuing my investigation, though, I'd like to know whether
this technique has already been described.

Therefore my question is: can anyone point me to a page that explains
the use of semi-transparent PNGs as background images in IE6 and lower
through the MS-proprietary
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration?
Has anyone yet taken the logical step of writing a behavior.htc that
incorporates this solution?

Despite several Google searches I didn't find a real
explanation/description, although several articles described several
aspects of this solution. If there turns out to be no full description
(including bugs) available, I'll have to write my own. Since I don't
have too much time right now, I'm hoping that someone can point me to
a description so that I can continue my real work.

Thanks,

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


[css-d] Please ignore: How to remove usemap link borders with css ?

2007-04-13 Thread Susan T (cocomomi)
please ignore my previous message.
I have figured out what was happening with the image borders.  just  
needed to add border=0

Thank you in advance,
Suisun

On Apr 13, 2007, at 7:09 AM, Susan T (cocomomi) wrote:

Hello
I  need to do a quick fix on a tables based site before I move it to
css format and unfortunately when I did that there are link borders  
on several of the
table cells that have usemaps links in them.

I tried to add link styles to eliminate them but the borders still
appear in firefox and internet explorer.  However, In Safari and  
camino the site shows up correctly.

Is there another style class or property tag that i should be using  
to make the image map borders disappear ?


Here is the site page http://cozyandbright.com/index7.html

and here are the styles I am trying to use to eliminate the borders in
firefox

style type=text/css
!--

a:link img {
 text-decoration: none;
 border:0;
 border:none;
}

a:visited img {
   color: #3366FF;
border:0;
 border:none;

}

a:hover img{
 text-decoration: none;
 border:0;
 border:none;

}

.style1 {font-size: 9px}

--
/style

Thank you,
Suisun


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


Re: [css-d] IE6 and down issue

2007-04-13 Thread Donna Jones
http://www.westendwebs.net/pulse-ie-issue/picks.html
 
 
 Adding/changing to...
 
 #content {margin: 0; float: right;}
 #insidewrapper {width: 100%; overflow: hidden;}
 * html #insidewrapper {overflow: visible;}
 
 ...will extend pixel-perfection into the IE6 down world.

Georg:  Thank you!

My inclination is to fall at your feet and worship you, good thing 
you're on the other side of the world.  and truly, i would contain 
myself if i, perchance, did meet you in person, but please know my 
gratitude and admiration is wide and deep.   (now that's not over the 
top is it?)

Cheers
Donna


-- 
Donna Jones
Portland, Maine
207 772 0266
www.westendwebs.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Please ignore: How to remove usemap link borders with css ?

2007-04-13 Thread Bradley Wright
On 13 Apr 2007, at 12:44, Susan T (cocomomi) wrote:
 please ignore my previous message.
 I have figured out what was happening with the image borders.  just
 needed to add border=0

This CSS rule should do the same thing:

 img {border:0;}

And takes up far less file size than adding that attribute to all  
images. Seems to work in FF 2.0/Mac as well.

Your previous selectors aren't working because technically speaking  
the image maps aren't links, so:

 a img {}

doesn't select the right images.



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


Re: [css-d] Semi-transparent PNGs as background images in IE6 - documentation wanted

2007-04-13 Thread Martin Heiden
Peter!

  You'll probably already know this page:

  
http://msdn.microsoft.com/workshop/author/filter/reference/filters/alphaimageloader.asp

  The element to which this filter shall be applied must have
  layout.[1]

  The filter will not create an background-image. The filter image
  lies behind the background, so you have to set the background-color
  to transparent and disable the original background-image too.

  Ingo has also made some affords to document this property:
  http://www.satzansatz.de/cssd/tmp/alphatransparency.html

 Has anyone yet taken the logical step of writing a behavior.htc that
 incorporates this solution?

  There is a htc for img-Tags.
  http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html

  This may be of interest too:
  http://www.pi-phi.de/t3v4/55.html (german)


  But I don't know an unobstrusive JS solution that automagically
  corrects the behaviour of IE =6. Maybe Dean Edwards has something
  like that in his IE7 scripts?



  Ingo's doc is probably the most complete.


I hope you'll have some time to extend that ;-)


regards,

  Martin

[1] http://www.satzansatz.de/cssd/onhavinglayoutrev07-20061019.html

  
on Friday, April 13, 2007 at 13:15 Peter-Paul Koch wrote:

 Hello,

 Yesterday I talked to a web developer who passed me a technique for
 using semi-transparent PNGs as background images even in IE6 and
 lower. The technique works, up to a point. See my test page at
 http://www.quirksmode.org/css/png/png.html .

 I already had a private conversation with someone who knows this
 technique and drew my attention to a few bugs (can't use CSS height;
 links/form fields may become unclickable unless they have a z-index).
 Before continuing my investigation, though, I'd like to know whether
 this technique has already been described.

 Therefore my question is: can anyone point me to a page that explains
 the use of semi-transparent PNGs as background images in IE6 and lower
 through the MS-proprietary
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration?
 Has anyone yet taken the logical step of writing a behavior.htc that
 incorporates this solution?

 Despite several Google searches I didn't find a real
 explanation/description, although several articles described several
 aspects of this solution. If there turns out to be no full description
 (including bugs) available, I'll have to write my own. Since I don't
 have too much time right now, I'm hoping that someone can point me to
 a description so that I can continue my real work.

 Thanks,








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


Re: [css-d] Semi-transparent PNGs as background images in IE6 - documentation wanted

2007-04-13 Thread Ingo Chao
Peter-Paul Koch wrote:
 Hello,
 
 Yesterday I talked to a web developer who passed me a technique for
 using semi-transparent PNGs as background images even in IE6 and
 lower. The technique works, up to a point. See my test page at
 http://www.quirksmode.org/css/png/png.html .
 
 I already had a private conversation with someone who knows this
 technique and drew my attention to a few bugs (can't use CSS height;
 links/form fields may become unclickable unless they have a z-index).

But when the box with the filter is positioned absolutely or relatively, 
the fix is more complicated [1].

 Before continuing my investigation, though, I'd like to know whether
 this technique has already been described.
 
 Therefore my question is: can anyone point me to a page that explains
 the use of semi-transparent PNGs as background images in IE6 and lower
 through the MS-proprietary
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader declaration?

 Has anyone yet taken the logical step of writing a behavior.htc that
 incorporates this solution?

Maybe [2].

It would be nice to have a script that allows for tiling backgrounds, as 
suggested by Paul [3].

You most probably have already looked into the IE7 code by Dean [4], 
this links to another behavior [5]

Ingo

[1] http://www.satzansatz.de/cssd/tmp/alphatransparency.html
[2] http://bjorkoy.com/past/2007/4/8/the_easiest_way_to_png/
[3] http://archivist.incutio.com/viewlist/css-discuss/86620
[4] http://dean.edwards.name/IE7/notes/#PNG
[5] http://webfx.eae.net/dhtml/pngbehavior/pngbehavior.html
-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread Jeff Chastain
Does anybody have any ideas what is happening here?  This is really driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.

 

Thanks

-- Jeff

 

From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] 
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue

 

Well, IE 6 is at it again for me.  I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing
issues.  I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal to
the floated block width plus one, which should cause there to be a 1px gap
between the two.  The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart.  Can anybody offer any suggestions here?

style type=text/css
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 {
height: 175px;
margin-left: 180px;
}
/style

div id=block1 style=background-color: #00c;Block 1/div
div id=block2 style=background-color: #00c;Block 2/div

Thanks
-- Jeff

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


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread Dave Goodchild
Could be the IE double-margin bug? Try adding display:inline to the floated
element...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread Jeff Chastain
No, I tried that one earlier and did it again just to make sure.  Even with
the 'display: inline' added to the floated box, the margin in between the
two boxes is still 4px instead of 1px.

 

Thanks

-- Jeff

 

From: Dave Goodchild [mailto:[EMAIL PROTECTED] 
Sent: Friday, April 13, 2007 8:40 AM
To: Jeff Chastain
Cc: [EMAIL PROTECTED]
Subject: Re: [css-d] IE 6 Float Issue

 

Could be the IE double-margin bug? Try adding display:inline to the floated
element... 

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


[css-d] menu troubles

2007-04-13 Thread Jake Churchill
I have a problem that I've run into before and my company had to outsource
it to a CSS Guru (Sandra Clark).  While I truly appreciated her help the
last time, I want to work through this myself.  

 

I have a page with a navigation menu across the top with a single level
dropdown and a sub-nav menu on the left sidebar.  My problem (IE only) is
that the dropdown from the main navigation menu appears under the side
navigation menu.  In firefox it works correctly.  This project is very
time-sensitive so I'm trying to work through this as quickly as possible.

The page url is
http://cfas2.cfwebtools.com/index.cfm?objectid=E6D20202-9027-F64A-799622C32F
C8C158.  

 

I'm fairly decent with CSS but when it comes to more advanced issues like
this I'm still a noob.  Can anyone help me out?

 

Thanks!

 

PS.  I didn't post any code because there's a lot of it.  If you need any of
it, please let me know and I'll supply it.

 

_

 

Jake Churchill

CF Webtools

11204 Davenport, Ste. 200b

Omaha, NE  68154

http://www.cfwebtools.com

402-408-3733 x103

 

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


Re: [css-d] menu troubles

2007-04-13 Thread Robert Lane
I don't see a left sidebarIE7 and Firefox
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] menu troubles

2007-04-13 Thread Martin Heiden
Jake,

on Friday, April 13, 2007 at 16:25 Jake Churchill wrote:

 I have a page with a navigation menu across the top with a single level
 dropdown and a sub-nav menu on the left sidebar.  My problem (IE only) is
 that the dropdown from the main navigation menu appears under the side
 navigation menu.  In firefox it works correctly.  This project is very
 time-sensitive so I'm trying to work through this as quickly as possible.

Try to set a z-index on #header. I can't test it now, but it'll
probably work. More on z-index an IE here:

http://www.aplus.co.yu/lab/z-pos/

regards

  Martin

 



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


[css-d] FIXED: menu troubles

2007-04-13 Thread Jake Churchill
I believe I have this fixed.  Thank you for the reference to
http://www.aplus.co.yu/lab/z-pos/.  I relatively positioned the #header and
provided a z-index and it seems to work now.

_

 

Jake Churchill

CF Webtools

11204 Davenport, Ste. 200b

Omaha, NE  68154

http://www.cfwebtools.com

402-408-3733 x103


-Original Message-
From: Martin Heiden [mailto:[EMAIL PROTECTED] 
Sent: Friday, April 13, 2007 9:43 AM
To: Jake Churchill; [EMAIL PROTECTED]
Subject: Re: [css-d] menu troubles

Jake,

on Friday, April 13, 2007 at 16:25 Jake Churchill wrote:

 I have a page with a navigation menu across the top with a single level
 dropdown and a sub-nav menu on the left sidebar.  My problem (IE only) is
 that the dropdown from the main navigation menu appears under the side
 navigation menu.  In firefox it works correctly.  This project is very
 time-sensitive so I'm trying to work through this as quickly as possible.

Try to set a z-index on #header. I can't test it now, but it'll
probably work. More on z-index an IE here:

http://www.aplus.co.yu/lab/z-pos/

regards

  Martin

 





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


Re: [css-d] Nested @import in IE

2007-04-13 Thread Zoe ASHER
Thanks guys! 

It's good to know that it's not me, but IE who has the problem.

Cheers,
Zoe

-Original Message-
From: Ingo Chao [mailto:[EMAIL PROTECTED] 
Sent: Friday, April 13, 2007 3:34 AM
To: cFA
Cc: Zoe ASHER; [EMAIL PROTECTED]
Subject: Re: [css-d] Nested @import in IE

cFA wrote:
 On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote:
 Hi all,

 Has anyone ever experienced a problem with having style applied in IE

 when '@import's have been nested 4 levels deep?

 I've just tried to do this, and can't view the styles which are at 
 the deepest level of nesting in IE6. Firefox works fine.

 I tried clearing my cache, but to no avail.

 Thanks (I hope!)
 Zoe


 Yes, it is a problem~ I have a test page for it, but havent found a 
 way around it, other than of course importing what I can on the same
level.
 
 http://aenonfiredesign.com/sandbox/importlevels/
 
 
 -clint
 

With this testcase, IE7 shows the same problem. Plus a pretty long FOUC.

- added it to the wiki.

Ingo

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


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


Re: [css-d] research on styling links

2007-04-13 Thread Zoe M. Gillenwater
Kelley Greenman wrote:
 I'm doing research on a problem we're having with links showing up in 
 different font sizes. The CSS someone else wrote for the links relies 
 either on the font size defined in the selector or on the font-size defined 
 by a. E.g., selector a {font-size: 12px;}.

  From my experience, the erratic font size, happening in IE 6 only, is 
 because the links for each selector haven't been defined as above. The 
 visited links are displaying in smaller font size, inheriting the font size 
 of the selector containing them. Sometimes this goes away, only to reappear 
 five minutes later. I haven't had time to fully experiment with the 
 behavior and nail it down.

 I've found the typical resources on the problem with IE and some places 
 where the LoVeHA mnemonic is mentioned. (list of links below). Are there 
 any other good resources for documenting this in the company WIKI?

 Of course, on that note, I could be all washed up, so please correct me if 
 I'm wrong about the above. 

Well, we have no way of correcting you without seeing the page. :-) You 
can correct yourself, however. Does your proposed fix work? If so, 
you're not all washed up. If not, then you are. ;-)

FWIW, I've never seen the need to specify each link pseudo-class 
separately. Of course, I've never seen the need to specify font sizes on 
the a element either -- the body and heading elements get font sizes, 
and occasionally a footer or sidebar div, but that's it. I've found that 
declaring font sizes on paragraphs, links, list items, etc, just causes 
undue complication and problems.

Post a URL to your page and we can give you some help.

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
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Any CSS GURUs?

2007-04-13 Thread Gigaboy20
I'm looking to hire an insanely smart css wizard who can hack theri way into 
doing almost anything with css.


__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread jeffrey morin
On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote:

 Does anybody have any ideas what is happening here?  This is really
 driving
 me crazy trying to figure this out as it does not seem to fit with any of
 the usual IE 'features'.



 Thanks

 -- Jeff



 From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
 Sent: Thursday, April 12, 2007 9:57 AM
 To: [EMAIL PROTECTED]
 Subject: IE 6 Float Issue



 Well, IE 6 is at it again for me.  I have a layout from a client that is
 pixel tight and while I have it working in IE 7 and FireFox, IE 6 is
 causing
 issues.  I have broken it down to the most basic issue which is one block
 being floated to the left and the main column having a left margin equal
 to
 the floated block width plus one, which should cause there to be a 1px gap
 between the two.  The following code works just fine in IE 7 and FireFox,
 but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
 apart.  Can anybody offer any suggestions here?

 style type=text/css
 #block1 {
 float: left;
 height: 175px;
 width: 179px;
 }
 #block2 {
 height: 175px;
 margin-left: 180px;
 }
 /style

 div id=block1 style=background-color: #00c;Block 1/div
 div id=block2 style=background-color: #00c;Block 2/div

 Thanks
 -- Jeff

 what about just floating the second block right instead of having the
 margin. unless i am missing the point on this?



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


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread Jeff Chastain
Well, what I have ended up doing is floating everything left.  The example
here is part of the page that is just 2 columns (the header), but below that
is a three column layout.  If I float everything left, giving all blocks a
defined width, everything appears to work.  As this is a fixed width layout,
I can go with defining widths for each block.  Not the cleanest thing in the
world, but it appears to be working.

 

Thanks

-- Jeff

 

 

From: jeffrey morin [mailto:[EMAIL PROTECTED] 
Sent: Friday, April 13, 2007 11:08 AM
To: Jeff Chastain
Cc: [EMAIL PROTECTED]
Subject: Re: [css-d] IE 6 Float Issue

 

 

On 4/13/07, Jeff Chastain [EMAIL PROTECTED] wrote:

Does anybody have any ideas what is happening here?  This is really driving
me crazy trying to figure this out as it does not seem to fit with any of
the usual IE 'features'.



Thanks

-- Jeff 



From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Sent: Thursday, April 12, 2007 9:57 AM
To: [EMAIL PROTECTED]
Subject: IE 6 Float Issue



Well, IE 6 is at it again for me.  I have a layout from a client that is
pixel tight and while I have it working in IE 7 and FireFox, IE 6 is causing

issues.  I have broken it down to the most basic issue which is one block
being floated to the left and the main column having a left margin equal to
the floated block width plus one, which should cause there to be a 1px gap 
between the two.  The following code works just fine in IE 7 and FireFox,
but in IE 6, the gap is 3+ pixels wide which is causing the layout to fall
apart.  Can anybody offer any suggestions here?

style type=text/css 
#block1 {
float: left;
height: 175px;
width: 179px;
}
#block2 { 
height: 175px;
margin-left: 180px;
}
/style

div id=block1 style=background-color: #00c;Block 1/div 
div id=block2 style=background-color: #00c;Block 2/div

Thanks
-- Jeff

what about just floating the second block right instead of having the
margin. unless i am missing the point on this? 



Jeff 

 

 

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


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread Gunlaug Sørtun
Jeff Chastain wrote:
 No, I tried that one earlier and did it again just to make sure.  Even with
 the 'display: inline' added to the floated box, the margin in between the
 two boxes is still 4px instead of 1px.

Sounds like you have moved the '3px jog bug'[1] onto a non-floated 
container, in which case you'll have to subtract 3px from a side-margin 
- in IE6 (and below) only.

regards
Georg

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


Re: [css-d] Any CSS GURUs?

2007-04-13 Thread Jim Nannery
Morning Gigaboy20

You wrote

 I'm looking to hire an insanely smart css wizard who can hack theri way 
 into doing almost anything with css.


You might want to review the list policies [1], especially the section that 
says:

No solicitations of employment or requests for applications. There are job 
boards, Web sites, mailing lists, and other venues for helping stimulate 
your local economy. Check them out.

A gentle reminder to all


[1] http://www.css-discuss.org/policies.html

Jim Nannery
www.beebar.net


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


Re: [css-d] Nested @import in IE

2007-04-13 Thread Zoe M. Gillenwater
Ingo Chao wrote:
 cFA wrote:
   
 On 4/12/07, Zoe ASHER [EMAIL PROTECTED] wrote:
 
 Has anyone ever experienced a problem with having style applied in IE
 when '@import's have been nested 4 levels deep?

 I've just tried to do this, and can't view the styles which are at the
 deepest level of nesting in IE6. Firefox works fine.
   
 Yes, it is a problem~ I have a test page for it, but havent found a way
 around it, other than of course importing what I can on the same level.

 http://aenonfiredesign.com/sandbox/importlevels/
 

 With this testcase, IE7 shows the same problem. Plus a pretty long FOUC.
   

I didn't see any FOUC, but I can confirm that the bug still exists in IE 7.

It would be helpful, however, if we weren't comparing black to gray, 
but, say, black to yellow, or something more obvious. Otherwise, a very 
nice testcase, Clint.

a different Zoe (not used to that...)

-- 
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
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] IE 6 Float Issue

2007-04-13 Thread Zoe M. Gillenwater
Jeff Chastain wrote:
 Well, what I have ended up doing is floating everything left.  The example
 here is part of the page that is just 2 columns (the header), but below that
 is a three column layout.  If I float everything left, giving all blocks a
 defined width, everything appears to work.  As this is a fixed width layout,
 I can go with defining widths for each block.  Not the cleanest thing in the
 world, but it appears to be working.
   

Why do you think isn't this clean? Floating all blocks is a perfectly 
acceptable way of making columnar layouts, and no more messy than 
floating one block and assigning another one a side margin. As you've 
found, floating all blocks is usually the most reliable way, not just 
because you avoid the 3-Pixel Bug and other bugs, but also because you 
set up new block formatting contexts for each column, which is usually 
what is desired. If this works for your layout, great -- use it.

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
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Nested @import in IE

2007-04-13 Thread cFA


 I didn't see any FOUC, but I can confirm that the bug still exists in IE
 7.

 It would be helpful, however, if we weren't comparing black to gray,
 but, say, black to yellow, or something more obvious. Otherwise, a very
 nice testcase, Clint.

 a different Zoe (not used to that...)

 --
 Zoe M. Gillenwater
 Design Services Manager
 UNC Highway Safety Research Center
 http://www.hsrc.unc.edu



Good suggestion Zoe, its now orange :)

-clint

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


[css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread ibn Ezra
Afternoon,
Have been playing around with creating a TOC for an image gallery by  
placing the anchors and h2-headlines inside an ordered list... as in:  
(ol (li (h2 (a. Used CSS to place the thumbnail images into the  
background of the individual list items -- and again to place a  
transparent png file in the background of the anchors to create a  
rollover highlight effect.

http://richmondesign.com/fsm_portfolio/index.php
http://richmondesign.com/_stylesheets/base.css

What I would really like to do is to take the text inside the anchor  
and force it to drop below the background image (with appropriate  
padding), but it doesn't look like there is a way to 'grab onto' just  
the text and do that without adverse side effects. Is this possible?

I suppose I could put the transparent png into the xhtml code inside  
the link (as opposed to background via CSS) and push the text down  
below, but I prefer the simplicity of referencing the transparent png  
just once in the style sheet.

Something of a minor tangent... is it possible to construct a  
transparent png that would de-saturate the image below to create a  
BW effect?

Thanks for all your help!
-iE

.

ibn Ezra
mailto: [EMAIL PROTECTED]

.




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


Re: [css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread Teressa Terry
Well, I think you can put the text itself inside a span tag set to
display:block and give it padding on top to force it below the images. 

Teressa
Graphic  Web Designer
Opactive


*-Original Message-
*From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On
*Behalf Of ibn Ezra
*Sent: Friday, April 13, 2007 12:01 PM
*To: CSS Discussion Group
*Subject: [css-d] TOC for Image Gallery using Ordered List  CSS
*
*Afternoon,
*Have been playing around with creating a TOC for an image gallery by
*placing the anchors and h2-headlines inside an ordered list... as in:
*(ol (li (h2 (a. Used CSS to place the thumbnail images into the
*background of the individual list items -- and again to place a
*transparent png file in the background of the anchors to create a
*rollover highlight effect.
*
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread ibn Ezra
Thanks... that moves the text down nicely. Funny that your solution  
never crossed of my mind! The only drawback is that it creates a  
large (invisible) link area beneath each image which could  
potentially compete with content in a different layout (a second row  
of gallery images for example).

Here's the result:
http://richmondesign.com/fsm_portfolio/index2.php

Thanks again,
-iE

.

ibn Ezra
mailto: [EMAIL PROTECTED]

.




On Apr 13, 2007, at 15:32 PM, nat parker wrote:

 ibn Ezra wrote:
 What I would really like to do is to take the text inside the  
 anchor  and force it to drop below the background image (with  
 appropriate  padding), but it doesn't look like there is a way to  
 'grab onto' just  the text and do that without adverse side  
 effects. Is this possible?

 If I understand what you are trying to do, you could just add  
 padding-top to:

 #content #portfolios li a {
   display: block;
   height: 91px;
   width: 147px;
   background: transparent url(../_images/vellum.png) repeat;
   padding-top: 95px;
 }


 nat

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


Re: [css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread Lori Lay
ibn Ezra wrote:
 Thanks... that moves the text down nicely. Funny that your solution  
 never crossed of my mind! The only drawback is that it creates a  
 large (invisible) link area beneath each image which could  
 potentially compete with content in a different layout (a second row  
 of gallery images for example).

   

Try removing the height from #content #portfolios li a.

This seems to work under Firebug in FF.  I'm not sure what this will do 
to IE.  IE has the same large area under the images, so hopefully 
removing the height won't cause problems.

Lori

 Here's the result:
 http://richmondesign.com/fsm_portfolio/index2.php

 Thanks again,
 -iE

 .

 ibn Ezra
 mailto: [EMAIL PROTECTED]

 .




 On Apr 13, 2007, at 15:32 PM, nat parker wrote:

   
 ibn Ezra wrote:
 
 What I would really like to do is to take the text inside the  
 anchor  and force it to drop below the background image (with  
 appropriate  padding), but it doesn't look like there is a way to  
 'grab onto' just  the text and do that without adverse side  
 effects. Is this possible?
   
 If I understand what you are trying to do, you could just add  
 padding-top to:

 #content #portfolios li a {
  display: block;
  height: 91px;
  width: 147px;
  background: transparent url(../_images/vellum.png) repeat;
  padding-top: 95px;
 }


 nat
 

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

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


Re: [css-d] Arguing with IE6

2007-04-13 Thread Kelley Minars
Thank you so much for the help. The nav and the body all work fine now. I'm
going to have to play some with the hover thing though. But again, thank you
very very much. :-)

Kelley

On 4/12/07, Gunlaug Sørtun [EMAIL PROTECTED] wrote:

 Kelley Minars wrote:
  Hello everyone. This is my first post, so I hope it goes alright.

 Just fine... welcome.

  http://tinyurl.com/yusyz6 which looks perfectly fine in Firefox,
  Opera, Safari, and IE7. However, when you look at it in IE6 it kills
  almost the entire navigation and messes up the middle content and the
   footer.

 Yes, IE6 has a few bugs... :-)

  I'm just not sure where to start.

 Probably easiest to start by ditching the entire IE specific stylesheet,
 as it's mostly a repetition of the regular one. IE is weak and buggy,
 but it'll pick up what it can make any use of from the regular
 stylesheet, and will only need a few corrections here and there.

 #menu h2 a {position: relative;}
 ...will make the main part of the menu appear right.

 IE6 can't hover anything but links, so you'll need something like the
 'whatever:hover' to make IE6 reveal those drop-downs.
 http://www.xs4all.nl/~peterned/csshover.html

 * html #contentcenter {overflow-x: hidden;}
 ...will keep IE6' 'auto-expansion' bug under control.

 body {margin: 0;}
 ...is necessary for correct line-up.

 That's the basic fixes for IE6 - once the IE specific stylesheet is gone.

 regards
 Georg
 --
 http://www.gunlaug.no

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


[css-d] Problems with IE 6 7

2007-04-13 Thread Tim Offenstein
Posted this once and it bounced. Trying again.



I have been asked to look over this site and offer some suggestions
regarding its problems. Along with my own suggestions, I thought I 
would consult
the CSS Brain Trust to see what wisdom you can offer. Your input is
greatly appreciated.

Main index - http://www.cvm.uiuc.edu/cvm/

Index style sheet - http://www.cvm.uiuc.edu/cvm/styles/main.css

Horizontal navigation - http://www.cvm.uiuc.edu/cvm/styles/menu.css

Here is a synopsis of the site owner's view of the issues:


The site is still under construction - there is quite a bit of
tweaking to do.  The major problems we are having in IE7 is that the
feature box - (right hand side image and lists of news) jumps as
the browser window is resized.  This doesn't happen in Firefox.

Also, the U of I College of Vet Med banner wants to jump to the
left hand side of the window when the browser is resized.

Finally, in IE7, in the sub-menu level (of the top horizontal
navigation), some of the secondary text links wrap instead of
staying in a straight line.


They did not mention that the site falls apart in IE6.

-Tim
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
-- 
*
 Tim Offenstein - Web Specialist - CITES  -  AHS - 244-2700
*
  A cheerful heart is a good medicine Proverbs 17:22 NRSV
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread ibn Ezra
Very nice... thanks! So much to learn; never realised that span tags  
could be enclosed within the anchor tags. Could be very handy for  
quite a few future experiments!

domo arigato!
-iE


.

ibn Ezra
mailto: [EMAIL PROTECTED]

.




On Apr 13, 2007, at 16:09 PM, Teressa Terry wrote:

 Well, I think you can put the text itself inside a span tag set to
 display:block and give it padding on top to force it below the images.

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


[css-d] 3 column displays incorrectly in IE6

2007-04-13 Thread KS
Hi,

The page below displays incorrectly in IE6. I've been trying to get
the middle column to line up horizontally with the thumbnail images in
the left column. You can see how it should look in Firefox or in FF on
a Mac for that matter. Any help would be greatly appreciated.

Page: http://tang.skidmore.edu/oex/contexts/authors/bach.htm
CSS: http://tang.skidmore.edu/oex/contexts/ie.css

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


Re: [css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread ibn Ezra
Works great with the latest versions of IE, Firefox, Safari and Opera  
and without additional mark-up! Don't have IE 6 handy to see what  
happens (already know the transparent png rollover won't work).

http://richmondesign.com/fsm_portfolio/index4.php

toda raba!
-iE

.

ibn Ezra
mailto: [EMAIL PROTECTED]

.




On Apr 13, 2007, at 16:21 PM, Lori Lay wrote:

 ibn Ezra wrote:
 Thanks... that moves the text down nicely. Funny that your solution
 never crossed of my mind! The only drawback is that it creates a
 large (invisible) link area beneath each image which could
 potentially compete with content in a different layout (a second row
 of gallery images for example).



 Try removing the height from #content #portfolios li a.

 This seems to work under Firebug in FF.  I'm not sure what this  
 will do
 to IE.  IE has the same large area under the images, so hopefully
 removing the height won't cause problems.

 Lori

 Here's the result:
 http://richmondesign.com/fsm_portfolio/index2.php

 Thanks again,
 -iE

 .

 ibn Ezra
 mailto: [EMAIL PROTECTED]

 .




 On Apr 13, 2007, at 15:32 PM, nat parker wrote:


 ibn Ezra wrote:

 What I would really like to do is to take the text inside the
 anchor  and force it to drop below the background image (with
 appropriate  padding), but it doesn't look like there is a way to
 'grab onto' just  the text and do that without adverse side
 effects. Is this possible?

 If I understand what you are trying to do, you could just add
 padding-top to:

 #content #portfolios li a {
 display: block;
 height: 91px;
 width: 147px;
 background: transparent url(../_images/vellum.png) repeat;
 padding-top: 95px;
 }


 nat


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


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

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


Re: [css-d] TOC for Image Gallery using Ordered List CSS

2007-04-13 Thread Lori Lay
ibn Ezra wrote:
 Works great with the latest versions of IE, Firefox, Safari and Opera 
 and without additional mark-up! Don't have IE 6 handy to see what 
 happens (already know the transparent png rollover won't work).

 http://richmondesign.com/fsm_portfolio/index4.php

 toda raba!
 -iE

 .

 ibn Ezra
 mailto: [EMAIL PROTECTED]

 .


Looks ok in IE 6 too.  The images look like they do in FF when you hover 
over them, which I think is what you expected.  The only problem is with 
the main title.  In IE the PNG isn't working so the title looks jagged.

You should be able to use browsershots to see what it looks like in IE 6.

http://browsershots.org/

Lori

PS What does toda raba mean?  I know what domo arigato means, but 
that's the extent of my Japanese :-)



 On Apr 13, 2007, at 16:21 PM, Lori Lay wrote:

 ibn Ezra wrote:
 Thanks... that moves the text down nicely. Funny that your solution
 never crossed of my mind! The only drawback is that it creates a
 large (invisible) link area beneath each image which could
 potentially compete with content in a different layout (a second row
 of gallery images for example).



 Try removing the height from #content #portfolios li a.

 This seems to work under Firebug in FF.  I'm not sure what this will do
 to IE.  IE has the same large area under the images, so hopefully
 removing the height won't cause problems.

 Lori

 Here's the result:
 http://richmondesign.com/fsm_portfolio/index2.php

 Thanks again,
 -iE

 .

 ibn Ezra
 mailto: [EMAIL PROTECTED]

 .




 On Apr 13, 2007, at 15:32 PM, nat parker wrote:


 ibn Ezra wrote:

 What I would really like to do is to take the text inside the
 anchor  and force it to drop below the background image (with
 appropriate  padding), but it doesn't look like there is a way to
 'grab onto' just  the text and do that without adverse side
 effects. Is this possible?

 If I understand what you are trying to do, you could just add
 padding-top to:

 #content #portfolios li a {
 display: block;
 height: 91px;
 width: 147px;
 background: transparent url(../_images/vellum.png) repeat;
 padding-top: 95px;
 }


 nat


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


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

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


Re: [css-d] Comments on a summary of what happens in Quirks Mode?

2007-04-13 Thread Bruno Fassino
Jukka K. Korpela wrote:

 I have tried to summarize the effects of Quirks Mode, since
 the summaries and notes that I found were rather limited.
 Would someone like to comment on what's missing?
 What happens in Quirks Mode?
 http://www.cs.tut.fi/~jkorpela/quirks-mode.html

Speaking of IE7, and according to Microsoft [1] there is a long list of bug
fixing and new features only available in standards mode. Nothing outside
the things you already mentioned, but you could add something more, like
support for child selectors, correct support for !important, ...

In theory they wanted IE7 in quirks mode to behave exactly as IE6 in quirks
mode (including /all/ bugs), to avoid any maintenance problems for quirks
mode pages. This is almost true, even if I've found small discrepancies
(fixes that have slipped through in quirks mode, at least partially.)


Two small comments on your page:
1) About 'Vertical alignment of images', I believe you should add: if they
are the only content of the enclosing block, since in presence of text  the
alignment is always 'baseline'.

2) About 'Default horizontal padding for a floated image', I believe it is
3px not 2px.

Bruno



[1] http://blogs.msdn.com/ie/archive/2006/08/22/712830.aspx

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


[css-d] Stop me before I add content!! - A browser check, an advice check - General Testing

2007-04-13 Thread Christopher Blake
Hi all.

http://www.3pointdesign.com/

http://www.3pointdesign.com/styles/one.css

This is eventually going to be the home of my new site. After months  
of redesigning and changing my mind I have got something that I am  
happy with. Before I start adding too much content, could people  
please give me as much feedback as possible with regards to browser  
testing, things to be aware of etc.

Kind regards, Chris



Christopher Blake
[EMAIL PROTECTED]
07816163420



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


Re: [css-d] Checking your proposed site

2007-04-13 Thread Christopher Blake




On 13 Apr 2007, at 23:44, Jim Chaffin wrote:

 First the pros:
 1. Interesting method for drop down menus! Enlarging text size  
 doesn't destroy them!

I got this system from Project 7 having spent ages learning lots of  
different techniques. Because someone else has written the css a lot  
of trial and error still goes into it to customize.

 2. Like the subtle colors!

Thanks. - I may have just destroyed that with the flash animation so  
far (going to slow it down - don't worry) http://www.3pointdesign.com/

 Now the 'Cons':
 1. I think margin values in #wrapper {width: 800px; height: 600px;  
 margin: 10px auto; are causing my horizontal scrolling issues when  
 the window is set to 800 x 600.

What are the scrolling issues like? Can you recommend anything to fix  
this? I thought that these margin properties were standard ways of  
centering a page. Maybe I could add padding to the body, but I have  
not seen that before - and then all descendents will get messed up  
unless I specifically tell them not to.

 2. FF ( v. 2.0.0.2, Mac ) doesn't quite line up the rounded corner  
 blocks with their shaded 'brothers' to their right. Seems each row  
 gets further out of alignment.

Yeh, they're not aligned properly in Safari either. I might look into  
this but I wasn't initially intending to have the containers on the  
left to be a fixed size. I think for visual sense that I should now -  
so my guess is probably something to with borders or class values.

 Question:
 Is there an advantage of using javascript to load some CSS? I only  
 saw your new styles because I specifically allow current-domain  
 scripts, otherwise, all other js is blocked.

The reason is because the menu is from project 7. - If only I could  
write css like that! LOL. I am concerned though with people having  
java switched off, but having researched a little the percentages  
were quite high in favor of them being on. Also I am mucking around  
(a tiny bit) with 'scriptaculous'  -it probably won't lead to  
anything but that uses java too.

 Personal:
 Not fond of Flash, but to each his own, at least yours is not  
 wasting too much vertical space! ;-) However, after allowing it to  
 display, I'm wondering if your planning on some animation. If not  
 you could use a simple jpeg/gif/png...

The beginning of the animation is already in place i.e. colour  
changes. I am not a keen fan of flash either, believe it or not, but  
for my market, it seems to be quite generic to have some in there. I  
am so pleased that you recognised that it is not complete overkill!

 Hope you 'content' is as good as your CSS! ;-)

LOL. I am sure you are referring to that of project 7 - but i'll take  
the compliment anyway! Yeh, check back in a week's time and I should  
have quite a lot more up there.

Thanks Jim,

Kind regards, Chris

 J. Chaffin
 --
 I planted some birdseed. A bird came up.
 Now I don't know what to feed it.


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


Re: [css-d] Stop me before I add content!! - A browser check, an advice check - General Testing

2007-04-13 Thread Joanne
In IE7  Firefox, the first row of boxes lines up, but the bottom two rows
don't. Not sure if you wanted them all to line up. 

Your rounded corners box where the navigation is just shows white and not
your background diagonal image.

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


Re: [css-d] Semi-transparent PNGs as background images in IE6

2007-04-13 Thread Roger Gordon
Therefore my question is: can anyone point me to a page that explains
the use of semi-transparent PNGs as background images in IE6 and lower
through the MS-proprietary
filter:progid:DXImageTransform.Microsoft
.AlphaImageLoader declaration?
Has anyone yet taken the logical step of writing a behavior.htc that
incorporates this solution?

Apologies if I'm wrong, but I'm pretty sure I read about this a while
back on alistapart.com

Have a look at http://www.alistapart.com/articles/pngopacity/ and see
if it describes the same thing.
Hope this helps :)

-- 
Roger Gordon
---
www.rogergordon.net
+27 (0)76 306 4578
---
One mouse click donates 1.5 cups of food to poor people worldwide
(free of charge).
Click below.
http://www.thehungersite.com/clickToGive/home.faces?siteId=1
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


Re: [css-d] Horizontal navigation. Unwanted space between list padding reaching out of container.

2007-04-13 Thread David Hucklesby
On Fri, 13 Apr 2007 02:53:39 +0100, Christopher Blake wrote:

 http://www.3pointdesign.com/index2.html

 http://www.3pointdesign.com/styles/one.css

 Hi all,

 I am trying to clear the space between the buttons. I also don't like the way 
 the
 padding is going above the ul. It would be great if you could help me.


Hi Chris,

I don't see any styles for the navigation in your CSS at all. ??

Cordially,
David
--


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


Re: [css-d] Problems with IE 6 7

2007-04-13 Thread David Hucklesby
On Fri, 13 Apr 2007 15:24:41 -0500, Tim Offenstein wrote:

 I have been asked to look over this site and offer some suggestions regarding 
 its
 problems. Along with my own suggestions, I thought I would consult
 the CSS Brain Trust to see what wisdom you can offer. Your input is greatly 
 appreciated.

 Main index - http://www.cvm.uiuc.edu/cvm/

 Index style sheet - http://www.cvm.uiuc.edu/cvm/styles/main.css

 Horizontal navigation - http://www.cvm.uiuc.edu/cvm/styles/menu.css

 [...]

Hi Tim,
I see several problems in Opera and Firefox too:

- My Win xp laptop is set to 120 DPI - a common factory setting for 
hi-def screens. This makes text larger in Opera, as well as for IE 
unless you use pixels. In any case, your visitors can change text size
using various browser options. All these situations break the page,
one way or another.

- The drop-down menu is unusable for keyboard users.

- Drop-downs break to two lines when text is larger. Links on the
second line are unreachable.

- There are many links on the page that do not look like links.
I found them by tabbing through them  :)

- Heights in pixels won't reliably contain text.

- I did not try resizing the window, but I don't think many visitors
spend much time doing that.

I suggest you make up reduced cases of each problem area and post
them to the list with a description of the problem you are having.
You may well find that a reduced case will reveal the solution anyway,
so it's a worthwhile effort.

This is just my opinion, not intended to discourage you.

Cordially,
David
--


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


Re: [css-d] Stop me before I add content!! - A browser check, an advice check - General Testing

2007-04-13 Thread David Hucklesby
On Fri, 13 Apr 2007 22:09:34 +0100, Christopher Blake wrote:
 Hi all.

 http://www.3pointdesign.com/

 http://www.3pointdesign.com/styles/one.css

 This is eventually going to be the home of my new site. After months of 
 redesigning and
 changing my mind I have got something that I am happy with. Before I start 
 adding too
 much content, could people please give me as much feedback as possible with 
 regards to
 browser testing, things to be aware of etc.

Interesting concept. I usually start out with content, mark it up
sensibly first, then add styles after.

Still - the first impression is nice. I suggest you use a valid method
of including Flash, rather than the deprecated EMBED[1].
It may help with IE 7, too.

The footer text @ 9px is tiny on my laptop - equal to 5 points on a
printed page. If I increase text size, the welcome message bursts
out of its box.

You may like to use a spell checker once you have meaningful content.
(I know I can't get away without one.)

[1] http://blog.deconcept.com/swfobject/

Cordially,
David
--


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