[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] ***attachment: winmail.dat
[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] ***attachment: winmail.dat
Re: [WSG] Mystery Margin or Padding in FF and IE
In your CSS (
http://www.koisis.com/.framework/-public/assets/css/c.project_display.css)
you got this line:
*#contentMain h1
{
margin: 25px 0 10px 0;
}*
h1 margin (h1 is the first element in main area) is that mystery margin.
That's how CSS works. I guess somebody can find it in W3C site.
С уважением,
Юрий akella Артюх,
http://cssing.org.ua,
On Mon, Aug 25, 2008 at 12:34 PM, Cole Kuryakin [EMAIL PROTECTED] wrote:
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]
***
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
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]
***
Re: [WSG] Mystery Margin or Padding in FF and IE
Cole Kuryakin wrote:
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.
The top margin you've declared on h1...
#contentMain h1 {margin: 25px 0 10px 0;}
...is escaping #contentMain and ends up on top of it in compliant
browsers. That's correct behavior AFAICS...
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
IE6/7 OTOH are containing h1's margin because of the 'hasLayout'
triggering...
#contentMain {width: 550px;
...you've declared in there. That's not correct but not much you can do
about it.
One way to solve it is to have zero margin-top on that h1, and use on it
padding-top instead.
Another way is to contain the margin-top by declaring...
#contentMain {float: left; display: inline;}
...which all browsers will agree on, and thereafter adjust h1's
margin-top to taste.
regards
Georg
--
http://www.gunlaug.no
***
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 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] 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]
***attachment: winmail.dat
Re: [WSG] Pop UP menu positioning in a footer
Can you publish it first, please.
localhost is to accessible for us.
Thanks,
Bechara
www.iLearn.com.br
- Original Message -
From: Cole Kuryakin [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Monday, August 25, 2008 8:48 AM
Subject: [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]
***
__ Informação do NOD32 IMON 3384 (20080825) __
Esta mensagem foi verificada pelo NOD32 sistema antivírus
http://www.eset.com.br
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
[WSG] H1 and the img tag
Hi there everyone, I was wondering. There is a general practice to use text replacement when it comes to company logo's on websites. If one does not want to use this practice, would there be any objection to wrapping the company logo image with an H1 one tag? I am thinking of this more in terms of the front page, on inner pages I would think the main topic of the page is the one that should be marked up with H1. What is your thoughts and would you recommend image replacement instead? Kind Regards, Schalk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] Making TIF files accessible
Our customer has thousands of TIFF files that need to be converted into an accessible format. We tried an inexpensive shareware that does the TIFF to PDF conversion with OCR... but while the final output looks normal to the eye, readers and search filters see spaces and/or periods between each letter of every word... resulting in a long stream of generally incomprehensible gibberish. The customer is willing to loosen the purse strings for a real solution. Any suggestions based on experience or knowledge of the market for software that will spider a directory structure and convert (with OCR) the files? Thanks in advance! -- I made magic once. Now, the sofa is gone. http://blog.dwacon.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] H1 and the img tag
Hi Schalk, Glad you raised this. We built a new section of our site a while ago which required different treatment from our normal text h1's. I looked at the image replacement route and found the approaches kludgy and overwrought. I ended up doing exactly what you said: h1a img src= alt=Page Heading ../h1 Looks fine, and the pages revert back to the standard h1 text style when images are off. You can see the results here: http://tinyurl.com/5b3bwg The image inside the h1 is simple, accessible and effective. Go with your gut :) Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
You can just use text-indent to move the text off the screen and then put a background image into the H1 tag. -- Michael Turnwall for all your web code needs turnwall.net Schalk Neethling wrote: Hi there everyone, I was wondering. There is a general practice to use text replacement when it comes to company logo's on websites. If one does not want to use this practice, would there be any objection to wrapping the company logo image with an H1 one tag? I am thinking of this more in terms of the front page, on inner pages I would think the main topic of the page is the one that should be marked up with H1. What is your thoughts and would you recommend image replacement instead? Kind Regards, Schalk *** 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.cfmUnsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfmHelp: [EMAIL PROTECTED]***
RE: [WSG] H1 and the img tag
Schalk Neethling [EMAIL PROTECTED] ink wired: There is a general practice to use text replacement when it comes to company logo's on websites. Not sure if I follow. Are you saying to use Proctor and Gamble rather than the PG logo? I don't see why that would be necessary for any web site. One can make an image tag accessible with alt and other metadata within the tag. would there be any objection to wrapping the company logo image with an H1 one tag? Do you mean to put the image with a large text side-by-side? One can do that I would imagine, but no one will knock down your door with a warrant if you do any of the aforementioned. Or, have I missed the point entirely? -- I made magic once. Now, the sofa is gone. http://blog.dwacon.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
Thanks Paul, Makes sense to me as well. Regards, Schalk Paul Bennett wrote: Hi Schalk, Glad you raised this. We built a new section of our site a while ago which required different treatment from our normal text h1's. I looked at the image replacement route and found the approaches kludgy and overwrought. I ended up doing exactly what you said: h1a img src= alt=Page Heading ../h1 Looks fine, and the pages revert back to the standard h1 text style when images are off. You can see the results here: http://tinyurl.com/5b3bwg The image inside the h1 is simple, accessible and effective. Go with your gut :) Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** No virus found in this incoming message. Checked by AVG - http://www.avg.com Version: 8.0.138 / Virus Database: 270.6.6/1627 - Release Date: 2008/08/22 06:48 AM *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
Hi all, BTW, for those interested I am using the website at http://www.volume4.com/ as a case study in progressive enhancement and graceful degradation. Your feedback is much appreciated. Regards, Schalk Paul Bennett wrote: Hi Schalk, Glad you raised this. We built a new section of our site a while ago which required different treatment from our normal text h1's. I looked at the image replacement route and found the approaches kludgy and overwrought. I ended up doing exactly what you said: h1a img src= alt=Page Heading ../h1 Looks fine, and the pages revert back to the standard h1 text style when images are off. You can see the results here: http://tinyurl.com/5b3bwg The image inside the h1 is simple, accessible and effective. Go with your gut :) Paul *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** No virus found in this incoming message. Checked by AVG - http://www.avg.com Version: 8.0.138 / Virus Database: 270.6.6/1627 - Release Date: 2008/08/22 06:48 AM *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] H1 and the img tag
Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. Paul *** 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]
***attachment: winmail.dat
RE: [WSG] H1 and the img tag
I'm not understanding why you would use a logo/img as an h1 tag? Unless you wanted to use a nice anti-aliased font for the h1 text? If that's the case then I would just use sifr. SEO-wise you could only implement this on the homepage, otherwise you would have a duplicated h1 on all your web pages (providing the image had the same alt text). I wouldn't recommend using different alt text either when using the same image sitewide, as search engines may see that as keyword stuffing. I would keep them separate and have the alt text on the logo as your company name. Then have unique h1's as normal text on each page. I used to use a div with text in it for the logo, then css to add a background image and text indent to move the text off-screen. I changed back to an img tag as the alt text is more powerful for SEO purposes. Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: 25 August 2008 23:07 To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] H1 and the img tag Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. 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] ***
Re: [WSG] H1 and the img tag
Thanks everyone for your feedback, it definitely gives me something to think about. Regards, Schalk Darren Lovelock wrote: I'm not understanding why you would use a logo/img as an h1 tag? Unless you wanted to use a nice anti-aliased font for the h1 text? If that's the case then I would just use sifr. SEO-wise you could only implement this on the homepage, otherwise you would have a duplicated h1 on all your web pages (providing the image had the same alt text). I wouldn't recommend using different alt text either when using the same image sitewide, as search engines may see that as keyword stuffing. I would keep them separate and have the alt text on the logo as your company name. Then have unique h1's as normal text on each page. I used to use a div with text in it for the logo, then css to add a background image and text indent to move the text off-screen. I changed back to an img tag as the alt text is more powerful for SEO purposes. Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: 25 August 2008 23:07 To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] H1 and the img tag Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
I agree, beware SEO-wise. If anyone's interested in seeing what black-hat SEOs are actually doing in this respect, read this: http://www.igenerator.com.au/blog/2008/08/top-10-web-design-firms-use-black-hat-seo/ Henrik Madsen Generator +61 8 9387 1250 [EMAIL PROTECTED] www.igenerator.com.au On 26/08/2008, at 7:49 AM, Darren Lovelock wrote: I'm not understanding why you would use a logo/img as an h1 tag? Unless you wanted to use a nice anti-aliased font for the h1 text? If that's the case then I would just use sifr. SEO-wise you could only implement this on the homepage, otherwise you would have a duplicated h1 on all your web pages (providing the image had the same alt text). I wouldn't recommend using different alt text either when using the same image sitewide, as search engines may see that as keyword stuffing. I would keep them separate and have the alt text on the logo as your company name. Then have unique h1's as normal text on each page. I used to use a div with text in it for the logo, then css to add a background image and text indent to move the text off-screen. I changed back to an img tag as the alt text is more powerful for SEO purposes. Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: 25 August 2008 23:07 To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] H1 and the img tag Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
Hey Man you got the wrong email address so you might want to double check and re-send it to the person you intended on On Mon, Aug 25, 2008 at 7:59 PM, Schalk Neethling [EMAIL PROTECTED]wrote: Thanks everyone for your feedback, it definitely gives me something to think about. Regards, Schalk Darren Lovelock wrote: I'm not understanding why you would use a logo/img as an h1 tag? Unless you wanted to use a nice anti-aliased font for the h1 text? If that's the case then I would just use sifr. SEO-wise you could only implement this on the homepage, otherwise you would have a duplicated h1 on all your web pages (providing the image had the same alt text). I wouldn't recommend using different alt text either when using the same image sitewide, as search engines may see that as keyword stuffing. I would keep them separate and have the alt text on the logo as your company name. Then have unique h1's as normal text on each page. I used to use a div with text in it for the logo, then css to add a background image and text indent to move the text off-screen. I changed back to an img tag as the alt text is more powerful for SEO purposes. Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: 25 August 2008 23:07 To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] H1 and the img tag Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. 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] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Joey Grasso (678)362-4652 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
ok - seo is a bit like voodoo to me the following sites seem to be contray to suggestion http://wordpress.org/ .com - h1 with text-indent: -1000px http://www.alistapart.com - h1 with img alt text same on various pages - a duplicate on all pages (AFAIS) http://www.zeldman.com - h1 with text-indent: -1000px Also I see plenty of sites that are marking the logo in a div rather than a h1 (Shaun Inman Todd Dominey) ie in accordance with the suggestions with Henrik's link and Darren's or am I looking at something the wrong way. Its late, my quick investigation maybe a little rash (perhaps I am jumping to conclusions) - anyway the more I see the more verity I find and more confused I get - S 2008/8/26 Henrik Madsen [EMAIL PROTECTED] I agree, beware SEO-wise. If anyone's interested in seeing what black-hat SEOs are actually doing in this respect, read this: http://www.igenerator.com.au/blog/2008/08/top-10-web-design-firms-use-black-hat-seo/ http://www.igenerator.com.au Henrik Madsen *Generator* +61 8 9387 1250 [EMAIL PROTECTED] www.igenerator.com.au On 26/08/2008, at 7:49 AM, Darren Lovelock wrote: I'm not understanding why you would use a logo/img as an h1 tag? Unless you wanted to use a nice anti-aliased font for the h1 text? If that's the case then I would just use sifr. SEO-wise you could only implement this on the homepage, otherwise you would have a duplicated h1 on all your web pages (providing the image had the same alt text). I wouldn't recommend using different alt text either when using the same image sitewide, as search engines may see that as keyword stuffing. I would keep them separate and have the alt text on the logo as your company name. Then have unique h1's as normal text on each page. I used to use a div with text in it for the logo, then css to add a background image and text indent to move the text off-screen. I changed back to an img tag as the alt text is more powerful for SEO purposes. Darren Lovelock Munky Online Web Design http://www.munkyonline.co.uk T: +44 (0)20-8816-8893 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: 25 August 2008 23:07 To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] H1 and the img tag Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. 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] *** *** 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] possible to add tab navigation for this css flyout menu?
I am wondering if it's something I don't know or that it's impossible to add focus (tab nav) for second and third level using just CSS because onmouseover and onmouseout are used. (focus temporarily sets to #369) The menu is using onmouseover and onmouseout, it's not very accessible but I don't know enough PHP and js to change change the core code, and it's not very viable to change it for a template that is to be use by average joe, so I am just hoping if I can do it using CSS. http://tinyurl.com/6xdecp I will also appreciate if you can comment on the accessibility issue for this theme (except the unobtrusive Javascript - anyone who has taken a closer look on Magento code, knows that it's close to impossible to undo those js codes with one's effort). I have trimmed out many divs as well as reworked the markup to make it more semantically sound, but in some places I have taken shortcut, which, after much consideration, I don't think it affects the usability with screen reader. For example, for items that floated right, I wrap the span class inside the tag. Example: h4 span class=editedit/span heading text /h4 Many thanks! tee *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
RE: [WSG] H1 and the img tag
-Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Paul Bennett Sent: Monday, August 25, 2008 3:07 PM To: 'wsg@webstandardsgroup.org' Subject: RE: [WSG] H1 and the img tag Hi Michael, While that is possible, unfortunately the h1 text doesn't display when images are off and css is still in use. This is the issue many image replacement techniques sought to address. Not an issue with this one: http://tjkdesign.com/articles/tip.asp -- Regards, Thierry | http://www.TJKDesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] H1 and the img tag
Situations like this I tend to have the normal img and a separate text in h1 then use one of several methods to move the h1 out of sight (someone mentioned indenting the text as one example). Degrades fine when no css as the h1 tag just appears in the order set in the html. Jon Warner www.thepixelforge.net Schalk Neethling wrote: Hi there everyone, I was wondering. There is a general practice to use text replacement when it comes to company logo's on websites. If one does not want to use this practice, would there be any objection to wrapping the company logo image with an H1 one tag? I am thinking of this more in terms of the front page, on inner pages I would think the main topic of the page is the one that should be marked up with H1. What is your thoughts and would you recommend image replacement instead? Kind Regards, Schalk *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** No virus found in this incoming message. Checked by AVG - http://www.avg.com Version: 8.0.138 / Virus Database: 270.6.7/1631 - Release Date: 24/08/2008 12:15 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
