Re: [WSG] Centered List
Hi,
I had forgotten that inline-block wasn't supported in FF2.
If you add this to the li style, it should help. You may need to play
about with the padding a bit too.
display: -moz-groupbox;
Make sure it goes before the display: inline-block; so that it is
over-ridden in versions of FF which support inline-block. Other
browsers will ignore any moz- styles anyway.
ul li {
display: -moz-groupbox;
display: inline-block;
vertical-align: top;
}
It's a bit of a dirty hack, and I tried a couple of other Mozilla
specific extensions (, but this seemed to work the best.
David
2008/7/22 Tyrone Joseph <[EMAIL PROTECTED]>:
> Hi David or anyone else that can help,
>
> I have tested the CSS that you gave me, on the actual site and it works fine
> on Safari, Opera and Firefox 3 but Firefox 2 displays like this:
> http://www.datadial.net/test/firefox-2.gif
>
> Opera like this:
> http://www.datadial.net/test/opera.gif
>
> Do you or anyone else have any clues as to what may be causing this, or what
> the solution may be??
>
> Tyrone
>
>
> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David Owens
> Sent: 14 July 2008 17:48
> To: wsg@webstandardsgroup.org
> Subject: Re: [WSG] Centered List
>
> 2008/7/14 Tyrone Joseph <[EMAIL PROTECTED]>:
>> Thanks for your reply but this doesn't solve my problem as the size list
>> will be controlled by a CMS. This means that there may be times when there
>> are 7 options and there may be times when are 3 options.
>>
>>
>>
>> I somehow need to center the li elements without affecting other textual
>> content within the containing div. I am trying by best to keep the HTML
>> clean and I don't want to add any unnecessary divs within the main div.
>>
>
> Hi Tyrone,
>
> I've been playing around for this, and have a pretty good looking
> solution for you.
>
>
>one
>
>two
>sold out
>
>three
>
>
> ul {
> margin: 0;
> text-align: center;
> }
>
> li {
> display: inline-block;
> border: 1px solid black;
> padding: 5px;
> margin: 5px;
> vertical-align: top;
> }
>
> a {
>display: block;
> }
>
> Plus you will need to send this to IE, preferably using conditional comments:
>
> li {
> zoom: 1;
> display: inline;
> }
>
> Works in FF, IE 5.5, 6 and 7, Opera 9.5 and Safari 3 on PC. I haven't
> looked at anything on a Mac yet.
>
> Regards
> David
>
> http://fineartdavid.com
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] Centered List
2008/7/14 Tyrone Joseph <[EMAIL PROTECTED]>:
> Thanks for your reply but this doesn't solve my problem as the size list
> will be controlled by a CMS. This means that there may be times when there
> are 7 options and there may be times when are 3 options.
>
>
>
> I somehow need to center the li elements without affecting other textual
> content within the containing div. I am trying by best to keep the HTML
> clean and I don't want to add any unnecessary divs within the main div.
>
Hi Tyrone,
I've been playing around for this, and have a pretty good looking
solution for you.
one
two
sold out
three
ul {
margin: 0;
text-align: center;
}
li {
display: inline-block;
border: 1px solid black;
padding: 5px;
margin: 5px;
vertical-align: top;
}
a {
display: block;
}
Plus you will need to send this to IE, preferably using conditional comments:
li {
zoom: 1;
display: inline;
}
Works in FF, IE 5.5, 6 and 7, Opera 9.5 and Safari 3 on PC. I haven't
looked at anything on a Mac yet.
Regards
David
http://fineartdavid.com
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] visibility problem in ie...z-index maybe?
2008/7/14 kevin mcmonagle <[EMAIL PROTECTED]>:
> hi,
> im using negative margins to put a png half over the edge of a "wrapper"
> div.
> Works good in ff, but breaks the layout in ie.
> Is there anything i can do to get ie to display the
> div like fire fox does or is this to tall an order for ie?
> -best
> kevin
>
> http://pattersons.s34978.gridserver.com/indexnew1.html
>
> #kitchenhead{ z-index:999;
> width:200px;
> height:100px;
> margin-top:-35px;
> padding-top:40px;
> background-image:url(../images/kitchen.png);
> background-position: 0 0;
> overflow:visible;
> background-repeat:no-repeat;
> }
>
> heres the css for the div that its going "under" at the moment:
>
> #shellhead
> {
> background-image: url(../images/yellowtopshad.png);
> background-repeat:repeat-x;
> width:999px;
> margin:0 auto;
> padding-top:20px;
> }
>
Hi Kevin,
You might be better off using
position: relative;
top: -35px;
instead of the negative margin
I've only tested it in FF and IE7, but can see any reason why it
wouldn't work in older versions of IE as well..
David
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] ADA Compliant Flash
2008/7/7 Steve Green <[EMAIL PROTECTED]>: > Or is it likely to be similar to the DDA in the UK, which is concerned with > actual outcomes rather than a technical standard? Under the DDA it doesn't > matter if a website is AAA-compliant (if such a thing were possible); a > person can still bring an action if the website was not accessible to them > (although there is no guarantee they will win). Only a court can decide if > the website met the law or not. > > Steve I suspect that once WCAG 2.0 becomes a recommendation, its testable nature will mean that it is much easier for governments to require a certain level be reached. At least, in theory anyway. UK government websites are currently required (internally, not legally) to reach level AA of WCAG 1.0. There was recently a suggestion that those which failed to do so would be stripped of their .gov.uk domain names, but this has subsequently been watered down and the deadline extended. David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] web optimization
2008/7/7 <[EMAIL PROTECTED]>: > Hi masters… > > > I would like to know more about web optimization. What are the things to > check to make sure that the page loads faster. > > Thanking you > > Naveen Bhaskar Hi Naveen, The tips given by the YUI "Speed freaks" at http://developer.yahoo.com/performance/ are great. First though, remember all the things that we used to do when everybody was on 56k dial-up. 1) Optimise images - I find fireworks to be the best for this. jpgs for photos and gradients, gifs and pngs for flat areas of colour. 2) If you haven't already, ditch the table-based layout. These will make your pages bigger. 3) Move your CSS to an external, cachable file instead of having it in the head element. 4) Background images will be loaded in the order they appear in the stylesheet. Can you save a large background image until last? (tested in IE6, IE7 and FF2) 5) Don't load in a huge JavaScript library if you only need part of it. 6) This one's a bit specialised, but if you're using a blogging platform which uses plugins, turn these off one at a time. Badly written code can slow down the page rendering time. Hope these things are useful. David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Conact Form!
You need a block level element inside the form element. A fieldset would work nicely. 2008/5/15 james <[EMAIL PROTECTED]>: > Hi All; > >> >> On my contact page i have used this code, however it comes back as not >> being valid XHTML 1.0 Transitional, am i missing something silly here? >> >> Name > /> >> Company: > value="" /> >> Email Address: > id="emailaddress" value="" /> >> Comments: >> >> >> >> >> >> >> Thanks James >> >> > > > *** > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: [EMAIL PROTECTED] > *** > > *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Large Background Images
A quick Google seems to suggest it can. http://icanhaz.com/litelerpicturz David On 14 May 2008, at 19:14, Chris Kennon wrote: Hi, Could this be done with PS? Chris On May 14, 2008, at 4:11 AM, David Owens wrote: Hi, I've been wrestling with one of these for a while. I've found that the ability to create jpgs with various degrees of compression in Fireworks is pretty handy. It means that an area which will be covered up by other content can be compressed more than the parts of the image which will show around the edges. A search for "selective jpg fireworks" will show you how it's done. David On 14 May 2008, at 06:39, David Hucklesby wrote: On Tue, 13 May 2008 22:11:29 -0400, Mike at Green-Beast.com wrote: Hi Chris, bandwidth. However standards are still a concern, what perils of wisdom for using a "full-page" BG can the list cultivate? Hard on those with a slow connection, but I cannot foresee another issue unless the background is a big animated GIF ;-) You can offer a removal tool for those users easily enough. I do that on my hosting company's site [1] [...] This particular changer uses PHP and a cookie to manage the option. It places the new styles in the head with a single property: background-image : none; applied to the various elements. The link to it is on the sidebar under "Page Tools" -- the link says Remove Backgrounds. [1] http://gbhxonline.com ~ Nice solution, Mike. Now wouldn't the Web be a kinder, gentler place, if all web sites were designed so thoughtfully? I notice the BBC has two links at the top of each page: "Low graphics" and "Accessibility help." Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] Large Background Images
Hi, I've been wrestling with one of these for a while. I've found that the ability to create jpgs with various degrees of compression in Fireworks is pretty handy. It means that an area which will be covered up by other content can be compressed more than the parts of the image which will show around the edges. A search for "selective jpg fireworks" will show you how it's done. David On 14 May 2008, at 06:39, David Hucklesby wrote: On Tue, 13 May 2008 22:11:29 -0400, Mike at Green-Beast.com wrote: Hi Chris, bandwidth. However standards are still a concern, what perils of wisdom for using a "full-page" BG can the list cultivate? Hard on those with a slow connection, but I cannot foresee another issue unless the background is a big animated GIF ;-) You can offer a removal tool for those users easily enough. I do that on my hosting company's site [1] [...] This particular changer uses PHP and a cookie to manage the option. It places the new styles in the head with a single property: background-image : none; applied to the various elements. The link to it is on the sidebar under "Page Tools" -- the link says Remove Backgrounds. [1] http://gbhxonline.com ~ Nice solution, Mike. Now wouldn't the Web be a kinder, gentler place, if all web sites were designed so thoughtfully? I notice the BBC has two links at the top of each page: "Low graphics" and "Accessibility help." Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
