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.
ul
lia href=#one/a/li
li
two
a href=#sold out/a
/li
lia href=#three/a/li
/ul
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] 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] 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.
ul
lia href=#one/a/li
li
two
a href=#sold out/a
/li
lia href=#three/a/li
/ul
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] 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? form label for=userName/label input type=text id=user value= /br / label for=companyCompany:/label input type=text id=company value= /br / label for=emailaddressEmail Address:/label input type=text id=emailaddress value= /br / label for=commentsComments:/label textarea name=comments /textarea br / input type=submit id=submitbutton value=Submit / /form 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] ***
