Re: [WSG] CSS alignment issues
G'day If you look at the homepage - http://www.e-oddie.com/ - I'm having problems laying the content out. I'm trying to centre the image on the page both horizontally and vertically. Then, within the panel, I'm trying to vertically centre the text. Unfortunately I'm not achieving either and am getting different results between IE6 and FF1. vertical-align only applies to 'table-cell' elements and in some cases inline elements. Putting vertical-align on a div has no effect (or is not supposed to) You could trick Firefox and Opera 7.5 (and perhaps some Mac/Linux browsers Like Safari, Konqueror etc) by setting the html and body elements to 100% height, giving body a display:table and panelContainer a display of table-cell and vertical-align:middle. Doesn't have vertical centering in MSIE but should still be usable otherwise. I can email you a sample file off-list if you like. Just a couple of other comments if I may: 1. Have you thought about using a definition list instead of an unordered list with (seemingly misused) h1 and h2 elements? 2. I'd compress the background image. Takes a long time to load on dial-up. 183kB for a background image is a ~bit~ much. 30-40k would be better and should be achievable without too much loss of quality. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] CSS alignment issues
Bert Doorn wrote: giving body a display:table and panelContainer a display of table-cell and vertical-align:middle. Doesn't have vertical centering in MSIE but should still be usable otherwise. I can email you a sample file off-list if you like. MSIE (all Windows versions, and possibly Mac too) doesn't support any of the display: table* properties If it did... then we could just use display: table-cell for fluid columnar layouts -David ** 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] CSS alignment issues
- Original Message -
From: Tatham Oddie
To: wsg@webstandardsgroup.org
Sent: Sunday, December 26, 2004 7:36 AM
Subject: [WSG] CSS alignment issues
If you look at the homepage - http://www.e-oddie.com/ - I'm having problems
laying the content out. I'm trying to centre the image on the page both
horizontally and vertically. Then, within the panel, I'm trying to
vertically centre the text. Unfortunately I'm not achieving either and am
getting different results between IE6 and FF1.
--
If you use:
body, html {
margin : 0;
padding : 0;
height : 100%;
}
#layoutgrid{
display : table;
height : 100%;
width : 100%;
}
#layoutgrid td {
vertical-align : middle;
text-align : center;
}
in your css, then:
table id=layoutgrid
!-- table, as opposed to strict CSS, is needed for IE centering --
tr
td
your own stuff goes here. A div, with the text inside and the
background image applied to this div, maybe? /td
/tr
/table
in your markup, it'll work. Using that single cell table is the ONLY way I
know to get centered stuff in IE and FF without resorting to long-winded or
unreliable code. It depends whether or not you can allow yourself the use
of a table!
HTH,
Bob McClelland,
Cornwall (U.K.)
www.gwelanmor-internet.co.uk
**
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] CSS alignment issues
Bert, Thanks for your help. I managed to get the text centerred vertically within the panel in FF only, however never managed to get the panel in the right place too. Also, even though my subsites arew about to be covered in 'Get Firefox' warnings for IE users, I need to be cross-browser compliant on my portal page. If you could save a copy of the page and have a quick fiddle with the source (the CSS is inline anyway for this page) that would be **extremely** well appreciated. However, please don't feel pressured that this needs to happen. As for the use of LI, H1, and H2 elements - I looked back on it and realised that it probably was a stupid move. I only found out about DL a few weeks ago and am taking sometime to get into the swing of using it. I've now implemented this though and it's a much cleaner solution. As for the background image - it's not finished yet, and I will optimize more. Trust me, I know about dialup - I'm on it. I can't get broadband where I am in the mountains west of Sydney. Thanks, Tatham -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bert Doorn Sent: Sunday, 26 December 2004 8:25 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS alignment issues G'day If you look at the homepage - http://www.e-oddie.com/ - I'm having problems laying the content out. I'm trying to centre the image on the page both horizontally and vertically. Then, within the panel, I'm trying to vertically centre the text. Unfortunately I'm not achieving either and am getting different results between IE6 and FF1. vertical-align only applies to 'table-cell' elements and in some cases inline elements. Putting vertical-align on a div has no effect (or is not supposed to) You could trick Firefox and Opera 7.5 (and perhaps some Mac/Linux browsers Like Safari, Konqueror etc) by setting the html and body elements to 100% height, giving body a display:table and panelContainer a display of table-cell and vertical-align:middle. Doesn't have vertical centering in MSIE but should still be usable otherwise. I can email you a sample file off-list if you like. Just a couple of other comments if I may: 1. Have you thought about using a definition list instead of an unordered list with (seemingly misused) h1 and h2 elements? 2. I'd compress the background image. Takes a long time to load on dial-up. 183kB for a background image is a ~bit~ much. 30-40k would be better and should be achievable without too much loss of quality. Regards -- Bert Doorn, Better Web Design http://www.betterwebdesign.com.au/ Fast-loading, user-friendly websites ** 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] CSS alignment issues
Bob, Thanks for your help here... I now finally have the page working how I want. As for making the whole world FF-users, if you visit my site from any other browser soon you will be redireted via this page: http://www.e-oddie.com/sydneylife/GetFirefox.aspx Hopefully that should get some more users switching. Thanks again, Tatham -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of designer Sent: Sunday, 26 December 2004 11:32 PM To: webstandards group Subject: Re: [WSG] CSS alignment issues Hi Tatham, - Original Message - From: Tatham Oddie [EMAIL PROTECTED] To: wsg@webstandardsgroup.org; 'designer' [EMAIL PROTECTED] Sent: Sunday, December 26, 2004 12:03 PM Subject: RE: [WSG] CSS alignment issues Bob, I really didn't want to use a table - otherwise I would have been able to say that there isn't a single table in the whole site. Now I'll just have to talk about the sub-sites... Grr. Anyway, the code was a bit more complex than you posted as I had to center vertically the text and the block. I've updated the verion on http://www.e-oddie.com/ which works in IE, but not FF. I just can't seem to make that work. Must be having a complete blinder today - as I used to do everything with tables. Anyway, I'm telling all my users to get Firefox and I'm a Firefox user so I need to work out this prob. Any ideas? Thanks, Tatham --- After writing to you, I thought I'd better check out what I'd said [ :-) ] so I knocked up this: http://www.marscovista.fsnet.co.uk/gwelanmor/middle/centering.html You can see how I've applied some 'content' with a background and some text, the latter positioned with margins. The CSS is embedded, for simplicity. It works in FF, IE6, IE5.5, Opera . . . Until all the world becomes FF :-), there emare/em times when you just HAVE to use a table, albeit a tiny one . . . HTH a bit more. Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk ** 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] CSS alignment issues
Just a note. The a two page article link takes you to a subscription page for the NY Times. I didn't subscribe - just because I usually dont subscribe to things like that just to read a link from another page. So it could become counter-productive to the argument (even though it is not really Firefox's fault). Just a suggestion. Regards, Gary On Mon, 27 Dec 2004 01:19:56 +1100, Tatham Oddie [EMAIL PROTECTED] wrote: Bob, Thanks for your help here... I now finally have the page working how I want. As for making the whole world FF-users, if you visit my site from any other browser soon you will be redireted via this page: http://www.e-oddie.com/sydneylife/GetFirefox.aspx Hopefully that should get some more users switching. Thanks again, Tatham -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of designer Sent: Sunday, 26 December 2004 11:32 PM To: webstandards group Subject: Re: [WSG] CSS alignment issues Hi Tatham, - Original Message - From: Tatham Oddie [EMAIL PROTECTED] To: wsg@webstandardsgroup.org; 'designer' [EMAIL PROTECTED] Sent: Sunday, December 26, 2004 12:03 PM Subject: RE: [WSG] CSS alignment issues Bob, I really didn't want to use a table - otherwise I would have been able to say that there isn't a single table in the whole site. Now I'll just have to talk about the sub-sites... Grr. Anyway, the code was a bit more complex than you posted as I had to center vertically the text and the block. I've updated the verion on http://www.e-oddie.com/ which works in IE, but not FF. I just can't seem to make that work. Must be having a complete blinder today - as I used to do everything with tables. Anyway, I'm telling all my users to get Firefox and I'm a Firefox user so I need to work out this prob. Any ideas? Thanks, Tatham --- After writing to you, I thought I'd better check out what I'd said [ :-) ] so I knocked up this: http://www.marscovista.fsnet.co.uk/gwelanmor/middle/centering.html You can see how I've applied some 'content' with a background and some text, the latter positioned with margins. The CSS is embedded, for simplicity. It works in FF, IE6, IE5.5, Opera . . . Until all the world becomes FF :-), there emare/em times when you just HAVE to use a table, albeit a tiny one . . . HTH a bit more. Bob McClelland, Cornwall (U.K.) www.gwelanmor-internet.co.uk ** 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 ** ** 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] CSS alignment issues
Take a look at http://www.jakpsatweb.cz/css/css-vertical-center-solution.html ... -- Jan Brasna :: alphanumeric.cz | webcore.cz | designlab.cz | janbrasna.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 **
Re: [WSG] CSS alignment issues
Tatham Oddie wrote: ... As for making the whole world FF-users, if you visit my site from any other browser soon you will be redireted via this page: http://www.e-oddie.com/sydneylife/GetFirefox.aspx Hopefully that should get some more users switching. Be careful with that any other browser - redirect thing. It might backfire... Make sure you are a bit smarter than your writing indicates. If standard-compliant browsers gets redirected, then your name will end up on the wrong list. Opera-/ Lynx-/ Mozilla-/ Firefox-/ Safari-user - in that order, with a few more standard-compliant browsers on the sideline. Sincerely Georg ** 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] CSS alignment issues
Hey Tat, Nice site. One thing - don't do whats frowned upon - and design for only one browser. Designing for just FireFox is the same as designing for just IE. Except you are shooing yourself in 80% of your feet. (yeah, thats coz prob 80% of people use IE still) I HATE when people have this on their website: Designed for IE or Best viewed in IE etc... Just make it work everywhere, and people will be happy no matter what. Just a tip :) Cheers Tatham Oddie wrote: Bert, Thanks for your help. I managed to get the text centerred vertically within the panel in FF only, however never managed to get the panel in the right place too. Also, even though my subsites arew about to be covered in 'Get Firefox' warnings for IE users, I need to be cross-browser compliant on my portal page. If you could save a copy of the page and have a quick fiddle with the source (the CSS is inline anyway for this page) that would be **extremely** well appreciated. However, please don't feel pressured that this needs to happen. As for the use of LI, H1, and H2 elements - I looked back on it and realised that it probably was a stupid move. I only found out about DL a few weeks ago and am taking sometime to get into the swing of using it. I've now implemented this though and it's a much cleaner solution. As for the background image - it's not finished yet, and I will optimize more. Trust me, I know about dialup - I'm on it. I can't get broadband where I am in the mountains west of Sydney. Thanks, Tatham -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Bert Doorn Sent: Sunday, 26 December 2004 8:25 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS alignment issues G'day If you look at the homepage - http://www.e-oddie.com/ - I'm having problems laying the content out. I'm trying to centre the image on the page both horizontally and vertically. Then, within the panel, I'm trying to vertically centre the text. Unfortunately I'm not achieving either and am getting different results between IE6 and FF1. vertical-align only applies to 'table-cell' elements and in some cases inline elements. Putting vertical-align on a div has no effect (or is not supposed to) You could trick Firefox and Opera 7.5 (and perhaps some Mac/Linux browsers Like Safari, Konqueror etc) by setting the html and body elements to 100% height, giving body a display:table and panelContainer a display of table-cell and vertical-align:middle. Doesn't have vertical centering in MSIE but should still be usable otherwise. I can email you a sample file off-list if you like. Just a couple of other comments if I may: 1. Have you thought about using a definition list instead of an unordered list with (seemingly misused) h1 and h2 elements? 2. I'd compress the background image. Takes a long time to load on dial-up. 183kB for a background image is a ~bit~ much. 30-40k would be better and should be achievable without too much loss of quality. Regards -- Chris Stratford [EMAIL PROTECTED] http://www.neester.com -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.298 / Virus Database: 265.6.4 - Release Date: 22/12/2004 ** 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] CSS alignment issues
Tatham Oddie wrote If you look at the homepage - http://www.e-oddie.com/ - I'm having problems laying the content out. I'm trying to centre the image on the page both horizontally and vertically. Then, within the panel, I'm trying to vertically centre the text. Unfortunately I'm not achieving either and am getting different results between IE6 and FF1. Negative Margins to the rescue! See if this helps: http://www.wpdfd.com/editorial/thebox/deadcentre4.html :) -David ** 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] CSS alignment issues
Gunlaug, Not sure what you mean by: then your name will end up on the wrong list. Besides that, I'm a reasonably active Firefox evangelist, not just a standards evangelist. I'm tossing up on allowing other standards compliant browsers and it will probably end up heading that way with your suggestion. Obviously I won't redirect audio browsers (have a blind mate who uses the site and helps me test accessability). Would you be happy if I do this: Opera: 'Get Firefox' button in page footers Lynx: 'Get Firefox' button in page footers Mozilla:'Get Firefox' button in page footers Firefox:Nothing Safari: 'Get Firefox' button in page footers Other: Forced redirect via GetFirefox.aspx Tatham www.e-oddie.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Monday, 27 December 2004 3:25 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] CSS alignment issues Tatham Oddie wrote: ... As for making the whole world FF-users, if you visit my site from any other browser soon you will be redireted via this page: http://www.e-oddie.com/sydneylife/GetFirefox.aspx Hopefully that should get some more users switching. Be careful with that any other browser - redirect thing. It might backfire... Make sure you are a bit smarter than your writing indicates. If standard-compliant browsers gets redirected, then your name will end up on the wrong list. Opera-/ Lynx-/ Mozilla-/ Firefox-/ Safari-user - in that order, with a few more standard-compliant browsers on the sideline. Sincerely Georg ** 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] CSS alignment issues
Hi Tatham, While I agree that more people should use better browsers (I have used Firefox for a long time now), I think forcibly redirecting users away from your content is at best sanctimonious and at worst odious. It is of course your choice but it's important to remember that other people have the freedom of choice too. If you design to Firefox to the point of having a layout totally broken in anything else, I say let people see it broken and draw their own conclusions about whether they should upgrade or not. Just my two penn'orth. :) Iain -- Iain Gardiner http://www.firelightning.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Tatham Oddie Sent: 26 December 2004 23:10 To: wsg@webstandardsgroup.org Subject: RE: [WSG] CSS alignment issues Gunlaug, Not sure what you mean by: then your name will end up on the wrong list. Besides that, I'm a reasonably active Firefox evangelist, not just a standards evangelist. I'm tossing up on allowing other standards compliant browsers and it will probably end up heading that way with your suggestion. Obviously I won't redirect audio browsers (have a blind mate who uses the site and helps me test accessability). Would you be happy if I do this: Opera: 'Get Firefox' button in page footers Lynx: 'Get Firefox' button in page footers Mozilla:'Get Firefox' button in page footers Firefox:Nothing Safari: 'Get Firefox' button in page footers Other: Forced redirect via GetFirefox.aspx Tatham www.e-oddie.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 **
Re: [WSG] CSS alignment issues
Tatham Oddie wrote: Not sure what you mean by: then your name will end up on the wrong list. Besides that, I'm a reasonably active Firefox evangelist, not just a standards evangelist. I'm tossing up on allowing other standards compliant browsers and it will probably end up heading that way with your suggestion. Obviously I won't redirect audio browsers (have a blind mate who uses the site and helps me test accessability). Tatham, How many buttons you have on your pages, and what browser(s) you promote, is up to you. I'll have no problems whatsoever with that. Personally, I'll use one that points here: http://browsehappy.com/ , and leave the rest to the visitor(s). If a web page doesn't work in some browser - then it doesn't work in some browser. That doesn't bother me if it doesn't bother the creator / owner. We have discussion-lists like WSG, css-d and others for those cases - if needed and wanted. Forced redirect ... is not a good idea. It doesn't promote anything, and it is not very accessible either. BTW: voice-alternatives are often built into or on top of ordinary browser-solutions. The same with many other accessibility-options. Browser-id's doesn't say much in many such cases. I also have friends with need of accessibility-options, and they use all kinds of solutions. My approach is to give them access, and improve on things - if I can... within standards - if they exists... The wrong list is a s/he don't care - don't bother - delete everything list. I call it the house on fire list. http://www.gunlaug.no/contents/molly_1_02.html I think we all have one of those lists (somewhere), and it's so easy to end up on one. It is just as easy to stay on the right lists, so why complicate things when a simple button or something of that nature will do? From there you can take your preferences to whatever heights you might like, and visitors can agree or disagree with you all they like. I think that's a more healthy, and much more standard-promoting, approach than redirect. CSS is fun - can I have another browser-bug, please... Georg ** 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] CSS alignment issues
Hey guys, Yet another problem with e-oddie.com although its my first totally CSS site so Im happy this is only the third with few more in sight. If you look at the homepage http://www.e-oddie.com/ - Im having problems laying the content out. Im trying to centre the image on the page both horizontally and vertically. Then, within the panel, Im trying to vertically centre the text. Unfortunately Im not achieving either and am getting different results between IE6 and FF1. Thanks! Tatham Oddie C# Developer / Analyst www.e-oddie.com [personal/blog] www.play47.net [work] www.ssw.com.au [work] +61 414 275 989 [EMAIL PROTECTED] [EMAIL PROTECTED] [EMAIL PROTECTED]
