Re: [css-d] Z-index and positioning
Hi Marje, Yes, positioned elements (relative or absolute) can be assigned a z-index. Here's the CSS 2.1 spec from the World Wide Web Consortium: http://www.w3.org/TR/CSS21/visuren.html#z-index Be Well, Joe - Original Message - From: "Marje Cannon" <[EMAIL PROTECTED]> To: Sent: Friday, July 27, 2007 6:01 PM Subject: [css-d] Z-index and positioning > When I learned about z-indexes umpteen years ago, it was in connection with > absolutely positioned elements. And I assumed, maybe incorrectly, that > Z-index always applied to absolutely positioned elements. And that's the way > I used them. > > I just saw an example of a relatively positioned element with a z-index. > > And over at w3schools I found this: > > Note: Z-index only works on elements that have been positioned (eg > position:absolute;)! > > So am I correct in understanding that as long as an element is positioned > (relative, absolute, etc) it can have a Z-index? > > > > __ > 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] Site Check
Thanks Sophie,
Good tip.
Joe
- Original Message -
From: "Sophie Van Waesberghe" <[EMAIL PROTECTED]>
To: "Joe Schmitt" <[EMAIL PROTECTED]>; "Your Name"
<[EMAIL PROTECTED]>;
Sent: Wednesday, July 25, 2007 5:08 AM
Subject: Re: [css-d] Site Check
> For the gap after the header: rather than getting rid of the spacing in
> the HTML try:
>
> img {
> vertical-align: bottom;
> }
>
> I forget the entire explanation, but essentially what happens is that
> IE6 leaves a gap to allow for descenders (the bits of letters that stick
> out downwards). Of course, images won't have descenders, but the gap
> stays. This only applies to images that are set to display inline.
>
> Hope that helps :)
>
> Sophie
>
> -Original Message-
> From: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] On Behalf Of Joe Schmitt
> Sent: 24 July 2007 22:45
> To: Your Name; css-d@lists.css-discuss.org
> Subject: Re: [css-d] Site Check
>
> Hi Matthew,
>
> I got rid of the 4 pixel gap by removing extra spaces in the html code
> for the header section:
>
> alt="Top half of patch." height="88" width="141">
> alt="Website logo." height="88" width="300">
> alt="Creators of the website." height="88" width="324">
>
>
>
> Not sure why but adding "border: 1px solid #f2aa20;" to the ".leftnav
> li"
> styling in the CSS file removes the extra space in the left nav.
> any color works, but if change it to a 0px border the extra space comes
> back.
> So, it's a hack, but maybe you can use it as a starting point to figure
> out the problem.
>
> .leftnav li {
> font-family: "Times New Roman", Times, serif;
> font-size: 12pt;
> text-align: center;
> line-height: 18pt;
> border: 1px solid #f2aa20;
> }
>
> Be Well,
> Joe
>
> - Original Message -
> From: "Your Name" <[EMAIL PROTECTED]>
> To:
> Sent: Tuesday, July 24, 2007 3:25 PM
> Subject: [css-d] Site Check
>
>
> >
> > I am looking for a site check before I begin to add content to this
> site.
> >
> > The HTML link is: http://www.eddysound.com/filing/
> >
> > The CSS link is: http://www.eddysound.com/filing/style/epso.css
> >
> > First, I have a few problems in IE 6. There is a 4 pixel gap between
> the
> header and content div. Why is this? Of course Firefox shows it
> correctly
> without the gap. Any ideas on how to fix this?
> >
> > Second, is there a better way to style my secondary and tertiary
> navigation in regards to line height / padding / margin? In IE 6 the
> navigation becomes extremely spacious and looks terrible. Any help or
> suggestions would be greatly appreciates to fix this. I am currently
> using
> the line-height attribute but feel there might be a better way.
> >
> > If you have any other suggestions or ways in which I can make this
> site
> better please feel free to let me know.
> >
> > Thanks,
> >
> > Matthew Stoneback
> >
> > __
> > 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/
>
__
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] Site Check
Hi Matthew,
I got rid of the 4 pixel gap by removing extra spaces in the html code for
the header section:
Not sure why but adding "border: 1px solid #f2aa20;" to the ".leftnav li"
styling in the CSS file removes the extra space in the left nav.
any color works, but if change it to a 0px border the extra space comes
back.
So, it's a hack, but maybe you can use it as a starting point to figure out
the problem.
.leftnav li {
font-family: "Times New Roman", Times, serif;
font-size: 12pt;
text-align: center;
line-height: 18pt;
border: 1px solid #f2aa20;
}
Be Well,
Joe
- Original Message -
From: "Your Name" <[EMAIL PROTECTED]>
To:
Sent: Tuesday, July 24, 2007 3:25 PM
Subject: [css-d] Site Check
>
> I am looking for a site check before I begin to add content to this site.
>
> The HTML link is: http://www.eddysound.com/filing/
>
> The CSS link is: http://www.eddysound.com/filing/style/epso.css
>
> First, I have a few problems in IE 6. There is a 4 pixel gap between the
header and content div. Why is this? Of course Firefox shows it correctly
without the gap. Any ideas on how to fix this?
>
> Second, is there a better way to style my secondary and tertiary
navigation in regards to line height / padding / margin? In IE 6 the
navigation becomes extremely spacious and looks terrible. Any help or
suggestions would be greatly appreciates to fix this. I am currently using
the line-height attribute but feel there might be a better way.
>
> If you have any other suggestions or ways in which I can make this site
better please feel free to let me know.
>
> Thanks,
>
> Matthew Stoneback
>
> __
> 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] :: mac/ie5.2 min-height ::
Hi David,
I mistakenly thought that the problem was noticeable when you compared the
"about" page with another one (say Medicine), both in IE 5.2 on the Mac.
I noticed that "CELIAC TODAY" in the banner below the nav is positioned
differently on the two pages, and thought that might have something to do
with it.
I found that the style for the h1 tag is different for the two pages, when I
used the same code for both pages, the text lined up in the same spot on
both pages.
I'm sending the info in case you want both pages to look the same:
In the utility.css file used by the "About" page the h1 block is:
h1 {
color : #eee685;
font-size : 270%;
font-weight : normal;
letter-spacing : -0.03em;
line-height : 0.95;
margin : 10px auto 0 auto;
word-spacing : -1em;
text-align : center;
}
In the common.css file used by the "Medicine" page the h1 block is:
h1 {
color : #eee685;
font-size : 270%;
font-weight : normal;
letter-spacing : -0.03em;
line-height : 0.95;
margin : 0 0 0 8px;
padding-top : 12px;
word-spacing : -1em;
text-align : center;
width : 400px;
}
Be Well,
Joe
- Original Message -
From: "David Laakso" <[EMAIL PROTECTED]>
To: "Ingo Chao" <[EMAIL PROTECTED]>
Cc: "css discuss"
Sent: Tuesday, July 24, 2007 1:32 PM
Subject: Re: [css-d] :: mac/ie5.2 min-height ::
> Ingo Chao wrote:
> > David Laakso wrote:
> >> Of the clickable pages only the "About" page (top left link) is not
> >> honoring a min-height filter for the header. Where be my error?
> >> login: sg
> >> pass: Q79apM
> >> uri:
> >>
> >> Thank you.
> >> ~dL
> >>
> >>
> >
> > In the About page, I cannot spot any difference between IEMac5.2 and
> > Firefox 2.0.0.5/Mac. While this is exciting, where is the error?
> >
> > Ingo
> >
>
>
>
>
> This is embarrassing. I see now it is fixed, too. Apparently I wrote
> prior to uploading the correct style sheet for that page. Apology for
> wasting your valuable time!
>
> ~d
>
> --
> http://chelseacreekstudio.com/
>
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7 information -- http://css-discuss.incutio.com/?page=IE7
> List wiki/FAQ -- http://css-discuss.incutio.com/
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-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] Request For Pre-launch Site Review
Hi, Any feedback is welcome. If someone with a Mac could check that the sub-nav appears and is functional, it would be much appreciated (hopefully it will work back to IE 5.2). Here's the link to the index page: http://www.sofika.com/samplesite-a/index.html The "Events" and "Gift Shop" links should each present a three item sub-nav when moused over (offset to the right). I posted screen shots of how the sub-navs should look when on the statement page: When the Events nav button is moused over: http://www.sofika.com/samplesite-a/events-sub_statement-page.gif When the Gift Shop nav button is moused over: http://www.sofika.com/samplesite-a/giftshop-sub_statement-page.gif Thanks, Joe __ 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] selector for missing attribute?
Good point.
I've stopped using HTML attributes where ever possible, so it didn't occur
to me.
I would've used something like:
caption, th, td {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
This is a table
heading
heading
data
data
data
data
Joe
- Original Message -
From: "Jukka K. Korpela" <[EMAIL PROTECTED]>
To:
Sent: Sunday, July 22, 2007 3:52 AM
Subject: Re: [css-d] selector for missing attribute?
> On Sun, 22 Jul 2007, Joe Schmitt wrote:
>
> > caption, th, td {
> > text-align: left;
> > }
> >
> > Now all browsers (including IE) will left align the "th" elements as the
> > default.
>
> They will, but this works all too well: align attributes in HTML markup
> will not override it. By the CSS cascade rules - and browsers follow them
> in this respect - presentational HTML attributes will be mapped
> (internally by a browser) to CSS rules that have the lowest possible
> specificity.
>
> --
> 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-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] selector for missing attribute?
Two and a half questions:
1. Is there a construct which I can use for an undefined attribute?
2. Is it valid to define text-align: attr(align) as in the code above? All
the examples I have seen restrict the use of attr() to defining "content:".
The half question:
a. If the answer to both the foregoing is No, how would you recommend coding
this requirement in CSS?
Hi Trevor,
1. I don't think so.
2. The w3c site has guides showing specs for the different versions of CSS:
http://www.w3.org/Style/CSS/#specs
Here is the link to the spec for text-align in CSS 2.1:
http://www.w3.org/TR/CSS21/text.html#alignment-prop
The only valid attributes are:
left | right | center | justify
Suggested fix:
You can set a default position at the beginning of your CSS file:
caption, th, td {
text-align: left;
}
Now all browsers (including IE) will left align the "th" elements as the
default.
Here is a detailed discussion of the concept:
http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
http://meyerweb.com/eric/thoughts/2007/05/15/
Joe
- Original Message -
From: "Trevor Nicholls" <[EMAIL PROTECTED]>
To:
Sent: Sunday, July 22, 2007 2:01 AM
Subject: [css-d] selector for missing attribute?
Hi
I must be wrong, because it's surely a basic feature, but it seems that it
is not possible to define a selector which matches elements which *don't*
have a particular attribute.
I am taking HTML which contains alignment attributes on table cells where
the originating software considers this appropriate, e.g.
This is a table
heading
heading
data
data
data
data
The alignment attributes are generated with the assumption that all table
cells and headings are left-aligned by default, but this leads to an issue
with the default behaviour of IE (which is to left-align elements, but
center elements).
So I want to style this with something like
tr[^align], th[^align] {
text-align: left;
}
tr[align], th[align] {
text-align: attr(align);
}
where the [^align] piece means select elements which do NOT have an align
attribute. There doesn't seem to be such a construct in CSS.
Two and a half questions:
1. Is there a construct which I can use for an undefined attribute?
2. Is it valid to define text-align: attr(align) as in the code above? All
the examples I have seen restrict the use of attr() to defining "content:".
The half question:
a. If the answer to both the foregoing is No, how would you recommend coding
this requirement in CSS?
Cheers
T
Trevor Nicholls
Casting the Void
__
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] image border hover states
IE6 only understands "hover" for the anchor (link) tag .
You might try assigning an ID to the anchor tag ("
CSS
#image-01:hover {
border: 2px solid #777;
}
It's possible to to expand the hover functionality in IE to other tags, you
can use "behaviors" or ".htc" files.
Peter Nederlof has created an .htc file which allows "hover" functionality
to be applied to any tag viewed in the IE browser.
Here's the link to his site. He begins by explaining the need for the file
and how it works. Near the bottom of the page is a link to the file.
http://www.xs4all.nl/~peterned/csshover.html
Give it a try, it works,
Joe
- Original Message -
From: "Jason Chan" <[EMAIL PROTECTED]>
To:
Sent: Sunday, June 17, 2007 6:32 PM
Subject: [css-d] image border hover states
> thanks all for answering my first question regarding the image border. i
> have take your advice and used the display: block property for the image.
>
> however, i ran into another problem regarding the hover state.
> basically i want the border of the image to change colors when hovered
over
> and so far this is what i got. It works in FF but not in IE6.
>
> XHTML:
>
>
>
> Design
>
> />
>
>
>
> View Portfolio
> Hire Me
>
>
>
>
>
>
> CSS:
>
> #design img {
> display: block;
> width: 264px;
> height: 67px;
> margin: 0 0 10px 0;
> padding: 0;
> border: 2px solid #ff;
>
> }
>
> #design img:hover {
> border: 2px solid #777;
> }
>
> _
> Make every IM count. Download Messenger and join the i'm Initiative now.
> It's free. http://im.live.com/messenger/im/home/?source=TAGHM_June07
>
>
> __
> 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] Min-Height Fix/Hack?
Hi Craig,
The min- and max- properties aren't supported in IE browsers prior to
version 7.
There's a great article on the ALA site (written by Matthew Levine), it
covers getting all your columns to be the same length and how to prevent the
main content from bleeding over the footer, and a bunch more:
In Search of the Holy Grail:
http://www.alistapart.com/articles/holygrail
I hope you find it useful, I know I did.
Joe
- Original Message -
From: "Craig Givens" <[EMAIL PROTECTED]>
To: "css-d"
Sent: Sunday, April 08, 2007 11:51 PM
Subject: [css-d] Min-Height Fix/Hack?
> Hi -
>
> Does anyone know a good min-height fix/hack that would work for my page:
> http://home.bellsouth.net/p/PWP-dzine
>
> I'm trying to get the body text not to bleed over the footer and
> expand gracefully. The same effect happens on page2.html - which is
> linked from that homepage.
>
> I've tried this code:
>
> contents {
> width:970px;
> background:#ff;
> display: table;
> min-height:500px;
> height:auto !important;
> height:500px;
> }
>
> but that didn't seem to work well.
>
> thanks for any help!
> -Craig
> __
> 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] Site check for formever.org (PNG Info for anyone interested)
Hi Dave, Started working on this before I saw your "Completed" message. I used a few of your images to show how to display PNG files in IE 5-6. A filter needs to be loaded in the IE browser to allow the transparency to work. I created a page with an example and some links to further info. http://www.joeschmittjr.com/css-d/07-03-29_SiteCheckForFormever.org/HomePage-reduced.htm Hope someone finds it useful. Joe - Original Message - From: "Dave M G" <[EMAIL PROTECTED]> To: "CSS Discuss" Sent: Thursday, March 29, 2007 4:23 AM Subject: [css-d] Site check for formever.org > CSS-d, > > If any of you out there would be kind enough to tell me if you see any > errors on your browser/platform, that would be really awesome. I've > checked that my design validates. > > The design I'd like to test is here: > http://formever.org/css_test > > I'm using FireFox on Ubuntu(Linux), and that's all I personally have for > testing (well, I suppose I could check in Konqueror, but I'm more > interested in Mac and Windows issues). > > Here's what it looks like for me: > http://formever.org/firefox_linux.png > > To get corners and borders around the main content area, I'm using the > Javascript solution from here: > http://www.456bereastreet.com/archive/200609/transparent_custom_corners_and_borders_version_2/ > > This does use PNGs with transparency, which I could probably avoid. But, > since the new IE is supposed to properly support PNG, and phase out the > old versions, hopefully the time is ripe to start going in the direction > of taking full advantage of PNGs. > > The design should be reasonably fluid. It breaks if you shrink the > window horizontally to below somewhere around 300 to 400 pixels. And > will break if you scale to somewhere above 2000 pixels wide. > > I'm trying to leave it open for most text to be resized up or down > without too much destruction, but right now the two tabs above the main > content area move out of place if the text size deviates from 1em (on my > machine, anyway). Suggestions for how to cope with that are welcome. > > Thank you for any help, and I hope to hear from you. > > -- > Dave M G > Ubuntu 6.10 Edgy Eft > Kernel 2.6.20-5-generic > Pentium D Dual Core Processor > PHP 5, MySQL 5, Apache 2 > > > __ > 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/
