Re: [WSG] Big trouble!
#content p:first-letter
{
font-size: 1.5em;
vertical-align: -5px;
text-indent: 2px;
}
I am no expert on CSS - but the vertical-align: -5px will probably NOT be
nice in IE.
My experience has been that it expects something like top, middle, bottom
for vertical-align. A keyword - not a measurement.
But I could be wrong here (but not if you believe the doco on the MSDSN
site).
The other two values look as though they would be valid for IE and the
first-letter pseudo-element seems to be accepted by IE as well.
I have no idea what vertical-align should accept for standard CSS though.
Gary Menzel
Web Development Manager
IT Operations Brisbane -+- ABN AMRO Morgans Limited
Level 29, 123 Eagle Street BRISBANE QLD 4000
PH: 07 333 44 828 FX: 07 3834 0828
If this communication is not intended for you and you are not an authorised recipient
of this email you are prohibited by law from dealing with or relying on the email or
any file attachments. This prohibition includes reading, printing, copying,
re-transmitting, disseminating, storing or in any other way dealing or acting in
reliance on the information. If you have received this email in error, we request you
contact ABN AMRO Morgans Limited immediately by returning the email to [EMAIL
PROTECTED] and destroy the original. We will refund any reasonable costs associated
with notifying ABN AMRO Morgans. This email is confidential and may contain privileged
client information. ABN AMRO Morgans has taken reasonable steps to ensure the accuracy
and integrity of all its communications, including electronic communications, but
accepts no liability for materials transmitted. Materials may also be transmitted
without the knowledge of ABN AMRO Morgans. ABN AMRO Morgans Limited its directors and
employees do not accept liability for the results of any actions taken or not on the
basis of the information in this report. ABN AMRO Morgans Limited and its associates
hold or may hold securities in the companies/trusts mentioned herein. Any
recommendation is made on the basis of our research of the investment and may not suit
the specific requirements of clients. Assessments of suitability to an individual?s
portfolio can only be made after an examination of the particular client?s
investments, financial circumstances and requirements.
*
The discussion list for http://webstandardsgroup.org/
*
RE: [WSG] Colored boxes - one method of building full CSS layouts
Hey, that's almost exactly how I work!! Nice info, Russ - thanks. I normally put a red border around the current divs I am working on, so I know exactly what is happening. Coloured divs are better though, as then you don't have to worry about box model problems when you add/remove the red borders. I've also found that the different combinations of browsers tend to render a bit more uniformly if I use an XHTML Strict doctype, as compared to an XHTML Transitional doctype or quirks mode. Regards, David McDonald Web Designer http://www.davidmcdonald.org Southbank, Melbourne Australia Mobile: 0403 332 140 ICQ: 11814164 -Original Message- From: russ weakley [mailto:[EMAIL PROTECTED] Sent: Tuesday, 13 January 2004 5:52 PM To: Web Standards Group Subject: [WSG] Colored boxes - one method of building full CSS layouts How do you go about building a full CSS layout? Is there an overall method that can be used for any layout? Colored boxes - one method of building full CSS layouts: http://www.maxdesign.com.au/presentation/process/index.cfm This article explains one method of building a full CSS layout from start to finish. The method, based on positioning colored boxes and testing across a range of browsers, can be used to build a wide range of full-CSS layouts. Russ * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] good coding app
Its not free Its an evaluation version?? - Chris Stratford [EMAIL PROTECTED] www.neester.com - -Original Message- From: Colm Walsh [mailto:[EMAIL PROTECTED] Sent: Friday, January 09, 2004 11:48 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] good coding app EditPlus www.editplus.com/ Syntax highlighting, ftp support, endlessly configurable, intuitive, free = perfect * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] good coding app
Great responses on the coding app question. I discovered skEdit as a result, which I find excellent. I'm now looking at huge dinosaurs like GoLive and thinking what the hell did I need all that for? Thanks folks, Peter -- peter gifford universal head design that works visit 7/43 bridge road stanmore nsw 2048 australia call(+612) 9517 1466 fax (+612) 9565 4747 email [EMAIL PROTECTED] sitewww.universalhead.com * The discussion list for http://webstandardsgroup.org/ *
[WSG] Image width and height, plus definition lists
Do we need the HEIGHT and WIDTH attributes for the IMG element? http://annevankesteren.nl/archives/2004/01/12/images-height-and-width-attrib utes Also interesting is this image gallery that uses a definition lists to create the gallery: http://www.btinternet.com/~historiae/gallery.html This is something Peter and I have been discussing recently. It seems the most semantically correct way to display a list of thumbnails and links. The big problem is that definition lists are hard to style as they are couplets, unlike unordered lists. The gallery version only works if each thumbnail and associated content is a separate definition list - not ideal semantically: http://www.maxdesign.com.au/jobs/css/definitionlist/ Browsercam results for page above: http://www.browsercam.com/public.aspx?proj_id=38964 What do you think (1) about using image size attributes and (2) about definition lists used in this way? Russ * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Image width and height, plus definition lists
Russ- (1) We need to use images size attributes to ensure that content is laid out correctly on the screen while the image downloads. If I don't do this I see a 32x32 pixel placeholder that then expands to the image size when download begins I wrote up a little php function that can do the height and width attributes automatically and is available at Sydney PHP Group (doesn't require GD library) : http://sydney.ug.php.net/phpBB2/viewtopic.php?t=45 Cheers James * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] Image width and height, plus definition lists
On Wednesday, January 14, 2004, at 09:10 AM, russ weakley wrote:
Do we need the HEIGHT and WIDTH attributes for the IMG element?
http://annevankesteren.nl/archives/2004/01/12/images-height-and-width-
attrib
utes
It's already been said on that page's comments, but the height and
width attributes speed up the rendering of the page in every browser I
can think of, because the layout engine doesn't have to wait to know
the image size (or come back and adjust later).
Also interesting is this image gallery that uses a definition lists to
create the gallery:
http://www.btinternet.com/~historiae/gallery.html
This is something Peter and I have been discussing recently. It seems
the
most semantically correct way to display a list of thumbnails and
links. The
big problem is that definition lists are hard to style as they are
couplets,
unlike unordered lists. The gallery version only works if each
thumbnail and
associated content is a separate definition list - not ideal
semantically:
http://www.maxdesign.com.au/jobs/css/definitionlist/
These LOOK GREAT, but the fact that they're using a separate DL for
each image doesn't tun me on at all... If it's a list of one item, then
it's not really a list, is it? Is a DL really appropriate for this
anyway? It probably is, but I'm not 100% convinced.
It occurs to me that I achieve the same results with less mark-up using
generic divs, although they carry a little less semantic meaning.
style type=text/css media=screen
body
{
margin: 20px;
padding: 0;
font: 90% arial, sans-serif;
background-color: #fff;
}
div.gallery
{
border: 1px solid #000;
background-color: #ddd;
width: 102px;
text-align: center;
padding: 10px;
float: left;
margin-right: 1em;
}
div img
{
display: block;
border: 1px solid #000;
width: 100px;
height: 100px;
}
div a
{
display: block;
margin: 5px 0 3px 0;
}
/style
div class=gallery
img src=flower.jpg alt=
a href=#Title here/a
Description here
/div
div class=gallery
img src=flower.jpg alt=
a href=#Title here/a
Description here
/div
Granted, yours has MUCH better structure when presented unstyled, but
that isn't really semantics, is it.
Interesting discussion!
Justin French
*
The discussion list for http://webstandardsgroup.org/
*
[WSG] ordered list for events
Hi all, I've got a simple list of events with dates and am trying to keep it as a simple ordered list. http://www.c41.com.au/test.htmlshows my example with everything else stripped out. (the css is inline just for ease of creating the example.) I thought I had it sorted until I realised that it goes a bit out of whack when the event name is long and wraps back down underneath the date. I'd like to have the event name wrap - but just under itself - basically the same as a simple but ye olde table structure would where each date/event name were in a different table cell. any ideas on how to get this working nicely or a better way of doing it? pete ottery
RE: [WSG] ordered list for events
Hi Peter This really looks like a valid use for the infamous table tag to me. Cheers Mark -- Mark Stanton Technical Director Gruden Pty Ltd Tel: 9956 6388 Mob: 0410 458 201 Fax: 9956 8433 http://www.gruden.com * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] ordered list for events
Peter. Without being able to test where I currently am at the moment (so forgive me if I am wrong), you should be able to use: list-style-position: outside; within the ol style definition to do what you want. The values for list-style-position are: inside outside inherit Regards, David McDonald Web Designer Melbourne, Australia http://www.davidmcdonald.org ICQ:11814164 - Original Message - From: Peter Ottery [EMAIL PROTECTED] Date: Wednesday, January 14, 2004 4:10 pm Subject: [WSG] ordered list for events Hi all, I've got a simple list of events with dates and am trying to keep it as a simple ordered list. http://www.c41.com.au/test.html target=lhttp://www.c41.com.au/test.html shows my example with everything else stripped out. (the css is inline just for ease of creating the example.) I thought I had it sorted until I realised that it goes a bit out of whack when the event name is long and wraps back down underneath the date. I'd like to have the event name wrap - but just under itself - basically the same as a simple but ye olde table structure would where each date/eventname were in a different table cell. any ideas on how to get this working nicely or a better way of doing it? pete ottery * The discussion list for http://webstandardsgroup.org/ *
Re: [WSG] ordered list for events
Many ways to skin a cat. A standard table is acceptable but so is a definition list: http://www.maxdesign.com.au/jobs/css/peterottery.htm Russ Peter. Without being able to test where I currently am at the moment (so forgive me if I am wrong), you should be able to use: list-style-position: outside; within the ol style definition to do what you want. The values for list-style-position are: inside outside inherit Regards, David McDonald Web Designer Melbourne, Australia http://www.davidmcdonald.org ICQ:11814164 - Original Message - From: Peter Ottery [EMAIL PROTECTED] Date: Wednesday, January 14, 2004 4:10 pm Subject: [WSG] ordered list for events Hi all, I've got a simple list of events with dates and am trying to keep it as a simple ordered list. http://www.c41.com.au/test.html target=lhttp://www.c41.com.au/test.html shows my example with everything else stripped out. (the css is inline just for ease of creating the example.) I thought I had it sorted until I realised that it goes a bit out of whack when the event name is long and wraps back down underneath the date. I'd like to have the event name wrap - but just under itself - basically the same as a simple but ye olde table structure would where each date/eventname were in a different table cell. any ideas on how to get this working nicely or a better way of doing it? pete ottery * The discussion list for http://webstandardsgroup.org/ *
[Fwd: Re: [WSG] ordered list for events]
Or better yet... change that height to 1.2em and it will work with
resizing text too (up to about 200% at least)
looks like a job for a table!
or even a definition list...
why did you use an ol?
try this
#searchlist ol li span.date {display: block;height:20px;width:
100px;float:left}
li {clear:left}
I added a small height to the span and clear:left to the li
works on mozilla... I didn't teste others
s
Peter Ottery wrote:
Hi all,
I've got a simple list of events with dates and am trying to keep it
as a simple ordered list.
http://www.c41.com.au/test.html shows my example with everything else
stripped out. (the css is inline just for ease of creating the example.)
I thought I had it sorted until I realised that it goes a bit out of
whack when the event name is long and wraps back down underneath the date.
I'd like to have the event name wrap - but just under itself -
basically the same as a simple but ye olde table structure would where
each date/event name were in a different table cell.
any ideas on how to get this working nicely or a better way of doing it?
pete ottery
*
The discussion list for http://webstandardsgroup.org/
*
Re: [WSG] ordered list for events
Gary Menzel wrote: I've got a simple list of events with dates and am trying to keep it as a simple ordered list. Well - at the risk of getting flamed (fire retardant underwear turned up to full strength) - this looks to me like it should be a table. There's nothing wrong with tables, provided they are used for tabular data like rather than layout. webmail entries, invoices and payments etc medal tallies (in case you do Smiggins Holes 2010 Winter Olympics site) etc etc Cheers James * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] ordered list for events
Check this TABLE work I did here, it may not fit with validators (havnt checked, and I don't care to really)... But I think its an awesome CSS Table display for a Forum Search engine: http://www.neester.com/hosted/search.php?search=emailtype=title took me about 1 hour to get that all up and running! What you think?? - Chris Stratford [EMAIL PROTECTED] www.neester.com - -Original Message- From: James Ellis [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 14, 2004 4:57 PM To: [EMAIL PROTECTED] Subject: Re: [WSG] ordered list for events Gary Menzel wrote: I've got a simple list of events with dates and am trying to keep it as a simple ordered list. Well - at the risk of getting flamed (fire retardant underwear turned up to full strength) - this looks to me like it should be a table. There's nothing wrong with tables, provided they are used for tabular data like rather than layout. webmail entries, invoices and payments etc medal tallies (in case you do Smiggins Holes 2010 Winter Olympics site) etc etc Cheers James * The discussion list for http://webstandardsgroup.org/ * * The discussion list for http://webstandardsgroup.org/ *
RE: [WSG] ordered list for events
Title: RE: [WSG] ordered list for events thanks everyone! in response to a few of those questions: Gary wrote: I realise you have said you want to keep it as a simple ordered list - but I am not sure of the reason why. glory ;-) nah, I guess I'm just getting a real kick out of not using tables wherever possible. I still use them (tables) every day for anything tabular more complex than this, ie: we're still friends ;-) Scott wrote: why did you use an ol? to be honest (and a little embarressed), i didn't know any better. there, i said it :) i havent used DL's before, but i will be now. Russ wrote: Many ways to skin a cat. A standard table is acceptable but so is a definition list: http://www.maxdesign.com.au/jobs/css/peterottery.htm many, many thanks. that fits my needs exactly and i even got a file named after me! ;-) thanks all, extremely helpful. pete
Re: [WSG] ordered list for events
Envelopes are good. Pushing them is good. But - I suppose I still look at a table as being a table - and hence get some backwards compatibility from it (especially in the case that Peter has). I am actually surprised at the number of support calls that we still get that have people using browsers that are not CSS compliant - regardless of what all the kewl web stats say about CSS browser penetration. I have looked at your coloured boxes design and we will look more closely at that again once we have this latest site revamp (it wasn't just the template - we have replaced the whole underlying system) bedded down. I did use coloured boxes - of sorts - to do our new design but I would like to apply your approach top to bottom and see if I come up with a different answer (I think I probably will). However, the WYSYWIG embedded editors we use in CMS's still don't really allow our content people the same flexibility that we can get by hand-coding our HTML/CSS. So a lot of the content that gets created still relies on old technologies. We have tried, in the new template design, to stick pretty much to a CSS-based layout. Gary Menzel Web Development Manager IT Operations Brisbane -+- ABN AMRO Morgans Limited Level 29, 123 Eagle Street BRISBANE QLD 4000 PH: 07 333 44 828 FX: 07 3834 0828 If this communication is not intended for you and you are not an authorised recipient of this email you are prohibited by law from dealing with or relying on the email or any file attachments. This prohibition includes reading, printing, copying, re-transmitting, disseminating, storing or in any other way dealing or acting in reliance on the information. If you have received this email in error, we request you contact ABN AMRO Morgans Limited immediately by returning the email to [EMAIL PROTECTED] and destroy the original. We will refund any reasonable costs associated with notifying ABN AMRO Morgans. This email is confidential and may contain privileged client information. ABN AMRO Morgans has taken reasonable steps to ensure the accuracy and integrity of all its communications, including electronic communications, but accepts no liability for materials transmitted. Materials may also be transmitted without the knowledge of ABN AMRO Morgans. ABN AMRO Morgans Limited its directors and employees do not accept liability for the results of any actions taken or not on the basis of the information in this report. ABN AMRO Morgans Limited and its associates hold or may hold securities in the companies/trusts mentioned herein. Any recommendation is made on the basis of our research of the investment and may not suit the specific requirements of clients. Assessments of suitability to an individual?s portfolio can only be made after an examination of the particular client?s investments, financial circumstances and requirements. * The discussion list for http://webstandardsgroup.org/ *
