[WSG] SOLVED: IE7 Issues - The Final Three
Hello All -
Just a quick note of thanks to all of you who responded to my IE7 questions.
Two of my three issues have now been solved due to your guidance and
suggestions.
The only holdout is the weird misalignment of the LI and Input buttons but
that's not such a big deal... will probably just re-code those pages with
two input buttons.
This is a FANTASTIC list of WONDERFUL people to which I am most grateful!
Cole
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Kepler Gelotte
Sent: Sunday, September 25, 2011 5:46 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] IE7 Issues - The Final Three
> Z-INDEX OF POSITIONED HR
You could fix this by putting the gecko image after the and positioning
the gecko absolutely:
HTML:
Welcome
to Our World
CSS:
#wildlife.gekoLower {
position: absolute;
top: -30px;
left: -250px;
}
> POSITIONED WRAPPER EFFECT, COPYRIGHT LINE AND FOOTER NAV
To fix this, you could clear the main content before bottomEffect and have
bottomEffect be position relative:
HTML:
CSS:
#bottomEffect {
width: 780px;
position: relative;
left: 0;
bottom: -10px;
height: 10px;
background: #2A2B2D url(../image/public/.global/body_bottom.jpg)
no-repeat 0 0;
padding-bottom: 10px;
}
I'm not sure what is causing the two buttons not to line up. Could you
switch them to both be either links or submit buttons?
Hope that helps.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] IE7 Issues - The Final Three
Hello Sean -
Thanks very much for the link - I tried the (giving the parent element
[#content_main] a higher "z" than the hr [#content_main hr] but still no
love in IE7. Will have to keep investigating this problem.
The most critical problem I have is Bug 2 - vanishing wrapper footer, footer
nav and copyright line.
I just did some more experimenting and found that If I remove the clearing
div (right before the end of the wrapper div) bang! Everything comes back in
IE7. but of course, disappears in EVERY other browser. Arg! Already have a
height declaration in my .clear rule so don't really know where else to go
on this but have to keep trying.
Thanks for your suggestions. if anything else comes to mind particularly
regarding bug 2 please let me know.
Cole
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Sean K
Sent: Saturday, September 24, 2011 1:24 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] IE7 Issues - The Final Three
Hi Cole,
Bug no. 1
You may need to re-think the mark-up a little. Check this article
http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Bug no. 2
add this to your current stylesheet to trigger hasLayout for that element.
html #formNav {height: 1%;}
If you have a specific IE stylesheet then:
#formNav {height: 1%;}
Hope this helps.
Sean
On Sat, Sep 24, 2011 at 1:46 PM, Cole Kuryakin wrote:
Hello All -
After more than a day I've been able to successfully quash all ie7 issues
except for three.
I'm hoping that someone can guide me to a solution for these remaining
problems.
Live development site is here: www.koisis.com/index.php
Z-INDEX OF POSITIONED HR
Looking at the home page (above) in FF, IE8 or IE9, you'll see that the
green HR rule (directly below "Welcome to Our World") flows BEHIND the
little green geko. This is as it's suppose to be.
In IE7, however, the rule is ABOVE the geko.
Z-index issues are well documented for IE7 but try as I might - using all of
the documentation I've read on IE7-z - I can't get this hr to go beneath the
Geko.
POSITIONED WRAPPER EFFECT, COPYRIGHT LINE AND FOOTER NAV
Again, if you look at the bottom of the home page (above) in FF, IE8 or IE9
you'll see a graphical wrapper effect (visually defining the bottom of the
wrapper div) as well as a copyright line and footer nav UL. This is how it's
suppose to look. In IE7 however, all three elements vanish. Hours and hours
of research and css/structure re-writing have not gotten me anywhere.
MYSTERY PADDING/MARGIN (WHATEVER) on LI button
I've got two rectangular buttons (cancel and submit) on the contact page
(http://www.koisis.com/index.php?cmd=01.09.00.01
<http://www.koisis.com/index.php?cmd=01.09.00.01&lac=en-us> &lac=en-us).
In FF these buttons look as it should. In IE7 however, neither buttons are
in alignment.
The Cancel button is an LI, the Submit button is a form input button.
Again, hours of searching and css tweaking have resulted in nothing more
than additional hair-loss.
If anyone can suggest ways to one or more of these issues in IE7 i'd be
hugely grateful.
Thanks to all in advance.
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
--
Kind regards,
Sean Kerr
Web Developer
M: 0418 697 201
E: bullr...@gmail.com
W: http://www.seankerr.com
"To look where you're going is to be motivated by fear. To go where you're
looking is to be driven by desire, confidence and vision."
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] IE7 Issues - The Final Three
Hello All - After more than a day I've been able to successfully quash all ie7 issues except for three. I'm hoping that someone can guide me to a solution for these remaining problems. Live development site is here: www.koisis.com/index.php Z-INDEX OF POSITIONED HR Looking at the home page (above) in FF, IE8 or IE9, you'll see that the green HR rule (directly below "Welcome to Our World") flows BEHIND the little green geko. This is as it's suppose to be. In IE7, however, the rule is ABOVE the geko. Z-index issues are well documented for IE7 but try as I might - using all of the documentation I've read on IE7-z - I can't get this hr to go beneath the Geko. POSITIONED WRAPPER EFFECT, COPYRIGHT LINE AND FOOTER NAV Again, if you look at the bottom of the home page (above) in FF, IE8 or IE9 you'll see a graphical wrapper effect (visually defining the bottom of the wrapper div) as well as a copyright line and footer nav UL. This is how it's suppose to look. In IE7 however, all three elements vanish. Hours and hours of research and css/structure re-writing have not gotten me anywhere. MYSTERY PADDING/MARGIN (WHATEVER) on LI button I've got two rectangular buttons (cancel and submit) on the contact page (http://www.koisis.com/index.php?cmd=01.09.00.01&lac=en-us). In FF these buttons look as it should. In IE7 however, neither buttons are in alignment. The Cancel button is an LI, the Submit button is a form input button. Again, hours of searching and css tweaking have resulted in nothing more than additional hair-loss. If anyone can suggest ways to one or more of these issues in IE7 i'd be hugely grateful. Thanks to all in advance. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] IE9's Browser Mode Controls - Reliable?
Hello All - Thanks for everone throwing in with their suggestions - after looking at each I've decided upon IETester which seems to work pretty well as it mirrors the results I'm seeing in IE9's Browser Mode command. This app also confirms that I've dealt with all of my IE8 issues - while also confirming that the few maddening IE7 issues that I've pounded my head upon for almost a full day are still in play. Will be requesting guidance on these few remaining IE7 issues shortly. Thanks again for the lead on IE Tester! Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Hucklesby Sent: Saturday, September 24, 2011 2:14 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] IE9's Browser Mode Controls - Reliable? On 9/23/11 7:58 AM, Janice Schwarz wrote: > On Fri, Sep 23, 2011 at 6:41 AM, Cole Kuryakin > wrote: > [...] >> >> This way of switching browser modes (between 7, 8 and 9) is quite >> convenient but... is it a true representation of how the project will >> render in these three browsers? >> [...] >> > I've been using those browser mode settings in IE for a while, even in > a corporate setting. They seem to be fairly accurate. > > I think that, generally speaking, it is better than using browsershots > or browsercam, since those just give screenshots and can't test > functionality. I use those for testing things I don't have access to > (like Mac-specific or IE6 specific issues...even then, those are only > so helpful and only address layout issues, not functionality). > > Janice's points are valid. FWIW I have come across several bugs in IE 7 when page zoom is applied. Not only won't you see this from a screen shot, but IE 8 in "compatibility mode" does not exhibit most of the problems I came across. Not tried IE 9's modes, though. As well as native browsers running in Windows installs under VMWare Fusion on my Mac, I also use IETester in Windows 7. So far I have found it accurate - and more convenient than firing up several VMs. http://www.my-debugbar.com/wiki/IETester/HomePage HTH. -- Cordially, David *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] IE9's Browser Mode Controls - Reliable?
Hello All - I've been testing a new version of a legacy project against IE 7, 8 and 9 using IE9's Browser Mode Controls. This way of switching browser modes (between 7, 8 and 9) is quite convenient but... is it a true representation of how the project will render in these three browsers? If not, I'd love to get some suggestions on the LEAST INVASIVE way to test different "modern" flavors of IE. Use to do the VM routine before my C drive crashed and had to re-do all my software. Now that all my apps are cleanly installed and working perfectly, I'd rather not have to add software that I only use on occasion. Any guidance greatly appreciated. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Drop Down Menu slips BEHIND floated image in IE-7
Thanks very much Birenda. Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Birendra Sent: Wednesday, June 01, 2011 4:05 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Drop Down Menu slips BEHIND floated image in IE-7 Hi Cole In your layout.css Line Number 62, remove position:relative from #intro_image and for the font settings you have to change in the navigation.css line number 153 class name #navTop li change the font size 1.0 em instead of 0.7 em Regards Birendra -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Cole Kuryakin Sent: Wednesday, June 01, 2011 12:53 PM To: wsg@webstandardsgroup.org Subject: [WSG] Drop Down Menu slips BEHIND floated image in IE-7 Hello All - Just noticed that my css drop-down menu is being half-hidden behind a floated image in IE-7. Take a look here: www.vascossubic.com/index.php Then hover over the accommodations or scuba diving menu trigger links. I've tried (locally) to bump up the z-index of the drop-down UL (thinking that was the problem) but to no avail. Also my font-size on the drop-down li's are very small - go to set them (again, locally) to 1em to get them back to their correct size. Can anyone tell me how to solve these two particular IE-7 curses - this site works fine in all other browsers... including IE-8. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Drop Down Menu slips BEHIND floated image in IE-7
Hello All - Just noticed that my css drop-down menu is being half-hidden behind a floated image in IE-7. Take a look here: www.vascossubic.com/index.php Then hover over the accommodations or scuba diving menu trigger links. I've tried (locally) to bump up the z-index of the drop-down UL (thinking that was the problem) but to no avail. Also my font-size on the drop-down li's are very small - go to set them (again, locally) to 1em to get them back to their correct size. Can anyone tell me how to solve these two particular IE-7 curses - this site works fine in all other browsers... including IE-8. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Anchor won't position in IE 8
Thierry and ankhscriber -
Position:relative did the trick. For a minute it still didn't work until I
cleared my cache.
Anyway, all is well now; thanks much to you both!
Cole
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Thierry Koblentz
Sent: Thursday, March 24, 2011 2:11 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Anchor won't position in IE 8
> Here's the page in question:
> http://www.koisis.com/.clients/vascos/dev/facilities.htm
>
> Anchor tag ("View Gallery") is in the div with the "Image to Come"
> image.
>
> If you look at this link in FF (et. al) you'll see it's positioned
> correctly.
>
> Now switch to IE 8 (probably ie 7 as well) and you'll see that it's
> positioned outside and to the bottom of the div.
>
> What's also really weird is that IE is also NOT respecting other css
> attributes I've given to this anchor (size, text-decoration, etc).
Try this:
#intro_image {position:relative;}
--
Regards,
Thierry
@thierrykoblentz
www.tjkdesign.com | www.ez-css.org | www.css-101.org
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Anchor won't position in IE 8
Hello All -
Got a project where I'm positioning an anchor tag within a floated div.
Works perfect in FF, Chrome, Opera, Safari ... But not in IE.
Been trying to find work-arounds but keep coming up zero.
Here's the page in question:
http://www.koisis.com/.clients/vascos/dev/facilities.htm
Anchor tag ("View Gallery") is in the div with the "Image to Come" image.
If you look at this link in FF (et. al) you'll see it's positioned
correctly.
Now switch to IE 8 (probably ie 7 as well) and you'll see that it's
positioned outside and to the bottom of the div.
What's also really weird is that IE is also NOT respecting other css
attributes I've given to this anchor (size, text-decoration, etc).
Hummm
Any assistance in helping me sort this out this one anomaly would be GREATLY
appreciated.
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Mobile Phone Emulators
Hi David - >>It makes coping with IE 6/7 look like a game played by children...<< Great, just what I wanted to hear (and had already half-expected). Thanks for all of the great links! Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Laakso Sent: Tuesday, October 05, 2010 11:01 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Mobile Phone Emulators On 10/4/10 10:12 PM, Cole Kuryakin wrote: > If anyone else would like to weigh-in on standards issues (and/or > mobile standard tutorials, gotcha's, etc.) surrounding site > development for mobile devices, please do... Should be a great help to many of us. > > Cole It makes coping with IE 6/7 look like a game played by children... [some links.. in no particular order, rhyme, or reason] <http://www.w3.org/TR/mobile-bp/> <http://www.maxdesign.com.au/articles/css3-media-queries/> <http://dev.opera.com/articles/view/opera-mini-5-beta-developers/> <http://www.w3.org/TR/css3-mediaqueries/> <http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/> <http://trac.webkit.org/wiki/Mobile> <http://my.opera.com/ODIN/blog/screencast-mobile-web-development-techniques# comments> <http://www.alistapart.com/articles/responsive-web-design/> <http://www.perfectomobile.com/portal/cms/opera.xhtml?key=OP631R89YL2> <http://developer.apple.com/devcenter/ios/index.action> Best, ~d -- :: desktop and mobile :: http://chelseacreekstudio.com/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Mobile Phone Emulators
Hello David and Ryan - Thanks very much for the information - very helpful. If anyone else would like to weigh-in on standards issues (and/or mobile standard tutorials, gotcha's, etc.) surrounding site development for mobile devices, please do... Should be a great help to many of us. Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of David Storey Sent: Monday, October 04, 2010 8:51 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Mobile Phone Emulators On 3 Oct 2010, at 06:02, Cole Kuryakin wrote: > Hello All - > > I've been tasked with setting up a few form pages to be viewed on > mobile phone devices. > > Currently I'm using Adobe's Device Central - which is okay but it > really doesn't show how the forms (particulary select lists) will be > shown on various mobile devices. > > I've also tried the online Opera emulator which seems to work pretty > well This emulates Opera Mini. You can get a downloadable Opera Mobile emulator at http://www.opera.com/developer/tools/ . It isn't strictly an emulator. It is the actual browser ported to Windows/Mac/Linux, but it is easier to name it that way. > , > but what about Nokia, Motorola, Samsung, Apple, etc., etc. > > I've read on-line that for Nokia and Apple you've really gotta > download their SDK in order to accuratly test webpages - true? It comes as part of the SDK package for iPhone at least. An emulator also comes as part of the Palm (It is a copy of the OS that you have to run through a virtual machine like VirtualBox) SDK, and the Android SDK. > > Would greatly appreciate any advice from those of this group who > develop mobile viewable pages (particulary forms) on where to test > your efforts for the best compliant and visual result across the > largest number of mobile devices possible. > > Cole > > > > *** > List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm > Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm > Help: memberh...@webstandardsgroup.org > *** > -- David Storey Chief Web Opener / Product Manager, Opera Dragonfly W3C WG: Mobile Web Best Practices / SVG Interest Group Opera Software ASA, Oslo, Norway Mobile: +47 94 22 02 32 / E-Mail/XMPP: dsto...@opera.com / Twitter: dstorey *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Mobile Phone Emulators
Hello All - I've been tasked with setting up a few form pages to be viewed on mobile phone devices. Currently I'm using Adobe's Device Central - which is okay but it really doesn't show how the forms (particulary select lists) will be shown on various mobile devices. I've also tried the online Opera emulator which seems to work pretty well, but what about Nokia, Motorola, Samsung, Apple, etc., etc. I've read on-line that for Nokia and Apple you've really gotta download their SDK in order to accuratly test webpages - true? Would greatly appreciate any advice from those of this group who develop mobile viewable pages (particulary forms) on where to test your efforts for the best compliant and visual result across the largest number of mobile devices possible. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Margin At Bottom Disappears in IE8, Safari, Chrome
Hello All - I've got a 50px margin at the bottom of a project that - for reasons I can't figure out - disappears in IE8, Safari and Chrome. Looks as per spec in both FF and Opera. Go here to take a look: http://www.koisis.com/.clients/sangat/dev_v2/index.php Take a look first in either FF or Opera... If you scroll all the way to the bottom of the page, you'll see a footer nav below which is margin I'm required to achieve. Now take a look at the same area in IE8, Safari (PC) and Chrome... The margin disappears. I don't know if this is because I'm using as the content wrapper (which maybe these three browsers don't like me to do) or just some css property I'm overlooking that these browsers need - my css does validate as per the web-developer extension is concerned. Any insight would be greatly appreciated! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] @import and IE7
Hi Oliver, Edward, Tee and Kepler Well, bummer. I was really hoping that @import (or some variant within a "base.css" sheet) would work (with various media type specifications) because on each project I've got like eight different css sheets that I link to my index.php (I can hear you guys laughing, crying, screaming). I do keep everything separate for ease of maintenance/tweaking as time goes on. Obviously linking all of these sheets does have a proformance hit but I've never measured it against a single sheet but I find organizing my style sheets like this helps my work-related santity. Sort of strange that the technique I was trying to employ is mentioned as a viable solution on different sites (with the exception of the media problem with IE) but that's why - on questions like this - I like to vette an option like this to a group of working professionals on this group. Thanks so much for your opinions an insight. Kepler - I'll take a look at your free tool - greatly appreciate the link! Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Kepler Gelotte Sent: Sunday, July 25, 2010 4:24 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] @import and IE7 > I agree that import doesnt perform too well. Separate the files in > whatever way will support the growth of your site best, and make sure > you use some sort of combine tool / filter to reduce the number of > requests Hi Cole, I have a free tool that will combine CSS files on the server using @include() instead of @import(). The CSS files are combined and compressed before being sent to the browser. You can then use as others have suggested to separate your print from screen stylesheets. The latest version also supports caching if you are concerned about performance. Just make sure you have a writable "cache" directory under your CSS folder(s). This all works dynamically by adding the files to your CSS directory(ies). One caveat, if you split your CSS files into subdirectories, make sure you copy the files to all folders that contain CSS. You can read/download it here: http://www.coolphptools.com/dynamic_css Best of luck to you. Best regards, Kepler Gelotte Neighbor Webmaster, Inc. 156 Normandy Dr., Piscataway, NJ 08854 www.neighborwebmaster.com phone/fax: (732) 302-0904 From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Edward Lynn Sent: Saturday, July 24, 2010 4:44 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] @import and IE7 I agree that import doesnt perform too well. Separate the files in whatever way will support the growth of your site best, and make sure you use some sort of combine tool / filter to reduce the number of requests Ed On Sat, Jul 24, 2010 at 8:18 AM, Oliver Boermans wrote: Hi Cole On Saturday, July 24, 2010, Cole Kuryakin wrote: > Hello All - > > I've finally decided that I'd like to a single base > style sheet (base.css) into my projects. > > The base.css would then @import various other style sheets which would > define the dclarations for project layout, type, color, forms, etc. I would not recommend you separate your CSS files for purely organisational purposes. Do this _within_ your files. Less files loaded by the browser means faster pagel loading. @import is also bad for performance. Where you must separate your files it is better to have multiple link elements. The other advantage of avoiding @import is to see what CSS is being loaded into the page it is only necessary to look in the HTML. This can save someone else a lot of time troubleshooting your site later. Before Firebug l would separate my CSS into a bunch of files, just to reduce the time to navigate them. Now the inspector in Firebug makes this so easy there isn't really a lot of organisation advantage in doing so. I hope this is helpful, even if I didn't really answer your question... Cheers Ollie @ollicle *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] @import and IE7
Hello All -
I've finally decided that I'd like to a single base style
sheet (base.css) into my projects.
The base.css would then @import various other style sheets which would
define the dclarations for project layout, type, color, forms, etc.
I was very excited about trying this until - after just a bit of research -
I found out that IE7 won't recognize media types within an @import
statement.
There are a few workarounds posted regarding this issue, but I'd just like
some clarification.
So, I've got:
Base.css - which, at the very top OF THE BASE.CSS STYLESHEET would be:
@import url('css/layout.css') screen;
@import url('css/color.css') screen;
@import url('css/print.css') print;
... And so on.
But, for IE 7 to recognize the media type for each @import, I would need to
re-write top OF THE BASE.CSS STYLESHEET as such:
Base.css
@import url('css/layout.css')
;
@import url('css/color.css')
;
@import url('css/print.css')
;
Is this correct?
Any guidance greatly appreciated!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] FALSE ALARM: Positioned Element Disappears for Client - but I can see it!
Henrik and everyone else - Mystery solved and sorry for the bother. This client (as the site indicates) has his resort in a somewhat remote area of the philippines; accordingly his internet connection is fed by a satellite. We've had a small issue in the past where I'd do an update but it wouldn't show in his location for almost a day but it would show everywhere else. Apparently the satellite somehow cache's content and if you change that content (or html structure) it only reveals the new content/structure at given times of the day - one of the wonders of living and doing business from the third world! Anyway, thanks to all and sorry for the false alarm! Cole _ From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Henrik Madsen Sent: Monday, November 23, 2009 10:44 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Positioned Element Disappears for Client - but I can see it! Perfect here - Mac - FF, Safari and Opera <http://www.igenerator.com.au/> GENERATOR Henrik Madsen +61 08 9387 1250 <mailto:hen...@igenerator.com.au> hen...@igenerator.com.au <http://www.igenerator.com.au/> www.igenerator.com.au On 23/11/2009, at 10:18 AM, Cole Kuryakin wrote: Hello all - This is sort of a strange one: I've got a project that I deployed yesterday that includes an absolutely position UL at the very top that contains various weather information. On my box, in IE7, FF, Opera, Chrome and Safari (PC) This items shows up without a problem - both on my local dev environment AS WELL AS when I view the site on the web. Last evening, my client says: "hey, I can only see the very bottom of the icon and none of the weather information". He say's it's "gone" in both IE7 and Firefox. Hummm. He sent me a screen shot which I've attached - I hope I can send attachments to the group! Indeed, on the attachment, the entire positioned UL is gone - collapsed - (only a sliver of the bottom of the weather icon is showing). I've highlighted this area on the attachment in yellow. The strangest part is that when I'm viewing the site - local and live - everything's perfect. If anyone is interested in helping me solve this issue, please take a look at www.sangat.ph. If anyone DOESN'T see the entire weather feed information (date and time on the first line; temperature and text forecast on the second line; forecast icon on the right) at the very top-right of the layout, I'd appreciate any hints on what's going on. Great thanks to all in advance! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Kepler -
Hey, thanks for taking so much effort for all that you've written below.
Yes, it's true, I'd like to make these entries more semantically structured
(I hadn't thought of a def list option) but I was under a nighmarish
deadline on this module of the project so just initially opted for a table
layout.
One MAJOR problem with using background images for the flag buttons is the
fact that each entry could carry any one of 200+ flags. That's a WHOLE LOT
of background declarations! No matter what type of more semantic structure I
end up using for this I'm afraid I'll have to use image tags for the flag.
Anyone else have any suggestion of what a "preferred" semantical structure
"should be" for a guestbook?
Cole
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Kepler Gelotte
Sent: Sunday, September 27, 2009 2:24 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Strange Table Border Rendering in everything BUT FF and
IE
Hi,
What Chris wrote will take care of the border issue. I would suggest using a
structure other than a table though for guestbook entries. You could use a
definition list (other people on this list may disagree and have a more
semantic structure you could use).
For example, the CSS:
dl.guestBook
{
font-size: 75%;
border-top: 1px solid #9CA027;
border-bottom: none;
border-right: none;
border-left: none;
margin-bottom: 20px;
padding-top: 15px;
}
dl.netherlands
{
background: url('nl.jpg') 0 15px no-repeat;
}
dl.australia
{
background: url('au.jpg') 0 15px no-repeat;
}
dl.guestBook dt, dl.guestBook dd
{
text-align: left;
border: none;
padding: 0 0 0 15px;
margin: 0 0 10px 64px;
}
dl.guestBook dt
{
font-size: 1.4em;
font-weight: bold;
color: #2695c0;
}
dl.guestBook dd.loc_date,
dl.guestBook dd.rating
{
color: #9CA027;
}
dl.guestBook dd.stars5
{
background: url('5.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars4
{
background: url('4.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars3
{
background: url('3.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars2
{
background: url('2.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.stars1
{
background: url('1.jpg') 7em 0 no-repeat;
}
dl.guestBook dd.rating span
{
display: none;
}
And the HTML:
Susanne de Letter
Netherlands / September 23, 2009
Experience: 5 stars
Just want to send a quick email that I had a lovely stay
in the resort. Nice food, nice people and great diving. Even if you are a
single lady traveller like me it's a great place to stay.
Hope it stopped raining? That the dogs are ok and that you didn't have any
exciting night dives with angry pearl fishers anymore.
Say hi to Jo Jo and who knows maybe you see me back one day
Thanks Susanne de Letter
Amsterdam the Netherlands
That's not perfect, but I can only imagine it is easier to view in a text
browser than the table version.
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Strange Table Border Rendering in everything BUT FF and IE
Chris - That did it my friend - thanks for being my seeing eye dog! Much appreciated. Cole -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Knowles Sent: Sunday, September 27, 2009 1:05 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Strange Table Border Rendering in everything BUT FF and IE Cole Kuryakin wrote: > Hello All - > > This is the first time I've come across this issue. > > First, go here in either FireFox or IE7 or greater: > http://www.sangat.ph/index.php?cmd=08.01.00 > > Both of these browsers render two guestbook entries (displayed in a table) > with a thin green line set on the top border of each of the two tables. This > is the way it should look. > > Now, if you go to the same page with Opera, Safari (windows), or Chrome, the > table border only renders to the width of within each of > these two tables. Hummm. > Hi Cole in the first row the td needs a colspan of 2 I think should be... -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Strange Table Border Rendering in everything BUT FF and IE
Hello All -
This is the first time I've come across this issue.
First, go here in either FireFox or IE7 or greater:
http://www.sangat.ph/index.php?cmd=08.01.00
Both of these browsers render two guestbook entries (displayed in a table)
with a thin green line set on the top border of each of the two tables. This
is the way it should look.
Now, if you go to the same page with Opera, Safari (windows), or Chrome, the
table border only renders to the width of within each of
these two tables. Hummm.
My css is pretty straight forward:
table.guestBook
{
border-top: 1px solid #9CA027;
border-bottom: none;
border-right: none;
border-left: none;
margin-bottom: 20px;
}
table.guestBook td.flag
{
padding: 0;
width: 64px;
}
table.guestBook th, table.guestBook td
{
font-size: 1.2em;
text-align: left;
border: none;
padding: 0px 0px 5px 15px;
}
table.guestBook th.name
{
font-size: 1.4em;
color: #2695c0;
}
table.guestBook img.stars
{
position: relative;
left: 3px;
top: 3px;
}
table.guestBook td.comment
{
padding-top: 10px;
}
Has anyone else come across this non-Firefox, non i.e. issue? Any
suggestions on how to fix it?
Great appreciation for all guidance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***<>
RE: [WSG] Strange Bottom Margin on Floated Elements I Can't Get Rid of
Cal -
Bang! That did it. Thanks so much - I knew it had to be something simple.
Truly appreciate the guidance.
Cole
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of Cal Wilson
Sent: Friday, August 14, 2009 4:02 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Strange Bottom Margin on Floated Elements I Can't Get Rid
of
Hi Cole,
Try setting those images to 'display: block;'
div.thumbs img {display: block;}
The reason this works is detailed here:
https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
HTH
--
cal.
oksushi on Freenode
On 14/08/2009, at 5:36 PM, Cole Kuryakin wrote:
> Hello All!
>
> I've got a small but annoying problem I can't seem to solve.
>
> I've got six test thumbnail images wrapped inside of hrefs. All six
> hrefs
> are floated left within a containing div.
>
> The div can only accommodate 4 of these href'd images per row so
> images 5
> and 6 break to a second row - which is fine.
>
> My issue is this strange margin-type space that is appearing below
> each href
> - since I've set margins and padding to '0' for both images and
> hrefs, I
> don't understand what in the world is causing this anomaly.
>
> My CSS is VERY simple and straight forward but nothing I try will
> eliminate
> this bottom margin.
>
> Can someone please help me see the error of my ways?
>
> Live sample is posted here:
> http://www.koisis.com/problems/float_space/tester.htm
>
> Great appreciation to all in advance!
>
> Cole
>
> PS: IN IE7 there is no whitespace at the bottom of these elements,
> but in
> FireFox (et. al) there is.
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: memberh...@webstandardsgroup.org
> ***<
> winmail.dat>
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
[WSG] Strange Bottom Margin on Floated Elements I Can't Get Rid of
Hello All! I've got a small but annoying problem I can't seem to solve. I've got six test thumbnail images wrapped inside of hrefs. All six hrefs are floated left within a containing div. The div can only accommodate 4 of these href'd images per row so images 5 and 6 break to a second row - which is fine. My issue is this strange margin-type space that is appearing below each href - since I've set margins and padding to '0' for both images and hrefs, I don't understand what in the world is causing this anomaly. My CSS is VERY simple and straight forward but nothing I try will eliminate this bottom margin. Can someone please help me see the error of my ways? Live sample is posted here: http://www.koisis.com/problems/float_space/tester.htm Great appreciation to all in advance! Cole PS: IN IE7 there is no whitespace at the bottom of these elements, but in FireFox (et. al) there is. *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***<>
RE: [WSG] Vanishing icon within a Span Element in IE7
Kepler -
With the small amendment of vertical-align: top (rather than bottom) your
solution worked perfectly for FF and IE's - appreciate your assistance!
Cole
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Kepler Gelotte
Sent: Tuesday, November 25, 2008 4:02 PM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Vanishing icon within a Span Element in IE7
> Can someone please tell me how to fix this so it'll show up in IE?
Hi Cole,
It does appear to be a bug in IE. The following CSS is turning off the
display of the icon in c_project_help_error.css:
span.smallHelpIcon span {
display:none;
}
By commenting that section out, the icon displays (along with the text you
were trying to replace with the icon). Instead of using the nested spans in
your HTML:
help icon
maybe use an tag with the alt text = "help icon"? It is not display as
nicely with images turned off but has the same effect as you seem to be
trying to achieve. Use the following CSS instead:
img.smallHelpIcon {
display:inline;
vertical-align:bottom;
padding:0;
margin:0;
}
Your spans could then be replaced with just an img:
Best regards,
Kepler Gelotte
Neighbor Webmaster, Inc.
156 Normandy Dr., Piscataway, NJ 08854
www.neighborwebmaster.com
phone/fax: (732) 302-0904
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
[WSG] Vanishing icon within a Span Element in IE7
Hello All - I've got an icon set as a background image within a span element which shows up as expected in FF, but vanishes under IE7. First, go here with FF: http://www.koisis.com/.clients/asdem/dev/index.php?cmd=004004 Under FireFox, you'll see the little question-mark icon in the line under the "Getting Help" Heading... this is how it should look. However, if you load the same page in IE7, the declared padding of the span is there, but no little icon. Can someone please tell me how to fix this so it'll show up in IE? Great appreciation to all in advance! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
RE: [WSG] Missing Icon and strange Legend margin in IE7
Robert -
Thanks for the legend fix: perfect!
No hits on the vanishing span icon so I'm re-posting that under an amended
title. Thanks very much for the help with the Legend!
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Robert O'Rourke
Sent: Monday, November 24, 2008 6:41 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Missing Icon and strange Legend margin in IE7
Cole Kuryakin wrote:
> Hello All -
>
> ...
>
> First, go here with FF:
> http://www.koisis.com/.clients/asdem/dev/index.php?cmd=004004
>
> You'll notice in the UL a heading called "Getting Help". In that the
single
> LI that follows there's a little question-mark icon (which sit's in a span
> tag). That's the way it should look.
>
> Now, within the fieldset (pink box) there are two Legend items (green
boxes)
> with two other large question mark icons with "Personal Information" and
> "Curriculum Vitae" next to each.
>
> This is the way that should look also.
>
>
> Now, head over to the same link with IE7.
>
> What you'll see in IE 7 is that the little question-mark icon in the
> "Getting Help" UL/LI has vanished, and the Legends within my fieldsets
have
> shifted to the right.
>
>
>
> Can anyone please show me the error of my ways in regards to both of these
> issues?
>
> Great appreciation in advance!
>
> Cole
>
Hello,
I haven't had time to check the image issue but the legends being
shifted right is an IE oddity affecting versions 7 and below.
In your IE stylesheet you need to target the versions mentioned above so
the following should work for you:
* html legend { margin-left: -7px; } /* IE lte 6 */
*+html/*/*/ legend { margin-left: -7px; } /* IE 7 */
-Rob
***
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]
***
[WSG] Missing Icon and strange Legend margin in IE7
Hello All - Got a project that's set for deployment Dec 1 and was just cleaning up a few bits and pieces when I noticed a few small anomalies that - after hours of trying - I can't figure out. First, go here with FF: http://www.koisis.com/.clients/asdem/dev/index.php?cmd=004004 You'll notice in the UL a heading called "Getting Help". In that the single LI that follows there's a little question-mark icon (which sit's in a span tag). That's the way it should look. Now, within the fieldset (pink box) there are two Legend items (green boxes) with two other large question mark icons with "Personal Information" and "Curriculum Vitae" next to each. This is the way that should look also. Now, head over to the same link with IE7. What you'll see in IE 7 is that the little question-mark icon in the "Getting Help" UL/LI has vanished, and the Legends within my fieldsets have shifted to the right. I don't know WHAT'S going on with the little icon in the UL, but I thought the problem with the legend placement was either some left-margin, or padding inside the fieldset. Tried fiddling with the padding and margins on each of those elements (and a whole bunch of other tweaks) but with absolutely no luck in getting those legends to align to the left of the fieldset. Can anyone please show me the error of my ways in regards to both of these issues? Great appreciation in advance! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
[WSG] HTML and BODY - SOLVED
Florian, Gleb, and (of course) Georg -
Great thanks to you all for trying to help me solve this.
The solution Georg proposed made everything work as planned... thanks
Georg!!!
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Gunlaug Sørtun
Sent: Monday, September 29, 2008 6:21 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Setting HTML and BODY background not working
Cole Kuryakin wrote:
> http://www.koisis.com/.clients/asdem/dev/index.php?cmd=001001
> The height of the body image (the hiroshige painting) - rather than
> showing in full - seems to be getting "cropped" by the height of my
> "wrapper" div.
Add...
body{
padding: 1px 0;
min-height: 100%;
}
* html body{ height: 100%;}
...to make body at least as high as html/viewport - and growing with
content.
regards
Georg
--
http://www.gunlaug.no
***
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] Setting HTML and BODY background not working
Gleb -
That's the correct path as relative to the css style sheet.
My structure is set up as:
www.koisis.com/.clients/asdem/
. assets
. . css
. . image
Etc.
So, the path is correct (relative to the stylesheet) - you can see the
painting graphic within the link given - it's just not displaying as
expected/required.
Cole
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Gleb Arestov
Sent: Monday, September 29, 2008 5:53 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Setting HTML and BODY background not working
what is exactly path to your image?
looks like it wrong
http://www.koisis.com/.clients/asdem/dev/
+
../image/_global/hiroshige.jpg
=
http://www.koisis.com/.clients/asdem/image/_global/hiroshige.jpg (404 Not
Found)
2008/9/29 Florian Hamberger <[EMAIL PROTECTED]>
Did you already try position:static; for the wrapper div?
>
> body{
> min-width: 780px;
> text-align: center;
>
> font-family: Arial, Verdana, Tahoma, Helvetica, Geneva, sans-serif;
> font-weight: normal;
> font-size: 1em;
>
> background: url(../image/_global/hiroshige.jpg) no-repeat 0 0;
> color: #000;
> }
***
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] Setting HTML and BODY background not working
Hello Florian -
I just tried it, but the "cropped" background image continues to follow the
height of the wrapper.
Cole
-Original Message-
From: Florian Hamberger [mailto:[EMAIL PROTECTED]
Sent: Monday, September 29, 2008 5:54 PM
To: Cole Kuryakin
Cc: wsg@webstandardsgroup.org
Subject: Re: [WSG] Setting HTML and BODY background not working
Did you already try position:static; for the wrapper div?
Florian
> Hello All -
>
> I've got this strange problem: I'm setting a tiling background in the html
> element - this works fine. Then I'm setting another background image in
the
> body element which is giving me fits.
>
> Take a look here:
> http://www.koisis.com/.clients/asdem/dev/index.php?cmd=001001
>
> The height of the body image (the hiroshige painting) - rather than
showing
> in full - seems to be getting "cropped" by the height of my "wrapper" div.
>
> You can see what I mean on any page, but you can particularly see this
> "cropping" effect when you go to a page like Training > Conferences and
> Seminars. On this particular page (because the wrapper content is so long)
> you can see the full body image. On shorter pages - as previously
mentioned
> - the body image is cropped to the exact size of the wrapper.
>
> I do notice that if I take the background declaration out of the html, the
> body background image behaves as required.
>
> My css for both html and body are as follows:
>
> html{
> height: 100%;
> margin-bottom: 1px;
> background: #80101C url(../image/_global/background_gradient.jpg)
> repeat-x 0 0;
> }
>
> body{
> min-width: 780px;
> text-align: center;
>
> font-family: Arial, Verdana, Tahoma, Helvetica, Geneva, sans-serif;
> font-weight: normal;
> font-size: 1em;
>
> background: url(../image/_global/hiroshige.jpg) no-repeat 0 0;
> color: #000;
> }
>
> Can someone please show me the error of my ways?
>
> Cole
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
--
Florian Hamberger
Florian Hamberger Computerberatung
Pfannstiel 7
83112 Frasdorf
Fon: +49 8052 2196
Fax: +49 8052 909111
email: [EMAIL PROTECTED]
Internet: www.fhcb.net
Ust-IdNr: DE184195224
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Setting HTML and BODY background not working
Hello All -
I've got this strange problem: I'm setting a tiling background in the html
element - this works fine. Then I'm setting another background image in the
body element which is giving me fits.
Take a look here:
http://www.koisis.com/.clients/asdem/dev/index.php?cmd=001001
The height of the body image (the hiroshige painting) - rather than showing
in full - seems to be getting "cropped" by the height of my "wrapper" div.
You can see what I mean on any page, but you can particularly see this
"cropping" effect when you go to a page like Training > Conferences and
Seminars. On this particular page (because the wrapper content is so long)
you can see the full body image. On shorter pages - as previously mentioned
- the body image is cropped to the exact size of the wrapper.
I do notice that if I take the background declaration out of the html, the
body background image behaves as required.
My css for both html and body are as follows:
html{
height: 100%;
margin-bottom: 1px;
background: #80101C url(../image/_global/background_gradient.jpg)
repeat-x 0 0;
}
body{
min-width: 780px;
text-align: center;
font-family: Arial, Verdana, Tahoma, Helvetica, Geneva, sans-serif;
font-weight: normal;
font-size: 1em;
background: url(../image/_global/hiroshige.jpg) no-repeat 0 0;
color: #000;
}
Can someone please show me the error of my ways?
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
RE: [WSG] DocType Given is... SOLVED
Essential, Todd and Dwain - Thank you all for your input. Have removed the javascript language attributes as well as the errant html comment and now the Tidy message I get matches Strict/Strict Thanks again to everyone! Cole _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Essential eBiz Solutions Ltd Sent: Friday, September 05, 2008 8:11 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] DocType Given is... Document Looks Like... As far as I'm aware XHTML strict was never programmed to acknowledge attributes, this was something that was only available in the transitional format. If you remove language="javascript1.2" then you're page will validate perfectly. _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Cole Kuryakin Sent: 05 September 2008 00:40 To: wsg@webstandardsgroup.org Subject: RE: [WSG] DocType Given is... Document Looks Like... Hi Todd - Link is here: http://www.koisis.com/.framework/-public/index.php Yes, I have verified that it's HTML validator - which is based upon Tidy - extension that is giving me this info (it's not an error or even a warning). As mentioned, all my pages do validate (as per HTML Validator) as I always get a green check mark and "0 errors / 0 warnings" at the bottom-right-hand corner of FF. As mentioned, no where near an emergency or a problem, but I am just curious. Cole _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Todd Budnikas Sent: Thursday, September 04, 2008 7:08 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] DocType Given is... Document Looks Like... Cole, can you post a url so people can see the validator results and review the code? Everything looks on the up-and-up from what you've posted. I've never used the FF HTML Validator extension (is it the one based on HTML Tidy?), so i can't speak for that. The Web Developer extension just pushes the page to the W3C validator. Please also verify which Validator of the 2 you're running into trouble with. On Sep 4, 2008, at 12:47 AM, Cole Kuryakin wrote: Hello all - I've got the following doctype at the head of each of my pages: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> I take great pains to validate everything I do on every page, but, even if the page shows as valid (using FF's HTML Validator extension - or Web Developer extension. I can't remember which) when I view source on a "valid" page, I always get an info box that states: Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN" Info: Document content looks like XHTML 1.0 Transitional I don't think that this is - by any means - any reason for me to be worried about my code/structure/et. al, but I've always wondered why, if I feed a xhtml 1.0 STRICT doc type why the validator always says that my stuff looks TRANSITIONAL? Am I doing something wrong? Any insight would be appreciated. Cole *** 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] DocType Given is... Document Looks Like...
Hi Todd - Link is here: http://www.koisis.com/.framework/-public/index.php Yes, I have verified that it's HTML validator - which is based upon Tidy - extension that is giving me this info (it's not an error or even a warning). As mentioned, all my pages do validate (as per HTML Validator) as I always get a green check mark and "0 errors / 0 warnings" at the bottom-right-hand corner of FF. As mentioned, no where near an emergency or a problem, but I am just curious. Cole _ From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Todd Budnikas Sent: Thursday, September 04, 2008 7:08 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] DocType Given is... Document Looks Like... Cole, can you post a url so people can see the validator results and review the code? Everything looks on the up-and-up from what you've posted. I've never used the FF HTML Validator extension (is it the one based on HTML Tidy?), so i can't speak for that. The Web Developer extension just pushes the page to the W3C validator. Please also verify which Validator of the 2 you're running into trouble with. On Sep 4, 2008, at 12:47 AM, Cole Kuryakin wrote: Hello all - I've got the following doctype at the head of each of my pages: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> I take great pains to validate everything I do on every page, but, even if the page shows as valid (using FF's HTML Validator extension - or Web Developer extension. I can't remember which) when I view source on a "valid" page, I always get an info box that states: Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN" Info: Document content looks like XHTML 1.0 Transitional I don't think that this is - by any means - any reason for me to be worried about my code/structure/et. al, but I've always wondered why, if I feed a xhtml 1.0 STRICT doc type why the validator always says that my stuff looks TRANSITIONAL? Am I doing something wrong? Any insight would be appreciated. Cole *** 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] ***
[WSG] DocType Given is... Document Looks Like...
Hello all - I've got the following doctype at the head of each of my pages: http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> I take great pains to validate everything I do on every page, but, even if the page shows as valid (using FF's HTML Validator extension - or Web Developer extension. I can't remember which) when I view source on a "valid" page, I always get an info box that states: Info: Doctype given is "-//W3C//DTD XHTML 1.0 Strict//EN" Info: Document content looks like XHTML 1.0 Transitional I don't think that this is - by any means - any reason for me to be worried about my code/structure/et. al, but I've always wondered why, if I feed a xhtml 1.0 STRICT doc type why the validator always says that my stuff looks TRANSITIONAL? Am I doing something wrong? Any insight would be appreciated. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Pop-Up Menu and IE7 Problem - SOLVED
Bill -
That worked perfectly... even in IE7! So simple (and obvious!)
Greatly appreciate your help.
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Bill Brown
Sent: Wednesday, August 27, 2008 7:54 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Pop-Up Menu From Footer and IE7 Problem
Cole Kuryakin wrote:
> To see it working in FF and IE6 go here:
> http://www.koisis.com/.framework/-public/index.php
> In FF and IE 6 this works. But what I'm trying to do, and can't seem to
> accomplish, is to position the BOTTOM of this pop-up UL (rather than the
top
> as it is now) so that no matter how many languages the menu contains, it
> still pops-up from the same footer position. As it stands right now, if I
> eliminate one or more languages from this menu I will have to edit the
"top"
> property which I'd rather not have to do.
Hi Cole,
I'm on my Ubuntu system at the moment so I can't check IE7, but this
code should allow your menu to be any length and work without having to
adjust it for every entry. Worked on my Firefox 3, but I didn't check
anywhere else.
If you haven't received an answer by later tonight, I'll boot the
Windows Beast and see what's up with IE7.
#navFooter li ul {
position: absolute;
left: -1px;
}
#navFooter li:hover ul {
left: -2px;
bottom: 100%;
z-index: 100;
}
Hope it helps.
--Bill
--
~~~
TheHolierGrail.com | MacNimble.com | Cyber-Sandbox.com | Anytowne.com
Bill Brown, Web Developer - "From dot concept to dot com since 1999"
"The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
***
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]
***
[WSG] Pop-Up Menu From Footer and IE7 Problem
Hello All -
I've got a POP UP menu that appears on hover from a footer navigation UL.
This menu contains language names so the user can view site content in
different languages.
To see it working in FF and IE6 go here:
http://www.koisis.com/.framework/-public/index.php and hover over the
"Language" menu item in the footer area.
I was able to get to this point by declaring:
#navFooter li ul {
position: absolute;
left: -1px;
top: -1px;
}
And then...
#navFooter li:hover ul {
left: -2px;
top: -195px;
z-index: 100;
}
In FF and IE 6 this works. But what I'm trying to do, and can't seem to
accomplish, is to position the BOTTOM of this pop-up UL (rather than the top
as it is now) so that no matter how many languages the menu contains, it
still pops-up from the same footer position. As it stands right now, if I
eliminate one or more languages from this menu I will have to edit the "top"
property which I'd rather not have to do.
Also, in IE7 this menu doesn't appear AT ALL and I can't figure out why.
Any help would be GREATLY appreciated!
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
[WSG] POP-UP Footer Menu Question and IE7 Woes
Everaldo - Oops. Sorry to all - here's the live link with a repeat of my
post: http://www.koisis.com/.framework/-public/index.php
Original post below:
This was just going to be positioning question until 5 minutes ago I found
that I had a problem in IE 7 (not IE 6!), but I'll cover the question first.
I've got a POP UP menu that appears on hover from a footer navigation UL.
This menu contains language names so the user can view site content in
different languages.
To see it working in FF and IE6 go here:
http://www.koisis.com/.framework/-public/index.php and hover over the
"Language" menu item in the footer area.
I was able to get to this point by declaring:
#navFooter li ul {
position: absolute;
left: -1px;
top: -1px;
}
And then...
#navFooter li:hover ul {
left: -2px;
top: -195px;
z-index: 100;
}
This works great if there's exactly 10 languages to choose from. But, if
there's less than 10 - which would typically be the case in a production
project - the menu "levitates" out of bounds of a click - no real big
deal... I'd just have to adjust the "top" value of the declaration until the
menu settled back to where it's suppose to be.
But there's got to be a better way.
What I'd like this menu to do is, no matter how many languages were shown,
the bottom of the menu would always align with the bottom of the footer
element. So, I initially tried "bottom 0" on the pop-up UL thinking that
that would set the bottom of the menu to the bottom of it's containing UL
but (Wow), the menu then stretches all the way off the top of the screen
with no menu items in sight. I noodled with this most of the day today
trying different positioning techniques but always came up empty.
I'm re-using (essentially) the code that triggers my drop-down menus but
can't seem to get this little trick to work. Is there a way to do what I
want??
NOW, FOR THE IE 7 PROBLEM:
As mentioned above, the menu DOES work with the declaration shown above in
FF and IE6 - but when I just checked it against IE 7, nothing happens (no
menu appears at all) when you hover over Languages.
This, of course, is a much bigger problem than simply my bottom-positioning
question above.
Any and all guidance on either or both questions are sincerely appreciated!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
[WSG] Pop UP menu positioning in a footer
Hello All -
This was just going to be positioning question until 5 minutes ago I found
that I had a problem in IE 7 (not IE 6!), but I'll cover the question first.
I've got a POP UP menu that appears on hover from a footer navigation UL.
This menu contains language names so the user can view site content in
different languages.
To see it working in FF and IE6 go here:
http://localhost/koisis_framework/index.php and hover over the "Language"
menu item in the footer area.
I was able to get to this point by declaring:
#navFooter li ul {
position: absolute;
left: -1px;
top: -1px;
}
And then...
#navFooter li:hover ul {
left: -2px;
top: -195px;
z-index: 100;
}
This works great if there's exactly 10 languages to choose from. But, if
there's less than 10 - which would typically be the case in a production
project - the menu "levitates" out of bounds of a click - no real big
deal... I'd just have to adjust the "top" value of the declaration until the
menu settled back to where it's suppose to be.
But there's got to be a better way.
What I'd like this menu to do is, no matter how many languages were shown,
the bottom of the menu would always align with the bottom of the footer
element. So, I initially tried "bottom 0" on the pop-up UL thinking that
that would set the bottom of the menu to the bottom of it's containing UL
but (Wow), the menu then stretches all the way off the top of the screen
with no menu items in sight. I noodled with this most of the day today
trying different positioning techniques but always came up empty.
I'm re-using (essentially) the code that triggers my drop-down menus but
can't seem to get this little trick to work. Is there a way to do what I
want??
NOW, FOR THE IE 7 PROBLEM:
As mentioned above, the menu DOES work with the declaration shown above in
FF and IE6 - but when I just checked it against IE 7, nothing happens (no
menu appears at all) when you hover over Languages.
This, of course, is a much bigger problem than simply my bottom-positioning
question above.
Any and all guidance on either or both questions are sincerely appreciated!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
[WSG] Drop-down slips behind left-nav - SOLVED
Akella -
Thanks for the insight about the element vs. parent positioning issues of
IE.
I fiddled a bit more using your example and have found that it works fine
with a simple position:relative, z-index: 80 for #navTopDrop in my ie-only
stylesheet; apparently no need to position or z-index #wrapperSide.
Thanks again for your assistance!
Cole
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of akella
Sent: Monday, August 25, 2008 5:58 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Drop-down menu slips behind left-nav anchor text in IE
Hello, Cole.
The problem with IE's z-index, is that you should try to change it not for
"elements i've got stacking problem with" (in your situation it is menu
links and drop downs), but for their parents.
It is for you id="wrapperSide" and id="navTopDrop"
Try something like this:
#wrapperSide{
position:relative;
z-index:25;
}
#navTopDrop{
position:relative;
z-index:83;
}
I cant test it now.. but AFAIK it should do the trick.
С уважением,
Юрий "akella" Артюх,
http://cssing.org.ua,
On Mon, Aug 25, 2008 at 12:44 PM, Cole Kuryakin <[EMAIL PROTECTED]> wrote:
Hello All -
I've got a framework with a drop-down menuing system which works pretty well
until you select one particular menu item which SHOULD drop down OVER a
left-positioned navigation bar.
Everything looks fine in FF, but in IE (6 and 7) when you trigger the
"Section 2" drop down, the menu slips BEHIND the anchor text in the side
navigation - it doesn't slip behind the UL or LI's, just the anchor text...
hummm.
To see the nightmare in action, please go here:
http://www.koisis.com/.framework/-public/index.php and hover over the menu
trigger labeled "Section 2"
I thought that this would be a "simple" stacking/z-index fix (silly me), but
I've fiddled around with this "solution" for hours to no successful
solution.
Anyone care to thrown in a suggestion or two?
Any and all guidance greatly appreciated!
Cole
***
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]
***
[WSG] Mystery Margin SOLVED - THANKS!
Georg and Akella - Thank you both so much for weighing in on the Margin/Padding mystery. Have simply taken the margin-top off the H1 Declaration and all is now well. Really appreciate your guidance. Georg - Have also altered #contentMain declaration to display:inline and have also taken off the width spec after fiddling a bit with the width and padding of it's container - much cleaner. Thanks again to you both! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Drop-down menu slips behind left-nav anchor text in IE
Hello All - I've got a framework with a drop-down menuing system which works pretty well until you select one particular menu item which SHOULD drop down OVER a left-positioned navigation bar. Everything looks fine in FF, but in IE (6 and 7) when you trigger the "Section 2" drop down, the menu slips BEHIND the anchor text in the side navigation - it doesn't slip behind the UL or LI's, just the anchor text... hummm. To see the nightmare in action, please go here: http://www.koisis.com/.framework/-public/index.php and hover over the menu trigger labeled "Section 2" I thought that this would be a "simple" stacking/z-index fix (silly me), but I've fiddled around with this "solution" for hours to no successful solution. Anyone care to thrown in a suggestion or two? Any and all guidance greatly appreciated! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
[WSG] Mystery Margin or Padding in FF and IE
Hello All - I'm developing a new framework for my projects and have come across something I can't get rid of. Go here: http://www.koisis.com/.framework/-public/index.php If you look at the purple float that contains a beige main content area, you'll see that the beige content area is being pushed down about 25px for some reason in FF. In IE 6 and IE 7 the same phenomena also happens, but it happens at the TOP of the beige content area itself. I've gone over and over the css and can't see where I'm going wrong here - have also run the site through the W3C Validator but that service says everything's valid. Can anyone else see the error of my ways? Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
RE: [WSG] Shorthand rule for border?
Chris, David and Tim:
Great thanks to the three of you for your examples and links to w3.org. I'm
very happy that there are shorthand rules for borders by which I can now
streamline my declarations.
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Tim White
Sent: Thursday, April 17, 2008 9:50 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Shorthand rule for border?
On Thu, Apr 17, 2008 at 9:09 AM, Cole Kuryakin <[EMAIL PROTECTED]> wrote:
>
> This is something that I've been wondering about for a long time - a
> shorthand rule for borders.
David's link is a good starting spot -- but I'll move you up a couple
of paragraphs:
http://www.w3.org/TR/CSS2/box.html#border-properties
There are something like 20 different border rules, plus value shorthands.
For you example:
> .someClass
>
> {
>
> border-top: 1px solid #CCC;
>
> border-left: 1px solid #CCC;
>
> border-bottom: 2px solid #666;
>
> border-right: 2px solid #666;
>
> }
...you could do something like
border: 1px solid;
border-width: 1px 2px 2px 1px;
border-color: #ccc #666 #666 #ccc;
There are other options as well (like Chris's).
Tim
***
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]
***
[WSG] Shorthand rule for border?
Hello All -
This is something that I've been wondering about for a long time - a
shorthand rule for borders.
I often find myself in a situation where I have to define a different border
size and/or color for two (or more) sides of an element so I'm always going
through the drudgery of:
.someClass
{
border-top: 1px solid #CCC;
border-left: 1px solid #CCC;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
Boy, that gets boring (not to mention tedious). especially if I've got to do
different rules to yield the same general effect. I've taken a look around
the web and can't find any reference to some sort of "short-hand"
condensation for borders (after all, we've got 'em for padding and margins,
etc); and then again, maybe I'm not putting in the right keywords.
Interested in all enlightenment and/or links.
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] Semantic markup for a person's name or business name
Thanks to all for their input on this issue. The hCard link within microformats.org was very helpful. Two follow-on question though: 1. What does the "v" and "h" stand for in regards to "vCard" and "hCard", and: 2. Aside from it's semantic nature, is there really any "functional" use for formatting data using microformats? I mean, if your format various content using microformat "standards" - as they currently exist - is this information then usable/parse-able on different devices? Or is the use of microformats simply an effort to make specific content blocks (content details, calendars, etc.) semantically coherent in html documents? Thanks to all again. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Semantic markup for a person's name or business name
Hello All - I've been reading a book by Andy Clarke which has a few pages related to micro-formats. He uses the example of marking up an address tag similar to the below using classes (note that br's are mine for formatting): 101 Some Street, Some Sub division Alameda, California, 94501 United States of America But. what if you want to include a person's name (or a business name) ABOVE the address tag? The only thing that comes immediately to mind would be John Smith but that doesn't seem correct. Or, should one use an additional span above the address block like this: John Smith? So the whole thing might look like this: John Smith 101 Some Street, Some Sub division Alameda, California, 94501 United States of America Interested in all opinions as well as if there is any current "standard" which addresses this particular issue. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Any way to defeat legend styling problems in IE?
Hello All - I've already spent a lot of time researching this and - from the threads I've read - there doesn't seem to be a solution for IE in particular. If you go here: http://www.crewasia.ph/index.php?cmd=s7,p2 in IE 6, you'll see that the question mark icon is held off of the left margin of the fieldset (and also displaying a small sliver of the fieldset's top border) which ISN'T as per design. If you look at the same page Firefox, this is the goal. As mentioned, my previous research has left me disheartened about a fix for IE... but then again, the posts I've been reading are well over a year old. Is there something I can do to the legend to make that question mark icon line up with the left border of the fieldset? Great appreciation, as always, in advance. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
RE: [WSG] Please help! - CSS Drop Down not working under IE 6
Gunlaug -
That did it! Thank YOU so much!! I owe you my friend: If you're ever in the
Philippines, the beer is on me!
Cole
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Gunlaug Sørtun
Sent: Monday, February 25, 2008 1:02 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Please help! - CSS Drop Down not working under IE 6
Cole Kuryakin wrote:
> First, go here under IE 6: http://www.crewasia.ph/index.php
>
> The drop down menuing system at the very top of the screen DOES work
> (it drops down correctly). You can even select the FIRST menu item on
> each drop down menu. But, when you try to cursor over any other menu
> item, POOF! The menu disappears!
The absolute positioned dropdowns are stacked behind the header, even
though they appear visually in front. This prevents interaction below a
certain point in both IE6 and IE7.
Try adding...
#navTop {position: relative; z-index: 1;}
...to fix that IE/win "stacking of A:P elements" bug.
I've only tested that it works in IE7.
regards
Georg
--
http://www.gunlaug.no
***
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]
***
[WSG] Please help! - CSS Drop Down not working under IE 6
Hello All - I've slaved and slaved at this for over a day and still can't figure out what's wrong with my CSS. I've looked at dozens of CSS drop down tutorials on the web and applied many of the "IE specific fixes" as recommended, but still no dice. I'm praying someone here can see the error of my ways. First, go here under IE 6: http://www.crewasia.ph/index.php The drop down menuing system at the very top of the screen DOES work (it drops down correctly). You can even select the FIRST menu item on each drop down menu. But, when you try to cursor over any other menu item, POOF! The menu disappears! There's quite a few style sheets on this site, the one controlling the navigation is called c.project_navigation.css. HUGE appreciation to all in advance! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
[WSG] Title links in navigation elements
Hello All - I'm a little confused: are TITLE attributes required for navigation elements? Won't screen readers "verbalize" the contents of the wording between tags? I.e. if an href says "Buy the book" wouldn't a screen reader verbalize "Buy the book"? Or are TITLE attributes simply a "preferred" or best practices inclusion in navigation elements that would expound on the link text, like "Click here to buy the book"? If someone has a simple and clear example for these elements that I could follow (a link would be great) then perhaps everything would become clear to me. Thanks to all in advance, Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] CSS/IE Link Color Problem - SOLVED
Tony -
Thanks for you explanation; all of that makes sense. Thanks as well for your
solution to my specific problem.
Best regards,
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Tony Crockford
Sent: Saturday, August 04, 2007 4:29 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS/IE Link Color Problem - SOLVED
On 4 Aug 2007, at 08:49, Cole Kuryakin wrote:
> Why, however, do you wrap your link text in a ? Are there
> standards -
> or some other - issues I'm not aware of if you simply border your
> "landing-page" link text with the 's without span elements?
I use the span to apply other styling to the contained text in most
cases.
I'm in the habit of not using horizontal padding, preferring to
margin the contained text and often use borders for horizontal visual
separation, bare text inside a li can't have a margin or a border
and in that instance some other element is required to contain the text.
e.g
home
about us
consultancy
training
testimonials
contact us
news
gets styled:
div#nav ul li span,
div#nav ul li a{
color: #FFF;
background-color: #005EB0;
font-size: 0.7em;
font-family: tahoma, sans-serif;
font-weight: bold;
text-decoration: none;
padding: 0 27px 0 26px;
border-right: 1px solid #FFF;
line-height: 2.2;
text-transform: uppercase;
display: block;
}
div#nav ul li.last span,
div#nav ul li.last a{
border: none;
}
div#nav ul li.active span,
div#nav ul li a:hover{
color: #bfdfed;
}
if you're just styling the color of the text within the li, then I
see no reason at all to use span.
YMMV
(P.S. I know the above code has accessibility issues of font-size,
but I'm not always at liberty to surmount that with clients, and I
also know that it should be ul#nav, rather than wrapping it in a div,
but there you go and there are shorthand opportunities for font too,
but hey)
***
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] CSS/IE Link Color Problem - SOLVED
Tony -
Very interesting idea. I like it (it makes complete sense), tried it, and
solves my issue all together (as far as I can see) without the need for
using !imporant - which, as I've continued reading about, is said to be
really an accessibility-specific declaration.
Why, however, do you wrap your link text in a ? Are there standards -
or some other - issues I'm not aware of if you simply border your
"landing-page" link text with the 's without span elements?
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Tony Crockford
Sent: Saturday, August 04, 2007 2:00 PM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] CSS/IE Link Color Problem - SOLVED
Importance: High
On 4 Aug 2007, at 05:46, Cole Kuryakin wrote:
> er-riding user styles??? I've never run into that one before.
> Irritating.
>
> Aside from the !important solution or the (as yet untried) focus
> solution
> that Kepler suggested, does anyone else have an even more elegant
> option or
> ... for my issue ... is this (these) the only ones that'll work?
In the past I have classed the li, rather than the a.
ul#navTopSimpleUL li.active a
{
color: #CC0033;
cursor: default;
text-decoration: none;
}
as it overcomes any pseudo differences.
however I have since stopped having links to the page on the page
they are on (as they go nowhere and do nothing and AIUI are bad
accessibility practice).
now I replace the link with the navigation text wrapped in a span
(programatically) and style the span to match my active/hover needs.
e.g.
ul#navTopSimpleUL li a:focus,
ul#navTopSimpleUL li a:hover,
ul#navTopSimpleUL li.active span
{
color: #CC0033;
cursor: default;
text-decoration: none;
}
***
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]
***
[WSG] CSS/IE Link Color Problem - SOLVED
James and Kepler - Thank you both for your input; I tried suffixing the color and text declaration with !important and that solves the problem. So this, I guess, is an issue of IE's built-in proprietary styles over-riding user styles??? I've never run into that one before. Irritating. Aside from the !important solution or the (as yet untried) focus solution that Kepler suggested, does anyone else have an even more elegant option or ... for my issue ... is this (these) the only ones that'll work? What is WEIRD, is that this framework that I'm devising also has an option for a CSS drop-down menuing system. When I've tested that in IE6, the .active class WORKS on both trigger and menu links. It's issues like these that makes me wonder why I hadn't become a gardener. James and Kepler, thanks again! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***<>
[WSG] Please help! CSS/IE Link Color Problem
Hello All -
After tearing my hair out for over 4 hours I come to you guys/gals for a
fresh eye and perhaps a solution.
I've got a simple class name (.active) attached to an "a" tag. This class is
programmatically activated when a link is chosen and the page loads.
When the chosen page loads, the chosen link turns deep red.
The declaration for this is as follows:
/*ACTIVE LINKS ONLY*/
ul#navTopSimpleUL li a.active
{
color: #CC0033;
cursor: default;
text-decoration: none;
}
A similar declaration is in force for the side AND footer navigation.
In FF it works as required/expected. But, even though the HTML and CSS
validates, this small but important functionality doesn't work in IE 6.
If you look at the testing site in FF (www.koisis.com/.problems/index.php)
this works as required and expected.
If you then view the same page in IE 6 however, the .active class doesn't
work at all - I haven't begun to test in IE7 yet and I can't figure out a
work-around for IE 6..
If you'd like to view the css that controls the navigation rules, it's named
c.project_navigation.css.
Can someone(s) please take a look at this for me and tell me where I'm going
wrong, or what alteration(s) I can make to trigger this class in IE?
Great appreciation and thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
[WSG] Accessibility of Nav Links using Title Tag??
Hello All - While I know that one should use improve accessibility of form eloements, it is also a common (best practice) to use a title attribute inside a link anchor like this: home If there's a better way, or if I'm completely incorrect regarding making my links more accessible, I'd greatly appreciate guidance. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Where's the proper place for an accesskey?
Wow, that's surprising to me, but okay - less work to do! So, if I'm using label tags and their attendant id, is that all that everyone here would suggest is adequate to pass current accessibility standards? Is there anything else I'm missing? Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Thierry Koblentz Sent: Sunday, June 17, 2007 11:28 PM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Where's the proper place for an accesskey? > On Behalf Of Cole Kuryakin > Lastly, I'm always now implementing accesskeys, labels, and tabindex attributes to my form elements. I believe what's considered best practice is to not use them at all: http://lists.w3.org/Archives/Public/w3c-wai-ig/2005JulSep/0019.html http://www.webaim.org/techniques/keyboard/tabindex.php --- Regards, Thierry | www.TJKDesign.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] ***
[WSG] Where's the proper place for an accesskey?
Hello All - I've been reading various tutorials about accesskeys and some (like W3C) say to put it in the label tag, while most others I've seen are exampling it's position in the actual input tag. What's the right (or atleast preferred) position for an access key? Should you put it in different places depending upon the input element (i.e. text field vs checkbox vs submit button)? And does it matter if you define the access key as "A" or "a"? I'm finally trying to tackle this aspect of my coding and want to get it right. Lastly, I'm always now implementing accesskeys, labels, and tabindex attributes to my form elements. Is there anything else I'm missing as I'd like to start making my projects as accessible as possible. Thanks to all in advance. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Tiling image problem
Sherwin, and all others who had responded to this thread -
This design is to be used in a blogging system and their HTML is already
hard-wired and cannot be changed - so that suggestion is out the window by
default.
However, I have convinced the client to dump the patterned background in
favor of a flat-colored alternative which means that I have been able to
execute the tile by adding the background color to the header element which
effectively masks the white tile in the wrapper.
So, thanks to all for responding to my query; but all is now well and I
shall stay well clear of headache causing background patterns for this
client.
Thanks again to everyone!
Cole
_
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Sherwin Techico
Sent: Thursday, May 24, 2007 2:53 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Tiling image problem
Hey Cole,
This might be another way, but have you tried it with extra markup? That is,
possibly using z-index to layer your containers?
Regards,
Sherwin
On 5/20/07, Cole Kuryakin <[EMAIL PROTECTED]> wrote:
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
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] Tiling image problem
Thanks to all for weighing-in on this one and appreciate the side-notes on 1px tall vs. 2px or more tall tiling background images. Unfortunate that we can't determine a vertical start-point for a tiling image but I've learned something new. Thanks again to everyone. Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Novitski Sent: Monday, May 21, 2007 2:54 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Tiling image problem At 5/20/2007 10:18 PM, Cole Kuryakin wrote: >I'm setting a 1px by 770px image to repeat vertically within a wrapper div. By the way, asking the browser to replicate a 1px-thick image will occupy a lot more CPU cycles than if you dimension your image to be fatter and replicate, for example, one that's 50px or 100px thick. In my experience the difference can be large enough to be perceptible by a human being, i.e. a significant fraction of a second or more for a large screen. Generating a fatter background image can therefore be seen as "pre-processing" with significant savings in real time. Regards, Paul __ Paul Novitski Juniper Webcraft Ltd. http://juniperwebcraft.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] ***
[WSG] Tiling image problem
Hello All -
I'm setting a 1px by 770px image to repeat vertically within a wrapper div.
Difference is that I need this repeat to START 300px from the top of the
wrapper.
So far, no luck. Here's the code:
#wrapper {
position: relative;
width: 770px;
margin: 0 auto;
text-align: left;
background:
url(/resources/5661/assets/images_medical/wrapper_tile.jpg) repeat-y 0
300px;
}
Reason I'm starting off at 300px from the top is because I need the top of
the wrapper to be transparent so the tiling body background can be seen
above and below the header, but the area behind the nav and content areas
NEED to be white.
So, is it possible to start a tile a certain distance from the top of a
containing div?
If so, can someone tell me what I'm doing wrong?
If you'd like to see this live, look here: http://teratest.terapad.com
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***<>
RE: [WSG] Disappearing element in IE
Stuart and all others -
Yes, the display:inline; was a mistaken left-over from harried efforts to
get this working with IE ... I was throwing the kitchen sink at the problem
... one declaration at a time ... but still couldn't get it to work. It's
out now but still no result. Strange as the css validates with the exception
of the star hack I'm forced to use on this project because I'm not allowed
to use IE CC's to break out browser specific sheets.
ANYWAY ... I really don't know what's causing the problem ... pretty
straight forward stuff that I recall accomplishing in other designs.
Can anyone see what I'm not seeing?
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Stuart Foulstone
Sent: Monday, May 14, 2007 5:35 PM
To: wsg@webstandardsgroup.org
Cc: wsg@webstandardsgroup.org
Subject: RE: [WSG] Disappearing element in IE
Importance: High
Hi,
Given that you are using absolute positioning for #bottom_nav, I don't
quite get why your using display:inline in the CSS after it. What happens
if you remove it from #bottom_nav? As in,
#bottom_nav {
text-align: right;
position: absolute;
right: 9px;
bottom: 0px;
/* display: inline; */
height: 196px;
width: 535px;
*width: 550px;
background: url(/resources/5661/assets/images_community/footer.jpg)
no-repeat 0 0;
}
On Mon, May 14, 2007 12:12 am, Cole Kuryakin wrote:
> Hello Kepler -
>
> Thanks for your tip; unfortunately since this is a hard-wired blogging
> system, the HTML cannot be changed so I cannot implement an HTML-based
> fix.
> Just to see if you were right (about display:inline; pushing the content
> to
> the right of the wrapper) I did re-set my screen resolution to 1600 and I
> didn't see it either.
>
> If I float the UL, the footer graphic and links do appear in both IE and
> FF
> so I know it has something to do with the absolute positioning of this
> element -- but I just don't know how to fix it for IE.
>
> I'm starting to get the "shakes" that this one issue is going to hose the
> entire design.
>
> Anyone else have any ideas to fix this via the CSS? Please???
>
> Thanks in advance as always!
>
> Cole
>
> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
> Behalf Of Kepler Gelotte
> Sent: Monday, May 14, 2007 1:06 AM
> To: wsg@webstandardsgroup.org
> Subject: RE: [WSG] Disappearing element in IE
>
>> If anyone would like to see it live, go here:
>> http://teratest.terapad.com.
>>
>> Make sure to look in FF first to observe the required specification;
>> then
> in
>> IE 6 or 7.
>>
>> Thanks to all in advance for their help!
>
> Hi Cole,
>
> Your CSS looks Ok. What I believe is happening is that since the
> #bottom_nav
> container overlaps the #content_wrapper above it and the fact that you
> specified #bottom_nav as display:inline, IE puts the content to the right
> of
> #content_wrapper. By adding a break to your HTML will tell IE to place the
> next element below instead of next to. Here is the section of HTML with
> the
> break added:
>
>
>
>
>
> I only tested in IE7, don't know if it will behave in IE6.
>
> Regards,
> Kepler Gelotte
> http://www.neighborwebmaster.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]
> ***
>
>
--
Stuart Foulstone.
http://www.bigeasyweb.co.uk
BigEasy Web Design
69 Flockton Court
Rockingham Street
Sheffield
S1 4EB
Tel. 07751 413451
***
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] Disappearing element in IE
Hello Kepler - Thanks for your tip; unfortunately since this is a hard-wired blogging system, the HTML cannot be changed so I cannot implement an HTML-based fix. Just to see if you were right (about display:inline; pushing the content to the right of the wrapper) I did re-set my screen resolution to 1600 and I didn't see it either. If I float the UL, the footer graphic and links do appear in both IE and FF so I know it has something to do with the absolute positioning of this element -- but I just don't know how to fix it for IE. I'm starting to get the "shakes" that this one issue is going to hose the entire design. Anyone else have any ideas to fix this via the CSS? Please??? Thanks in advance as always! Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Kepler Gelotte Sent: Monday, May 14, 2007 1:06 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Disappearing element in IE > If anyone would like to see it live, go here: http://teratest.terapad.com. > > Make sure to look in FF first to observe the required specification; then in > IE 6 or 7. > > Thanks to all in advance for their help! Hi Cole, Your CSS looks Ok. What I believe is happening is that since the #bottom_nav container overlaps the #content_wrapper above it and the fact that you specified #bottom_nav as display:inline, IE puts the content to the right of #content_wrapper. By adding a break to your HTML will tell IE to place the next element below instead of next to. Here is the section of HTML with the break added: I only tested in IE7, don't know if it will behave in IE6. Regards, Kepler Gelotte http://www.neighborwebmaster.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] ***
[WSG] Disappearing element in IE
Hello All -
I've got an absolutely positioned UL in a design that I'm using as a footer
background.
In FF it's perfect (stuck to the bottom of the wrapper div as required). In
IE (6 and 7) it's gone - no where to be found.
Specification of this design is to keep it "stuck" to the bottom of the main
wrapper no matter how much or little content there is... but I just can't
figure this one out.
The rule in question - as well as it's interior LI rule - is shown below.
#bottom_nav {
text-align: right;
position: absolute;
right: 9px;
bottom: 0px;
display: inline;
height: 196px;
width: 535px;
*width: 550px;
background: url(/resources/5661/assets/images_community/footer.jpg)
no-repeat 0 0;
}
#bottom_nav li {
position: relative;
top: 153px;
right: 15px;
padding: 0 0 0 5px;
font-size: 11px;
display: inline;
line-height: 15px;
color: #FFF;
}
If anyone would like to see it live, go here: http://teratest.terapad.com.
Make sure to look in FF first to observe the required specification; then in
IE 6 or 7.
Thanks to all in advance for their help!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Disappearing positioned footer in IE7 - works in IE6
Hello All -
I was having an absolutely-positioned footer problem in IE6 which was fixed
with the following:
#bottom_nav {/*Compliant Browsers*/
position: absolute;
bottom: -75px;
right: 25px;
text-align: right;
width: 100%;
height: 50px;
}
*html #bottom_nav { /*Enables the footer to be positoned below the
wrapper in IE6*/
position: relative;
bottom: -75px;
right: 25px;
text-align: right;
width: 100%;
height: 50px;
}
Yes, well, now that IE 7 has come out the footer ***Poof!*** vanishes - like
it did under IE6 previous to the implementation of he above *html
declaration.
Could someone give me a lead on what to do about this issue in IE 7?
Unfortunatly, I am not allowed to use conditional comments to issue version
specific declarations - which makes problems like these very difficult to
deal with.
If you'd like to see the problem live, please go to
http://terashock.terapad.com/ in FF or IE6 and scroll to the bottom of the
page to view how the footer is suppose to look; then view the same page in
IE7.
Any and all assistance greatly appreciated!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Minimum Height Issue SOLVED
Ca Phun, Thierry, and Lari - Great thanks to you all with your solutions. I have chosen Lari's solution as I don't then need to deal with any min-height issues - To be honest I feel silly not realizing this solution myself. At any rate THANKS to the three of you and to this entire group in general! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Minimum Height Problem - Link
Sorry, I hit the send button before I included the link. Here it is: http://terashock.terapad.com/index.cfm?fa=contentJobs.positionList So, in FF, the content div opens up fine. In IE using Stu's hack, the "dots" graphic is there but the content is nailed at 500px. Thanks again to all. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Minimum Height Delimma in IE
Hello All -
Yes the age-old minimum height delimma has come to haunt me.
I usually stay away from anything that cannot be done in IE 6 without a
hack, but I've got a client who "loves" a design I did before I realized
that the main container would need to be "held open" vertically under
certain circumstances.
So, now I'm kinda stuck - can anyone help?
#content {
width: 510px;
min-height:500px;
height:auto;
margin: 0 0 0 30px;
color: #000;
padding-bottom: 30px;
position: relative;
z-index: 1;
}
I'm trying out Stu Nicholls solution for ie:
/*\*/
* html #content {
height: 500px;
}
/**/
But, it appears to be LIMITING the height of #content to 500px rather than
letting it expand if there's more than 500px of content.
BTW - the reason I'm using position and a z-index on this element is because
there's a element I that that needs to show behind it. I don't know if that
has any effect on this issue or now.
Any help GREATLY appreciated and I PROMISE not to design anything else that
may cause these IE problems. God, what a headache!
If anyone would like to see the problem live, go here: in FF and then IE 6.
Thanks to all in advance,
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] Teaching CSS - THANK YOU!
Just a short note of thanks to all for weighing in on my question about teaching CSS. I've taken all suggestions and book recommendations on board which I'm sure will assist the needs of this challenge! Best regards to all! Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Teaching CSS
Hello All - My background for the past 27 years has been in design. 6 years ago I realized the (financial) necessity to begin learning web design. 3 years after that came the next leap into HTML/PHP/CSS. So far, so good - well, most of the time anyway. I've always been a one-man-band, but now I'm finding myself much busier than I can handle by myself so I've had to take on another designer who, while quite good at his art, has never really been fully and satisfactorily exposed to the fundamentals of CSS. So, I've got to teach him. And that's the problem. While my knowledge of CSS has gotten me through each project, and each sheet validates, I still consider myself a "learner" as I've never had much time to really, really, really "understand" the box model and other fundamentals that, lord knows, I SHOULD understand completely by now. I've learned what I know just via various internet sites and through the help and guidance of wonderful groups like the WSG. So, I'm at a crossroads. how can I teach something that I don't feel 100% competent in? But the clock is ticking; clients are waiting, and my freelance artist is calling asking "humm, this is breaking. how should I fix it?" To which I respond . "Ah, humm. let me get back to you on that" - and a new email flies out to the good folks in this great group for help. With that lengthy pre-amble, I've got to ask - is there a GREAT book out there that steps through the learning process of CSS right from the bare bones that both I and my new artist can use? Not theoretical stuff, but hand-on, simply-put, illustrative? There are a lot of books out there I know, but I need a great one, that's very specific about explaining all the fundamentals of the box model all the way up. I want to complexly stay away from books that promote or talk about css hacks however (I've been using conditional comments and IE specific sheets to deal with these problems with 100% success). A number of SitePoint books on CSS seem pretty good - based upon their sample-chapters download - but before I spend US$40 on one, has anyone here used them? Besides a book, are there any on-line, step-by-step "foundation to penthouse" curriculum course that anyone knows about and TRUSTS by experience? Thanks to all for weighing through this windy post; and advance appreciation to all who care to comment. Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Global and page-specific style sheets
Thank you all for your posts/replies to my question... Looks like separate style sheets are the way to go (atleast for me). I like the example Paul is pointing to below; I'm gonna try that first to see if it fits my needs (I didn't know that you could import a style sheet INTO another stylesheet!) That's great. Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: Wednesday, March 14, 2007 7:07 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Global and page-specific style sheets One of the best things we did was to follow Doug Bowmans (webstock '06) suggestion to break up stylesheets into logical components and include them in one main file. Our 'styles.css' file now looks like this: - @import url(styles-contentTables.css); @import url(styles-forms.css); @import url(styles-mainnav.css); @import url(styles-popups.css); @import url(styles-secondarynav.css); @import url(styles-textformatting.css); /* generic rules go here */ --- It may take a while, but I promise you you'll thank yourself later on :) It was great advice and we've never regretted it. Paul *** 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] ***
[WSG] Global and page-specific style sheets
Hello All - I've got a site that has a fairly MASSIVE style sheet. It's quite long as the design spec dictates a number of different pages be layed-out differently. Accordingly, its becoming quite tedious to find certain style blocks that need to be altered/tweaked as development continues. So, I'm beginning to think that the better way to accomplish this is to attach a "global" sheet in the head that would take care of all "generic" issues and page requirements. Then, in those pages that need "special handling" I would attached separate sheets that would address page-specific requirements. BTW: This site is a dynamic one (php) so these special-case pages are "included" depending on query-string variables/conditions. What do the good folks say here about this particular topic? Is this a normal (and preferred) workflow when one has to deal with long and unwieldy style sheets? Are there any "best practice" guidelines for such an issue? Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Table Properties Cross-Browser compatible???
Hello All - The thread Doing Things Right caught my eye as I frequently use between empty TDs. So, when Hassan gave the link to the tables spec I gave it a look and was interested to see so many different table properties listed. Question is, however, are all -- or just a few -- of these properties currently supported by standards-compliant browsers ... as well as ie6? If only a few are supported by all browser types, can someone provide a link which tells me which ones are currently supported by all? Cole *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] Proper way to give height a horzontal UL Nav Bar
Georg -
Have implemented an .htc hover file. All looks (and responds!) as per spec.
Thanks again so much for your guidance, as well as for the explanation below
of the li+li.
Cole
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Gunlaug Sørtun
Sent: Sunday, March 11, 2007 10:30 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Proper way to give height a horzontal UL Nav Bar
Cole Kuryakin wrote:
> Georg -
>
> Wow, that's great! There's a number of things I'm going to have to study
on
> this (particularly the "li+li" - I've never seen that before).
I used that '+' selector to add a top border to a li only when the li is
preceded by a li. Prevents adding border to the first li.
IE6 doesn't understand the '+' selector, so I suggest you style borders
on all li's for IE6 - using the '* html' hack, and then either add a
class to the first li - styling it to 'border none'.
You may also simply lift all li's with a 'margin-top: -1px' and hide the
part of the first li that ends up above the ul.
* html ul#navTop ul {overflow: hidden;} should do.
The reason for doing it this way is that it'll work just fine in all the
latest browsers, and workarounds for IE6 can be kept completely
separated from the regular "good browser" styling - making it easy to
read and maintain.
> What you've done is a lot cleaner; appreciate your assistance!
You're welcome :-)
> FOLLOW ON:
>
> Of course, the drop-downs DON'T work in IE 6 - maybe because the active
area
> in IE only spans the link word rather than the entire LI ... and maybe
other
> reasons as well.
IE6 doesn't support :hover on anything but links.
> Any suggestions on how to show the drop-downs in IE? Javascript?
Behaviors?
Maybe this...
<http://annevankesteren.nl/test/examples/css/htc/hover.htm>
...or maybe IE expressions will do...
<http://lawrence.ecorp.net/inet/samples/css-ie-hover.shtml>
regards
Georg
--
http://www.gunlaug.no
***
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] Proper way to give height a horzontal UL Nav Bar
Georg - Wow, that's great! There's a number of things I'm going to have to study on this (particularly the "li+li" - I've never seen that before). What you've done is a lot cleaner; appreciate your assistance! FOLLOW ON: Of course, the drop-downs DON'T work in IE 6 - maybe because the active area in IE only spans the link word rather than the entire LI ... and maybe other reasons as well. Any suggestions on how to show the drop-downs in IE? Javascript? Behaviors? Additional follow-up appreciated if possible. Best regards, Cole -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Gunlaug Sørtun Sent: Saturday, March 10, 2007 11:48 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Proper way to give height a horzontal UL Nav Bar Cole Kuryakin wrote: > I'm just not comfortable with the way I've achieved this (same > padding on both ULs and LI's) I can't imagine this is the > ***correct*** way to accomplish this and would really appreciate > anyone's guidance. > http://www.x7m.us/_problems/test.htm I don't know much about "correct", so I would probably go for a simpler solution, like the following variant... <http://www.gunlaug.no/tos/alien/test_07_3540.html> <http://www.gunlaug.no/tos/alien/test0001.css> ...and then add whatever IE6 needs. regards Georg -- http://www.gunlaug.no *** 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] ***
[WSG] Proper way to give height a horzontal UL Nav Bar
Hello all -
I've created a pretty basic horizontal nav bar using a UL and in-line LI's.
The only twist to this is that this design calls for a rather tall nav bar
with right-borders (on the LIs) which span the height of the UL.
To accomplish this, I've had to put the same amount of top and bottom
padding on BOTH the UL and the LI's - the same amount of padding on the LI's
so that the right borders would span the height of the UL. Looks to spec in
FF, NN, Opera and IE6.
So, what's the problem?
I'm just not comfortable with the way I've achieved this (same padding on
both ULs and LI's) I can't imagine this is the ***correct*** way to
accomplish this and would really appreciate anyone's guidance.
The basic CSS for this is shown below:
#navTop {
padding-left: 5px;
padding-top: 5px;
padding-bottom: 21px;
background-color: #00CC00;
font-weight: bold;
font-size: 0.70em;
}
#navTop li {
display: inline;
border-right: 1px solid white;
padding-top: 5px;
padding-bottom: 21px;
padding-right: 26px;
padding-left: 10px;
}
#navTop li.noPad {
padding-left: 0;
}
To see it "live" go here: http://www.x7m.us/_problems/test.htm
Thanks to all in advance!
Cole
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
RE: [WSG] The problem with nesting ULs for a drop down
Scott and Rolf - Thanks for pointing me in the right direction; you're both right, nesting the "drop-down" ul's within the "trigger" ul list does work, but due to design constraints, this raises another problem: my drop-down menus contains some items that are quite long. Since the drop down UL's appear to take their width from the parent UL, I've got t0 add so much horizontal space between my top-level menu items that it breaks the design. --- That's odd too, as I though that using position:absolute would take the element out of the flow anyway. Oh well. --- So, I'm still stuck... there any other css-based way to trigger the visibility of a "display:none" ul? Cole -Original Message- From: listdad@webstandardsgroup.org [mailto:[EMAIL PROTECTED] On Behalf Of 'Scott Swabey' Sent: Saturday, February 24, 2007 9:43 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Please Help! Hover not working to trigger display:block in FF Cole Kuryakin wrote: > Hello All - > Hi Cole > I've set one of the li's as css trigger (via a class name) in order to > show a drop-down menu (a UL) that has a default value of display:none. > > Unfortunately, nothing I try will initiate the declaration containing > the display:block. You will need to nest the #industry ul within the li you wish it to display under to target it with the css: Industry Immigration Information POEA Regulations Disciplinary Guidelines POEA Sample Contract Questions and Answers Regards -- Scott Swabey Design & Development Director - Lafinboy Productions www.lafinboy.com | www.thought-after.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] ***
Re: [WSG] Image Thumnail Advice
A big thanks to all regarding all of the advice given on my image-reduction issue. I have tried a number of the suggestions and - depending on the color depth of the different sites I'm trying to reduce - the results are much more favorable than previous to my post. I know that one of the WSG admins would like to close this topic - because it is off topic, so I just wanted to say thanks for everyone who did weigh in on this issue for me. Cole - Original Message - From: Drake, Ted C. To: 'wsg@webstandardsgroup.org' Sent: Tuesday, July 05, 2005 10:57 PM Subject: RE: [WSG] Image Thumnail Advice A thumbnail of a web site page would probably look sharper as a gif instead of a jpeg. You mentioned lossy compression. That is what made me assume you are saving them as jpeg. Try gif or png instead. Otherwise the previous advice sounds great. Ted From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of WebmasterSent: Sunday, July 03, 2005 8:05 PMTo: wsg@webstandardsgroup.orgSubject: RE: [WSG] Image Thumnail Advice Hi Cole, Your mistake can also be step 3. If you're on a Windows box then you're quite possibly dealing with conflicting image resolutions. If you create a new image in Photoshop you'll notice that it's most likely set to 72dpi. I believe Windwos default is 80(?). I then recommend using the Image->Image Size... menu item to resize images, not Transform->Scale. If you're going to use a sharpen filter then go with Unsharp Mask ona settingn of about 150%, 1.2px, 7 threshold. You can then simply Ctrl-F to apply Last Filter in order to increase the effect if you want more. Paul From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Chris DawesSent: Sunday, 3 July 2005 1:57 PMTo: wsg@webstandardsgroup.orgSubject: RE: [WSG] Image Thumnail Advice Use save for web then use the resize tab below the output options. Chose jpeg medium from the top. Should be good quality output. Chris Dawes From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Cole Kuryakin - x7mSent: Sunday, 3 July 2005 12:28 PMTo: wsg@webstandardsgroup.orgSubject: [WSG] Image Thumnail Advice Hello All - I'm having a mess of a time getting sharp thumbnails of the site's I've built into a thumbnail format. Here's what I do: 1. Load the home page of a site into a browser 2. Use a screen capture utility to snap an image of the home page 3. paste the capture into PhotoShop 4. Transform/Scale the image from it's captured size (760 pixels x 550 pixels) down to a 165 x 115 pixel thumbnail And...everything turns to mud - or pretty close to it. If I sharpen the thumb, it's slightly better, but sharpen too much and it's "halo" city. Yuck. I know it's an issue of pixel loss during the reduction, but what to do? Surely there must be a better way as I've seen some sites with small thumbs of large images that are excellent looking. What are they doing (or what are YOU doing) that I'm not? Thanks to al in advance, Cole
[WSG] Image Thumnail Advice
Hello All - I'm having a mess of a time getting sharp thumbnails of the site's I've built into a thumbnail format. Here's what I do: 1. Load the home page of a site into a browser 2. Use a screen capture utility to snap an image of the home page 3. paste the capture into PhotoShop 4. Transform/Scale the image from it's captured size (760 pixels x 550 pixels) down to a 165 x 115 pixel thumbnail And...everything turns to mud - or pretty close to it. If I sharpen the thumb, it's slightly better, but sharpen too much and it's "halo" city. Yuck. I know it's an issue of pixel loss during the reduction, but what to do? Surely there must be a better way as I've seen some sites with small thumbs of large images that are excellent looking. What are they doing (or what are YOU doing) that I'm not? Thanks to al in advance, Cole
Re: [WSG] Picky, picky, picky
> Add this:
>
> div { border: 1px solid #f00 }
>
> to your css and look at the page in IE6, compared to FF. You'll see
> that the extra space is actually being generated by your div
> id="topEdgeH".
Added the border to the divs and you're right. it is the topEdgeH that's
causing the problem.
> Fix? You could play with the div id="topEdgeH" to try and stop the
> extra space (height? line-height?)
The height of the div was already declared (although 10px instead of 9px
like it should be - fixed that). Line-height, zero padding hasn't solved the
problem.
>...or simply add
> _margin-bottom: 290px;
>
> to it for IE6 - adjust to taste.
Yep, that works, but now the CSS won't validate due to the "_". Complete
validation - previous to deployment - is a must.
I did validate the style sheet per your recommondation and it had one error
(didn't include "px" on one declaration) which is now fixed, but that
correction did not fix the issue of the bloated div.
Interestingly, as a test, I put the image directly into the html (within the
topEdgeH div) and the problem went away - no more bottom padding or what
appears to be bottom padding.
Your other general comments are well taken. I'm just building the structure
of this site just to get the design aspect solid - Accessibility, standards
and better semantic issues will follow.
Good point on the hover effect and the red border on the image headline
being potentially confusing.
Anyway, I'm still stuck with this bloated div in IE - this is the first time
I've encountered a problem like this.
Anyone else have any suggestions on how to fix it? I'd really rather not put
the image within the HTML.
Cole
**
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] Picky, picky, picky
I'm almost embarrased to ask this because it's such a minor detail, but it's driving me crazy. First, the link: http://www.x7m.us/_testing/index2.htm This is a new design I'm just starting to build. If you look at it in FF/Netscape/Opera it's perfect (the latest versions of those browsers, anyway). If you look at it in IE6 the headline image (Quality. Reliability. Reputation.) within the h1 sits about 6 pixels lower than it should, which of course pushes everything else down as well. This head is suppose to align with the nav bar you see on the left. In FF, Netscape, and Opera it does. Perfect. IE, of course, well... I've tried everything I can think of to correct this, and I've come to the conclusion that it's something going on with the h1. But I've tried everything there too, including zeroing the top margin and top padding on the h1 without result. Besides, all of these things are already zeroed at the top of the style sheet. Can someone spot the error of my ways when it comes to the IE rendering? Cole
[WSG] Picky, picky, picky
I'm almost embarrased to ask this because it's such a minor detail, but it's driving me crazy. First, the link: http://www.x7m.us/_testing/index2.htm This is a new design I'm just starting to build. If you look at it in FF/Netscape/Opera it's perfect (the latest versions of those browsers, anyway). If you look at it in IE6 the headline image (Quality. Reliability. Reputation.) within the h1 sits about 6 pixels lower than it should, which of course pushes everything else down as well. This head is suppose to align with the nav bar you see on the left. In FF, Netscape, and Opera it does. Perfect. IE, of course, well... I've tried everything I can think of to correct this, and I've come to the conclusion that it's something going on with the h1. But I've tried everything there too, including zeroing the top margin and top padding on the h1 without result. Besides, all of these things are already zeroed at the top of the style sheet. Can someone spot the error of my ways when it comes to the IE rendering? Cole
[WSG] font-size =1em (in the body) vs. font-size = 101%
I've just gotten comfortable using ems for font sizing in my projects by starting out with font-size=1em within the body tag. Now I'm seeing that some people are using font-size = 101% in the body tag. I seem to remember someone saying that using "1em" in the body tag makes some versions of IE flinch - which of course I'd rather avoid. So, what's the deal? is it better/safer to user 101% vs 1em to set the initial font sizing for maximum cross browser compatiblility, or is this just a matter of style and preference? Cole
[WSG] Proper use of
I tend to use alot when it comes to seperating horizontal menu items with a pike "|". while this gives me what I want visually, I've always been sort of intuitively uncomfortable with this technique for some reason. Here's what I tend to do: Latest Works |Read A Chapter |Buy The Book Is there a better (best practices) way to do this? The only way I can think of accomplishing the same effect is by surrounding the "|" with a span class which would pad-out the left and right sides of the pike, like this: |. But if I take that approach, that would be alot of spans within my nav items. Interested in anyone weighing in on this topic. Cole
Re: [WSG] Background image in not showing in IE
Thanks for all the suggestions Peter. I hadn't gotten it fixed
until I set the width of the li as per your suggestion.
Now the bullets show up in IE as desired.
Cole
- Original Message -
From:
Peter
Ottery
To: wsg@webstandardsgroup.org
Sent: Monday, June 20, 2005 7:54 AM
Subject: Re: [WSG] Background image in
not showing in IE
Cole
wrote:>> I've got a small background icon that I've hooked
to a few 's. Displays as planned in FF, but doesn't display at all
in IE6. Any ideas how I can fix this in IE?not sure if
youve solved this by now but often i find if you specify a background colour
(instead of transparent), IE will play along nicely.
so instead of :li.signInOptions {background:
transparent url(../../admin/i/info.jpg) 0 5px
no-repeat}tryli.signInOptions {background: #fff
url(../../admin/i/info.jpg) 0 5px no-repeat}
of course, then thats a pain if you
have a background image that needs to sit on varying background colours. you
may end up needing to feed specific colours to certain uses, eg... #nav li.signInOptions {background-color:#ccc}
...if the li's needed to sit within a
navigation area that has a background of #ccc
the other thing to try when IE isnt
displaying a background image is to specify a width on the li.
hth,
pete
ottery
[WSG] Background image in not showing in IE
I've got a small background icon that I've hooked to a few
's. Displays as planned in FF, but doesn't display at all in
IE6.
Here's the HTML snippet:
Admin Area data includes Guestbook Entries, Read A
Chapter contacts, and Email
contacts.
Here's the CSS:
li.signInOptions { margin-left:
10px; padding: 5px 0 5px 20px; display: block;
font-size: 0.75em;
background: transparent url(../../admin/i/info.jpg) 0
5px no-repeat;}
If I remove display:block, the icons do show up in IE, but the
text in a few of these 's wrap to a second line and I want to preserve
left indent on both lines. Not only that, but even though they do show up in IE,
the padding isn't retained and two of the three bullets are cut in half. Only in
IE (of course).
Any ideas how I can fix this in IE?
Cole
Re: [WSG] Class Discusion: IE resizing bug
What IE versions does this bug apply to? I use font-size: 1em on the body, but don't see anything wierd in IE 6. Is the resizing bug in IE 5.x+ (which I don't have on my machine). Cole - Original Message - From: "Mordechai Peller" <[EMAIL PROTECTED]> To: Sent: Friday, June 17, 2005 11:37 AM Subject: Re: [WSG] Class Discusion: Centering a Fixed Width Layout > David Laakso wrote: > > > I would *not* recommend using em for font size on the body, as it > > triggers a re-sizing bug in IE. > > Don't declare any font-size on the body. And use percent or em > > thereafter(if even necessary). > > Or, declare 100.01% percent on the body. And use percent or em > > thereafter(if even necessary). > > Good point; it was a slight oversight on my part. > > One point I'd like to add though, is that there are good reason for > using a value other than 100% besides the bug. Since some feel that the > default size is too large, so they set it to a lower value. Personally > though, I happen to prefer slightly larger text. > ** > 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] Class Discusion: *{margin: 0; padding: 0} ???
Zeroing all default margins and padding throught a document is something I'm
always sweated over as I like to zero all of these properties right from the
top.
For the past 6 months or so I set the margin and padding to '0' in all
elements at the top of my style sheet: body - margin 0, padding 0; ul -
margin 0, padding 0, and on and on. time consuming, ugly, and inefficient to
my way of thinking. But it works.
So...will *{margin: 0 padding:0} in the HTML or Body declaration block zero
the margin and padding properties for all child elements in one go? I've
never seen the "*" used before.
And if this will work, will it work with older browsers?
Cole
- Original Message -
From: "Mordechai Peller" <[EMAIL PROTECTED]>
To:
Sent: Friday, June 17, 2005 7:56 AM
Subject: Re: [WSG] Class Discusion: Centering a Fixed Width Layout
> [EMAIL PROTECTED] wrote:
>
> >The basic CSS syntax is as follows:
> >html
> >{height: 100%;
> > margin-bottom: 1px;}
> >
> >body
> >{margin: 0;
> > padding: 0;
> > text-align: center;
> > font: normal 12px verdana, arial, sans-serif;
> > background: #fff;}
> >
> >#container
> >{margin: 0 auto;
> > width: 760px;}
> >
> >
> Regarding margins and padding, simpler is
> * {margin : 0; padding : 0;}
> Zeroing all default margins and paddings helps achieve better cross
> browser rendering, as well as lists which are semantically, but not
> presentationally, a list (i.e., navigation lists).
>
> For the font size, under normal circumstances, use only percent or ems.
> (Were it properly supported, you could also use exs, but afaik, all
> browsers just use 2ex=1em.) When pixels are use, IE users cant change
> the font size to allow for easier reading. You may also want to increase
> the line-height as it too, makes reading easier.
>
> >3. Text-align: center set to center the page in Internet Explorer 5.0 &
> >5.5
> >
> >
> If you have an extra style sheet for IE (hidden using conditional
> comments), you might want to put this hack there. Also, don't forget to
> reset the alignment.
>
> >4. Margins must be set to "0" & "auto" in order to center-align a
> >fixed-width layout in IE6, Firefox, Mozilla, Netscape and Opera.
> >
> >
> You're right about setting left and right to "auto", but there's no need
> to set top and bottom to 0 (unless you want to).
>
> >5. Placing "margin: 0 auto" in the declaration block for the body rule
> >doesn't center-align the layout therefore this particluar declaration
> >must be placed inside an "ID" and applied to a wrapper or container div.
> >
> >
> Wrong; the setting goes in the body in order to center the container in
> IE<6.
>
> HTH
> **
> 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] Element Properties Cheat Sheet
Thanks for the explanation Roberto, as well as the link. Cole - Original Message - From: "Roberto Gorjão" <[EMAIL PROTECTED]> To: Sent: Monday, June 13, 2005 4:38 PM Subject: Re: [WSG] Element Properties Cheat Sheet > Hi Cole, > > As far as I know there is not, probably because browsers have different > implementations of CSS properties. I think that best way to do it is to > know the CSS properties and which elements they theoretically apply to… > and then experiment. > > Take your example - padding: 0; - for instance… Bottom line you should > not have to set this kind of rule because the default for any element is > no padding. > > W3C specifications say that “Tables have content, padding, borders, and > margins.” And “Internal table elements generate rectangular boxes with > content and borders. Cells have padding as well. Internal table elements > do not have margins.” (http://www.w3.org/TR/CSS21/tables.html#q2) > So, tables and cells should have padding, and they do, but IE normally > does not respect rules that cumulate table and cell padding definitions, > as happens in the following example: > > > > a > b > > > c > d > > > > Anyway, the W3Schools CSS2 Reference alerted to this fact, so theirs is > a good page to confirm eventual doubts: > http://www.w3schools.com/css/pr_padding.asp > > I also think that this book is very useful: “Cascading Style Sheets 2.0, > Programmer’s Reference” by Eric Meyer. > > Roberto > > > > Cole Kuryakin - x7m wrote: > > > Is there any guide or cheat sheet out there somewhere which gives the > > exact properties of each html element which CAN be > > altered/positioned/styled via CSS? > > Like I've been putting: > > margin: 0; > > padding: 0; > > on a default table rule set, but something I've just read "indicates" > > that tables don't have padding - so the padding rule for tables is > > useless. I've been doing the same for s, but something else I came > > across said that tr's don't have margin or padding properties. > > I'm trying to streamline my stylesheets and would like to get rid of > > any superflous rules that don't apply - or have no effect on - > > specific elements. > > The easiest way I can think of to do this would be to reference some > > kind of (easy to understand) document that says - or shows - that you > > can set the margin of a table, but not the padding, etc. > > Cole > > ** > 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 **
[WSG] Element Properties Cheat Sheet
Is there any guide or cheat sheet out there somewhere which gives the exact properties of each html element which CAN be altered/positioned/styled via CSS? Like I've been putting: margin: 0; padding: 0; on a default table rule set, but something I've just read "indicates" that tables don't have padding - so the padding rule for tables is useless. I've been doing the same for s, but something else I came across said that tr's don't have margin or padding properties. I'm trying to streamline my stylesheets and would like to get rid of any superflous rules that don't apply - or have no effect on - specific elements. The easiest way I can think of to do this would be to reference some kind of (easy to understand) document that says - or shows - that you can set the margin of a table, but not the padding, etc. Cole
[WSG] Element Properties Cheat Sheet
Is there any guide or cheat sheet out there somewhere which gives the exact properties of each html element which CAN be altered/positioned/styled via CSS? Like I've been putting: margin: 0; padding: 0; on a default table rule set, but something I've just read "indicates" that tables don't have padding - so the padding rule for tables is useless. I've been doing the same for s, but something else I came across said that tr's don't have margin or padding properties. I'm trying to streamline my stylesheets and would like to get rid of any superflous rules that don't apply - or have no effect on - specific elements. The easiest way I can think of to do this would be to reference some kind of (easy to understand) document that says - or shows - that you can set the margin of a table, but not the padding, etc. Cole
Re: [WSG] Crazy font sizing with 2 tables - follow on
Bert and Parker -
I think it must be an inheritance issue. that's the only thing
I can figure out as well. The two tables are NOT nested, but do follow each
other in flow (one after the other).
I'm going to chip away at this some more tomorrow morning and
see if I can get it working correctly.
If I still find that I'm only beating my head against the
wall, I will post the page with a link so you two - and anyone else - can take a
look.
-- ONE QUICK FOLLOW ON to see if I'm understanding the
concept here:
So, if you set a parent element (like my #content div) to
0.8em, and then nest another element (like another div or table) inside it AND
make a font declaration for the nested element to 0.7em, the nested element's
font size is actually REDUCED to 0.56em (0.8 * 0.7 =
0.56em)?
That does appear to be what's happening
If that's how inheritance works when it comes to nested
elements which are sized with ems, then I'm assuming that I would have to
set the nested child element to 0.88em (0.8 * 0.88 = 0.70).
Am I on the right track?
Math has never been my strong suit, but increasing a font size
in a nested element in order to reduce the visual representation
seems very strange to me indeed.
However, if that IS the way it works then, well, that's the
way it works. Please let me know if I'm understanding this.
Thanks to you both - and all in general - in
advance.
Cole
- Original Message -
From: "Parker Torrence" <[EMAIL PROTECTED]>
To: <wsg@webstandardsgroup.org>
Sent: Friday, June 10, 2005 9:10 PM
Subject: Re: [WSG] Crazy font sizing with 2 tables inside a
positioned div
> Without seeing the (x)html
it is hard to say, but here are a few possibilities> > #content
table.guestheader = font-size: 0.7em;> #content table.guestheader p =
font-size (80% of 0.7em)> > #content table.guestbook =
font-size: 0.7em;> #content table.guestbook p = font-size (80% of
0.7em)> > if guesbook is inside of guestheader you have>
#content table.guestheader table.guestbook = font-size (70% of
0.7em)> #content table.guestheader table.guestbook p = font-size
(80% of (70%> of 0.7em))> > > > On 6/10/05,
Cole Kuryakin - x7m <[EMAIL PROTECTED]> wrote:> >
> > I'm having this strange problem: > >
> > I've got a content div (#content) which has 2 tables in it
(.guestHeader and> > .guestComment - both classes). >
> > > The first table accepts my css font styling rules
just fine. The second> > table however, absolutely messes up the font
sizing and line height: The> > line height is way to big and the font
size is now way too small - but they> > both have the same font size
declaraton! > > > > My #content div shows the
correct font size I want: > > > > #content p
{> > margin-bottom: 1.7em;> > font-size:
0.8em;> > line-height: 1.5em;> > } >
> > > The first table (.guestHeader) shows what I want:
> > > > table.guestheader {> >
width: 450px;> > margin: 0;> > padding:
0;> > font-size: 0.7em;> > } > >
> > table.guestheader td {> > padding: 10px 0;>
> } > > > > table.guestheader
td.totalComments {> > width: 125px;> > color:
#AEC3AE;> > } > > > >
table.guestheader td.sign {> > width: 325px;> > }
> > > > table.guestheader td.sign img {>
> display: inline;> > } > > >
> But, the second table... sheesh! > > > >
table.guestbook {> > width: 450px;> > margin:
0;> > padding: 0;> > font-size: 0.7em;>
> } > > > > table.guestbook td {>
> vertical-align: top;> > }> > > >
table.guestbook td.guestInfo {> > width: 125px;> > }
> > > > table.guestbook td.guestInfo p {>
> color: #AEC3AE;> > } > > >
> table.guestbook td.guestComment {> > width: 325px;>
> } > > > > table.guestbook td.guestComment p
{> > padding: 10px 0 0 0;> > color:
White;> > } > > > > table.guestbook
td.guestComment p.date {> > padding: 0 0 10px 0;> > }
> > > > I've been beating my head over this for
hours as the stylesheet does> > validate...I just can't see what I'm
doing wrong. > > > > Does this ring a bell with
anyone? I haven't done much table styling, so I> > may not be doing
this correctly at all. > > > > If someone can
spot my error - or atleast lead me in the right direction -> > I'd be
very appreciative. > > > > Cole >
> > > > -- > Parker Torrence>
> Unfolded WebDesign> http://webdesign.parkertorrence.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> **>
>
[WSG] Crazy font sizing with 2 tables inside a positioned div
I'm having this strange problem:
I've got a content div (#content) which has 2 tables in it
(.guestHeader and .guestComment - both classes).
The first table accepts my css font styling rules just
fine. The second table however, absolutely messes up the font sizing and line
height: The line height is way to big and the font size is now way too small -
but they both have the same font size declaraton!
My #content div shows the correct font size I
want:
#content p { margin-bottom:
1.7em; font-size: 0.8em; line-height: 1.5em;}
The first table (.guestHeader) shows what I
want:
table.guestheader { width: 450px; margin:
0; padding: 0; font-size: 0.7em;}
table.guestheader td { padding: 10px
0;}
table.guestheader td.totalComments { width:
125px; color: #AEC3AE;}
table.guestheader td.sign { width:
325px;}
table.guestheader td.sign img { display:
inline;}
But, the second table... sheesh!
table.guestbook { width: 450px; margin:
0; padding: 0; font-size: 0.7em;}
table.guestbook td { vertical-align:
top;} table.guestbook td.guestInfo { width:
125px;}
table.guestbook td.guestInfo p { color:
#AEC3AE;}
table.guestbook td.guestComment { width:
325px;}
table.guestbook td.guestComment p { padding: 10px 0 0
0; color: White;}
table.guestbook td.guestComment p.date { padding: 0 0
10px 0;}
I've been beating my head over this for hours as
the stylesheet does validate...I just can't see what I'm doing
wrong.
Does this ring a bell with anyone? I haven't done much table
styling, so I may not be doing this correctly at all.
If someone can spot my error - or atleast lead me in the right
direction - I'd be very appreciative.
Cole
[WSG] WSG Meetings for "the rest of us"
Man, oh man, would I love to attend some (pretty much all) of the meetings, seminars and discussions being hosted/held by WSG - but they seem to all be in Sydney. I live in the backwaters of the Philippines and am too broke to travel to these meetings and I really feel like I'm missing out on a lot of good stuff - not to mention networking and getting to know other professionals in my field. Aside from the networking/getting to know issue, is there anyway that "the rest of us" can read abstracts or important details from these meetings - like maybe on the WSG site? Once again, if I had the cash and ability to travel, I'd be one of the first people in line to pay the price of admission. Since this isn't the case for me - and I'm sure many other WSG "members", is there any way or plan to share this wealth of information and expertise with the rest of us? Cole
[WSG] Best way to train someone in css and web standards
Hello All - I have the opportunity to hire two people in the next few weeks to help me with my one-man-band web development business. Problem is, these two know only the most basic aspects of HTML and don't know anything about CSS or web standards. Problem also is that I can't afford to hire anyone currently proficient at these two disciplines. Learning CSS was a painfully slow process for me (as I never had time to concentrate on it, or standards coding, because I was always doing everything else as well). To this day, I still wouldn't consider myself anywhere near expert level: The moans and groans and "geez, why did that happen" is pretty much behind me, but I'm no expert. Since I'll still be too busy to sit with them for hours at a time teaching them the little that I know, I'd like to have some opinions on the best way to bring two absolute newbies up to CSS/Web Standards proficiency without me having to be at their elbow every step along the way. By proficiency, I mean that I can give them a Photoshop design comp, and they will be able to create an XHTML code foundation as well as a CSS style and positioning spec without too much whining and head-scratching. My plan is to get them completely compeletely trained in these areas before letting them dive into any real project development. All comments welcome and greatly appreciated. Cole
[WSG] Can you style Alt text?
When you've got an href'd image that's farily large that's
being pulled down over a dialup line, you can see the alt text in the background
as the image loads.
Usually, this this text is a big, blue serif
style.
Sure, once the picture gets completely downloaded, it's
hidden, but during the download process - over dialup - yuck!
I've seen some sites that have alt text behind a href'd
picture, but the text is relatively small and styled.
Does anyone know how to do this?
Is it as simple as creating an alt {} rule with the desired
font, size and color?
[WSG] Setting a class for a Select Option list
I'm using a PHP script to set a class on a particular select
item if nothing has been selected from the list (form validation
routine).
It works fine in IE, but doesn't in Firefox and Netscape -
apparently something I'm doing wrong.
Maybe I'm putting the class in the wrong place? Maybe my
element hook (select option.error) is wrong?
I can't figure it out.
Here's a snippet of the source from the select list (Class
position shown in red):
Country:
class="error">Choose your
country:
Argentina
Australia
Austria
Bahamas
Belgium
Real easy - if someone doesn't choose a country from the list,
the validation routine sets the class of the default option (Choose
your country:) to class "error" which is suppose to turn the background of that
line light red.
Here's the rule:
input.error, select option.error, textarea.error
{ background-color: #FFD0DC;}
Like I said, it works perfect in IE, color doesn't change,
however, in FF or Netscape.
Can anyone see what I'm doing
wrong?
[WSG] The mother of all html references?
I've been using this online html reference (http://www.htmlreference.com/) for the past 6 months or so, and so far it's been fine. Can anyone recommend another on-line reference that they prefer so I can take a look? Cole
Re: [WSG] Jumping text in FF and Netscape
Bert - Specifying the height and width of the small images fixed the problem. Thanks! Yeah, I know the home page shot is HUGE - Client demanded it after much effort on my behalf to talk him out of it. Win some, you lose some. I know I shouldn't spec font sizes in px, but I'm confused about the whole "em" thing. I need to do some reading about that as I do want my sites as accessible as possible. Thanks for the fix on the jumping text. Cole - Original Message - From: "Bert Doorn" <[EMAIL PROTECTED]> To: Sent: Monday, May 02, 2005 1:28 PM Subject: Re: [WSG] Jumping text in FF and Netscape > G'day > > > I've got this not-so-critical but annoying problem with text below an > > image. When the page loads, there's too much space (between the bottom > > of the image and top of the text), but if you refresh the browser, the > > text snaps back to the correct position. > > This only happens in FF and Netscape - and only happens on the 2nd and > > 3rd images. > > Doesn't happen to me in Firefox (on Win2K). You might however > consider putting height and width attributes on your images, or > specify it in your CSS. It might help, since the browser will > then know how much space to reserve for the image. > > FWIW, spare a thought for people on dial-up with 800x600 display > (nothing to see unless they scroll down or wait a minute or more > for the huge image to load). Also consider people with MSIE who > can't read the text and can't enlarge it because you specify the > font size in px. > > 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 **
[WSG] Jumping text in FF and Netscape
Hello everyone -
I've got this not-so-critical but annoying problem with text
below an image. When the page loads, there's too much space (between the
bottom of the image and top of the text), but if you refresh the browser, the
text snaps back to the correct position.
This only happens in FF and Netscape - and only happens on the
2nd and 3rd images. It doesn't happen on the first image at all (strange?), nor
does It happen in IE - which leads me to believe that I've left something
out of the css.
Here's the page in question: www.sheavens.com
The first small image on the left, as well as it's caption
looks as it should.
On the second and third image, however, there's too much space
between the bottom of the image and the top of the image caption.
As stated before, if you hit refresh, the text snaps back to
the correct spacing.
Here's the rule I've got for the text beneath the
image:
#sideBarGallery p.caption { margin: 5px 0px 15px
0px; padding: 0; font: bold 8px Verdana,
sans-serif; color: #003399;}
The rule I have for all images is:
img { display: block; margin:
0; padding: 0; border: 0;}
Anyone know what I'm doing wrong here?
Cole
Re: [WSG] Semantic tag for copyright slug?
James - Thanks for the reply as well as the clarification about the Label tag. I'll continue using 's for copyright info. Cole - Original Message - From: "James Ellis" <[EMAIL PROTECTED]> To: Sent: Sunday, May 01, 2005 1:02 PM Subject: Re: [WSG] Semantic tag for copyright slug? > Hi Cole > > Label is a form field tag... it can't be used outside of a form. (well > it can but you'll have invalid html according to the w3c) > > http://htmlhelp.com/reference/html40/forms/label.html > > The issue here is how far you go with your semantics. Do we have a tag > for trademark, registered mark, service mark?. To all intents and > purposes it's a paragraph or phrase of text on the page. > > Cheers > James > > > On 4/30/05, Cole Kuryakin - x7m <[EMAIL PROTECTED]> wrote: > > > > This maybe taking the whole semantic thing too far, but is there a > > "copywright" tag (not the Meta Tag) that one should use for copyright > > information? > > > > I've searched the web, but can't find one defined other than the meta tag. > > > > The use for this would be - frequenlty for my projects - in the footer, > > where you say "Copyright 2005 - some company, inc. all rights reserved". > > > > That kind of thing. > > > > I've been enclosing this kind of information in tags for years, but > > am just wondering if there's a more semantically-appropriate tag to use - > > like " maybe? > > > > Cole > ** > 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 **
[WSG] Semantic tag for copyright slug?
This maybe taking the whole semantic thing too far, but is there a "copywright" tag (not the Meta Tag) that one should use for copyright information? I've searched the web, but can't find one defined other than the meta tag. The use for this would be - frequenlty for my projects - in the footer, where you say "Copyright 2005 - some company, inc. all rights reserved". That kind of thing. I've been enclosing this kind of information in tags for years, but am just wondering if there's a more semantically-appropriate tag to use - like " maybe? Cole
[WSG] To Table or Not To Table for Forms
I've been wondering the same thing as Tee - >> whether to use the table for form or not, still can't make up my mind. I've been using tables for my forms just because it's fast and easy to align stuff - like a horizontal double or triple-column input design or even putting a text label AFTER a check box or radio button - but I don't want to take "the fast way out" if using tables for my forms is not adhearing to the spirit of web standards or accessibility. I have read elsewhere that using tables for form elements is permissable as it's considered "tabular" data. I'm interested in the group's overall opinion on this subject. Cole
