Re: [WSG] Negative Margins
Jolorence Santos wrote: Bruce, Using negative margin is quite mouthful, it may display fine in latest browsers which supports web standards but if you consider to target some of those primitive browsers, I think you should be carefeul using it. :) ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** Yeah it is important that if the browsers dont support negative margins that the site still works. So only use them for effects that will degrade to what is a reasonable degree for the specific site your working on. As of course for all advanced css features. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Transparent PNGs in IE
Yet another of 'those' threads
Yep!
In a quickie... here's my document structure:
ol class=list-tiles
lia href=#img src=image.png alt= title= //a/li
/ol
The li Element is repeated by the server. And Image.png has index-like
transparency.
And the appropriate CSS (for IE... Standards Compliant browsers get a
different CSS file)
.list-tiles {
border: 1px solid yellow;
margin: 0;
padding: 0;
list-style: none;
}
.list-tiles li {
margin: 0;
padding: 0;
display: inline; }
.list-tiles li a {
padding: 1px; margin: 0;
border: none;
}
.list-tiles li a:hover {
padding: 0;
border: 1px solid green;
}
.list-tiles li a img {
margin: 0;
padding: 7px;
margin: auto;
border: none;
width: 100px;
height: 100px;
background: no-repeat center center;
}
(the borders are there for edge finding, except for the a:hover, which
is my desired effect)
I'm using the Sleight JavaScript to get IE6 to render the PNG files, but
there's a problem
...IE ignores the padding and margins oe the img and its container, the
AlphaImageLoader only supports scaling the image to fit the dimensions
of the img element... which makes the image element bigger than the
114px specified.
crop places the image in the top left hand corner, as does image,
thus ignoring the center center rule I've defined for the background.
Does anyone have any suggestions?
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Transparent PNGs in IE
David R wrote: The li Element is repeated by the server. And Image.png has index-like transparency. Unless I'm misunderstanding: if you have a PNG with simple index transparency, rather than 8 bit transparency, just save it as a PNG-8...IE can handle those just fine without any filter, javascript or other hack. -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.com ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
ADMIN - thread closed Re: [WSG] Web Standards Developer Job
On Sun, 09 Jan 2005 19:32:23 -0500, Bruce wrote: reply where? Thread closed, please. Daniel was being very naughty (gosh, I feel like the alternate personality for the Heart of Gold in HHGTTG g) in posting the job here - the mail guidelines clearly say that 'Employment opportunities' aren't in the scope of the list - http://webstandardsgroup.org/mail/guidelines.cfm Lea -- Lea de Groot Elysian Systems - I Understand the Internet http://elysiansystems.com/ Search Engine Optimisation, Usability, Information Architecture, Web Design Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: ADMIN - thread closed Re: [WSG] Web Standards Developer Job
Ok, Seems like keeping developers employed in jobs that support web standards would be important to web standards themselves. Promise I won't do it again. d. === Daniel Hamilton Web Developer Computershare Technology Services + 61 2 8234 5058 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Lea de Groot Sent: Monday, January 10, 2005 1:46 PM To: wsg@webstandardsgroup.org Subject: ADMIN - thread closed Re: [WSG] Web Standards Developer Job On Sun, 09 Jan 2005 19:32:23 -0500, Bruce wrote: reply where? Thread closed, please. Daniel was being very naughty (gosh, I feel like the alternate personality for the Heart of Gold in HHGTTG g) in posting the job here - the mail guidelines clearly say that 'Employment opportunities' aren't in the scope of the list - http://webstandardsgroup.org/mail/guidelines.cfm Lea -- Lea de Groot Elysian Systems - I Understand the Internet http://elysiansystems.com/ Search Engine Optimisation, Usability, Information Architecture, Web Design Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** --- This email and any files transmitted with it are solely intended for the use of the addressee(s) and may contain information that is confidential and privileged. If you receive this email in error, please advise us by return email immediately. Please also disregard the contents of the email, delete it and destroy any copies immediately. Computershare Limited and its subsidiaries do not accept liability for the views expressed in the email or for the consequences of any computer viruses that may be transmitted with this email. This email is also subject to copyright. No part of it should be reproduced, adapted or transmitted without the written consent of the copyright owner. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] styling ordered and unordered lists
Hi I am trying to have an unordered list that is styled nicely with an arrow graphic, however now I get the arrow graphic in my ordered list as well. Could someone please have a look here: http://learnline.cdu.edu.au/wip/css/liststest.html and give me an idea of what I can do to get around this. The lists are contained within a class called main left - assuming that this will eventually become the left column. Thanks very much *** Helen Rysavy Web Designer, Teaching Learning Development Charles Darwin University, Northern Territory 0909 Tel: 8946 7779 Mobile: 0403 290 842 mailto:[EMAIL PROTECTED] www.cdu.edu.au CRICOS Provider No: 00300K *** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] styling ordered and unordered lists
Your code should read:
style type=text/css
.mainleft ul {
margin: 15px 0px;
padding: 0px;
list-style: none
}
.mainleft ol {
list-style-type: decimal;
}
.mainleft li {
padding: 0px 0px 0px 25px;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
}
.mainleft ul li {
background: url(images/bullet.gif) no-repeat 6px top;
}
/style
Add the parent to the style to get the desired output for UL's only.
doit4Jesus,
Chris Moncus
chrismoncus.com
AIM: HPPChrisMoncus
On Jan 9, 2005, at 11:00 PM, [EMAIL PROTECTED] wrote:
Hi
I am trying to have an unordered list that is styled nicely with an
arrow
graphic, however now I get the arrow graphic in my ordered list as
well.
Could someone please have a look here:
http://learnline.cdu.edu.au/wip/css/liststest.html
and give me an idea of what I can do to get around this. The lists are
contained within a class called main left - assuming that this will
eventually become the left column.
Thanks very much
***
Helen Rysavy
Web Designer, Teaching Learning Development
Charles Darwin University, Northern Territory 0909
Tel: 8946 7779 Mobile: 0403 290 842
mailto:[EMAIL PROTECTED]
www.cdu.edu.au
CRICOS Provider No: 00300K
***
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] W3C Semantics Checker
http://www.w3.org/2003/12/semantic-extractor.html Great tool Absolutely, but with a major flaw (imho) It completely ignores tables, period. If I point it at my homepage (leftjustified.net), it gives a good outline of the page but makes no mention of the well structured, correctly labelled data table. So if this thing is extracting semantic data, why would it ignore a semantically correct data table... Bah humbug! (sorry, still trying to lose the christmas spirit ;) Andrew. --- http://leftjustified.net/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] styling ordered and unordered lists
Yes, the background image is related to li
remove image from .mainleft li and add
.mainleft ul li {image info)
Bruce
www.bkdesign.ca
[EMAIL PROTECTED] wrote:
Hi
I am trying to have an unordered list that is styled nicely with an arrow
graphic, however now I get the arrow graphic in my ordered list as well.
Could someone please have a look here:
http://learnline.cdu.edu.au/wip/css/liststest.html
and give me an idea of what I can do to get around this. The lists are
contained within a class called main left - assuming that this will
eventually become the left column.
Thanks very much
***
Helen Rysavy
Web Designer, Teaching Learning Development
Charles Darwin University, Northern Territory 0909
Tel: 8946 7779 Mobile: 0403 290 842
mailto:[EMAIL PROTECTED]
www.cdu.edu.au
CRICOS Provider No: 00300K
***
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] styling ordered and unordered lists
Hello Helen,
This might work:
ul
{ list-style: none;
list-style-image: url(../Images/Graphics/arrow.gif); }
Kind regards,
Mario
Hi
I am trying to have an unordered list that is styled nicely with an
arrow graphic, however now I get the arrow graphic in my ordered list as
well.
Could someone please have a look here:
http://learnline.cdu.edu.au/wip/css/liststest.html
and give me an idea of what I can do to get around this. The lists are
contained within a class called main left - assuming that this will
eventually become the left column.
Thanks very much
***
Helen Rysavy
Web Designer, Teaching Learning Development
Charles Darwin University, Northern Territory 0909
Tel: 8946 7779 Mobile: 0403 290 842
mailto:[EMAIL PROTECTED]
www.cdu.edu.au
CRICOS Provider No: 00300K
***
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] styling ordered and unordered lists
I am trying to have an unordered list that is styled nicely with an arrow
graphic, however now I get the arrow graphic in my ordered list as well.
Descendant selectors are your friend...
.mainleft ul li {
padding: 0px 0px 0px 25px;
background: url(images/bullet.gif) no-repeat 6px top;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
}
Sorted ;)
Andrew.
-
http://leftjustified.net/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] styling ordered and unordered lists
Whoops, should have read your code a bit more before hitting 'send'
Making the following change will give you better support in IE and
Opera while also keeping the arrow centered regardless of font-size -
.mainleft ul li {
padding: 0px 0px 0px 25px;
background:transparent url(images/bullet.gif) no-repeat 6px 50%;
margin-right: 0px;
margin-bottom: 3px;
margin-left: 0px;
}
Andrew.
-
http://leftjustified.net/
--
http://leftjustified.net/
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] ATO - shame shame shame...
Chris Stratford wrote: I can't get my digital certificate without installing IE again... It is GONE! I dont want it. I dont want NN either (its good, but I love my firefox)... Can they force me to download IE to complete my business registration? The site also requires a Java applet to be installed. What's more, the links won't work until the applet finishes loading. In other words, After complaining that Firefox isn't good enough and that Java is required, it tells you to check the minimum system requirements, but it won't let you go there (middle clicking got around that, though). Pathetic doesn't even begin to come close. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Connditional Comment / @import Problem in IE 5.0.1
Hmmm
This may sound insane, but if the style element is adding whitespace, try
style {
display:none;
}
in the IE 5.0 styles.
If that stops the style element from working (?), try height:1px;
I've never heard of this before, but my suggestion could be worth a try...
I'm guessing you're using the @import method to hide styles from NN4?
If so, this will also work:
link rel=stylesheet type=text/css media=screen,projection /
While it's totally valid, NN4 can't handle multiple media values and
ignores the CSS.
I noticed you also use quotes in the @import command to hide from
IEmac. If you put an @import rule inside a CSS file which is
link'ed, you will avoid your IE5 space problem and still hide the
CSS from IEmac and NN4.
Hope that helps :)
Andrew.
http://leftjustified.net/
On Fri, 07 Jan 2005 15:48:22 -0500, Michael Wilson [EMAIL PROTECTED] wrote:
Hi all,
I sent this earlier, but I think I accidentally hijacked another post...
For quite a while, I've been using my spare time to improve the
standards, CSS, usability, and accessibility of one of my projects. In
doing so I've also been trying to move away from IE hacks in my CSS in
favor of conditional comments, which for the most part has been a fairly
seamless process.
While making some adjustments to the main template (01) this morning, I
noticed IE 5.0.1 would behaving oddly when I added a particular
conditional comment. When I included the conditional comment, a rather
large gap would appear at the top of the page. At first, I thought
something in the IE stylesheet was causing the problem, but after
further testing I realized that it was the comment itself that caused
the issue, or rather, the comments position in the markup.
If I place the comment above the @import (02) of my main stylesheet,
everything seems to work fine; however, there is a single selector in
the IE specific stylesheet that needs to override a selector in the main
stylesheet, so the conditional comment *has* to come after the @import.
When I move the comment below the @import, IE 5.0.1 (not 5.5 or 6.0)
breaks (03).
I can completely remove the CSS from the IE specific stylesheet--saving
it as a blank document-- and the problem persists. Furthermore, and this
just makes things weirder, if I use a link href=.../, rather than
@import, the problem vanishes. I also tested several other import
methods, all of which, produce the same results as the method I
originally used.
I am using the hacked, standalone versions of IE 5.0.1 and 5.5 for
testing; however, I am aware of the issues with using conditional
comments. This particular conditional uses [if IE], so the version of IE
*should be* irrelevant. I only mention this to be sure all my conditions
are straight, in case there is any question.
Has anyone ever experienced something similar to this issue or know of
any documentation that might help explain it? Of course, I could just be
doing something stupid or overlooking something simple. I'll leave the
comment in the broken position for now, so y'all can check it out if
you like.
01: http://www.iqmax.com/iqmaxcss/
02: http://www.iqmax.com/downloads/mike/beforeimport.gif
03: http://www.iqmax.com/downloads/mike/afterimport.gif
@import method used:
style type=text/css
!--
@import url(css/iqmax.css);
--
/style
Conditional comment used:
!--[if IE]
link rel=stylesheet type=text/css href=css/iqmax.ie.css /
![endif]--
--
Best regards,
Michael Wilson
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
Re: [WSG] Connditional Comment / @import Problem in IE 5.0.1
On Fri, 07 Jan 2005 15:48:22 -0500, Michael Wilson [EMAIL PROTECTED] wrote: When I included the conditional comment, a rather large gap would appear at the top of the page. At first, I thought something in the IE stylesheet was causing the problem, snip I've seen something similar when the conditional comment syntax wasn't quite right. The way they handle GT and LT is a little odd... I'd check what you have against MSDN. -- Kay Smoljak http://kay.smoljak.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
