Re: [css-d] IE6 peculiarity - need help to sort it

[Peter Hammarling]

> In all likelihood it is the IE "duplicate character bug."
> If you're lucky, removing comments in the markup may fix it--  
> otherwise it can get a little more difficult.
> Please see this page for explanation and fix:
> 



David, thank you so much for pointing me to that article. The bug  
described there was exactly the problem. In the end I didn't have to  
remove comments, adding a negative right margin to the final float did  
the trick.

I wish I'd posted the query a few hours earlier - I could have saved  
myself a lot of frustration and bad language.

Thanks again, Peter
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] footer xhtml and css valid

[Bobby Jack]

> On Sun, 4/5/09, David Laakso  wrote:

>> Brian Hazelton wrote:

>> I have a web design company and was wondering if it is still common
>> practice to put the links to w3c in the footer if the pages validate
>> for xhtml and css

> I think their inclusion is a matter of opinion. Personally,
> I think they are distracting and unnecessary.

I recently removed the full size validation buttons from my (personal) site's 
footer. Whilst they're useful to me, they're probably not so to that many 
others, although they're certainly more relevant to my audience than that of a 
general interest site.

I think there's a perception that they smack somewhat of a 'look how good I am' 
mentality, and there's a danger you'll be shot down in flames should a single 
validation error occur when those links are followed.

This (type of) information should almost certainly be provided by the browser 
rather than individual web pages.

- Bobby (fiveminuteargument.com)
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] webtool: IE6 CSS Fixer

[Niels Matthijs]

Hi all,

dunno if it belongs here, but since this mailing list is all about css
and possible bugs, I think some people will benefit from this.

A new tool was released today, automating the ie6 css debug work (at
least, to some extent). It takes a main css file, to which it applies a
series of selectable fixes. It then outputs a new css file which can be
used as a start for the real work.

This tool is not supposed to be a miracle solution, but it does fix a
good portion of ie6 bugs with one single click. Also, it doesn't output
clean and lean ie6 fix css, but that's something you'll have to bear
with for now.

http://www.onderhond.com/tools/ie6fixer/

Hope this helps :)

Greets,
Niels Matthijs
http://www.onderhond.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Problem with links on IE 7 and link on IE 6

[Christopher R]

Alright, so far what I still have plaging me is the links  links that is are 
not 
working in Internet Explorer version 6 and Internet Explorer version 7 and I'm 
at
a loss at how to fix !

http://www.thecreativesheep.ca/site/indexpage9.html
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[Alan Gresley]

Peter Hammarling wrote:
>> In all likelihood it is the IE "duplicate character bug."
>> If you're lucky, removing comments in the markup may fix it--  
>> otherwise it can get a little more difficult.
>> Please see this page for explanation and fix:
>> 
> 
> 
> 
> David, thank you so much for pointing me to that article. The bug  
> described there was exactly the problem. In the end I didn't have to  
> remove comments, adding a negative right margin to the final float did  
> the trick.
> 
> I wish I'd posted the query a few hours earlier - I could have saved  
> myself a lot of frustration and bad language.
> 
> Thanks again, Peter


IE8 beta 2 (8.0.6001) is showing it's missing content bug quite 
consistently on this page.



The thumbnails images that are rendered causes typical IE re-flow when 
hovered over. Someone may want to check this is a later version of IE8.


-- 
Alan http://css-class.com/

Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Safari 3.x: background image on an anchor tag

[Stephen Tang]

Hi,
I am trying to place a background image of an right-facing arrow on an
anchor tag.

The HTML markup looks like this:
See All
Galleries

The CSS looks like this:
.viewAllLink a {padding: 4px 20px 0 0; background:
url(../i/green-arrows.gif) center right no-repeat; font:normal 13px
"Tahoma", verdana;}

This works in IE6, IE7, IE8, and FF3, but not Safari 3.x.  In Safari,
the link text overlaps the background image like this:
http://stephentang.info/safari/test.jpg

The only way I could solve this was to add a span tag inside the
anchor and attach the background image on that.
The HTML markup is now:
See All
Galleries

The CSS looks like this now:
.viewAllLink a span {padding: 4px 20px 0 0; background:
url(../i/green-arrows.gif) center right no-repeat; font:normal 13px
"Tahoma", verdana;}

It seems that Safari's idea of how padding works on the anchor tag is
different than the other browsers I tested.  In all the other
browsers, the padding applies inside the anchor tag, which pushes the
link text away from the background image.  In Safari, the padding
applies outside of the anchor tag, so the background image is
obfuscated by the text. The padding just pads the anchor tag relative
to its parent element.

I tried to find if this was a known issue online, but I couldn't find
anything.  Can anybody else confirm how Safari 3.x interprets padding
in this case?

Thanks,
Stephen
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[Peter Hammarling]

>> IE8 beta 2 (8.0.6001) is showing it's missing content bug quite  
>> consistently on this page.
>> 
>
> Problems with missing content seem to have been solved in IE8 final  
> - at
> least I haven't been able to provoke those bugs through pretty  
> thorough
> testing of a number of documents that fail in IE8 beta and RC  
> versions.
>
> regards
>   Georg



Thanks Georg.  False alarm then, which is a relief.  Peter H.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[Peter Hammarling]

> IE8 beta 2 (8.0.6001) is showing it's missing content bug quite
> consistently on this page.
>
> 
>
> The thumbnails images that are rendered causes typical IE re-flow when
> hovered over. Someone may want to check this is a later version of  
> IE8.



thanks for the warning. I haven't had time to check - I'll have to  
download the latest beta first. I'm not sure if I should worry yet  
seeing as IE8 is beta. Do you know what causes the problem and if it's  
hack/fixable?



_

Artworkers Barcelona
Rambla Catalunya 14, 2, 2
08007 Barcelona
Tel  (+34) 93 317 4615
Móvil  (+34) 609 333 709
Fax  (+34) 93 317 8948
Email  pe...@artworkers.net
Skype: peterh-onskype


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[Gunlaug Sørtun]

Alan Gresley wrote:

> IE8 beta 2 (8.0.6001) is showing it's missing content bug quite 
> consistently on this page.
> 
> 

Problems with missing content seem to have been solved in IE8 final - at
least I haven't been able to provoke those bugs through pretty thorough
testing of a number of documents that fail in IE8 beta and RC versions.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[Peter Hammarling]

> Just to make it clear, IE 8 is out of beta. [1]  It was released for  
> public consumption on March 19th 09.
>
> You can download it from the MS site [2] of google for IE 8.
>

thanks again folks - I didn't know it was finally final, I thought  
they'd got to Release Candidate.  That'll be yet another browser to  
check with, then.

Peter H.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[JWN]

Afternoon Peter

You wrote

thanks for the warning. I haven't had time to check - I'll have to
download the latest beta first. I'm not sure if I should worry yet
seeing as IE8 is beta. Do you know what causes the problem and if it's
hack/fixable?



Just to make it clear, IE 8 is out of beta. [1]  It was released for public 
consumption on March 19th 09.

You can download it from the MS site [2] of google for IE 8.


HTH

Jim Nannery
blog - www.nannery.net/wordpress

[1] http://en.wikipedia.org/wiki/Internet_Explorer_8
[2] http://www.microsoft.com/windows/internet-explorer/default 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[Climis, Tim]

> I haven't had time to check - I'll have to  
> download the latest beta first. I'm not sure if I should worry yet  
> seeing as IE8 is beta. 

IE8 is final now isn't it?  Final release was March 19, I thought.

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 peculiarity - Also IE8

[David Laakso]

Peter Hammarling wrote:
>> 
>
> thanks again folks - I didn't know it was finally final, I thought  
> they'd got to Release Candidate.  That'll be yet another browser to  
> check with, then.
>
> Peter H.
>   

Trivial Pursuits.
re: 
Some folks are gonna have a hard time reading it without breaking the 
layout regardless of their browser of choice :-) .
Best,
Louis Braille
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Acronyms

[Brian Hazelton]

I was wondering, if you use an acronym more than once on a page, do you
define it every time or just the first occurrence on a page?


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] webtool: IE6 CSS Fixer

[Stefan]

Good find thanks for the url, I'll have a play, not sure if I would
use it in production until there has been some feedback as to how
effective it is.

Has anyone used it?

cheers

Stefan

On Mon, Apr 6, 2009 at 2:45 PM, Niels Matthijs
 wrote:
> Hi all,
>
> dunno if it belongs here, but since this mailing list is all about css
> and possible bugs, I think some people will benefit from this.
>
> A new tool was released today, automating the ie6 css debug work (at
> least, to some extent). It takes a main css file, to which it applies a
> series of selectable fixes. It then outputs a new css file which can be
> used as a start for the real work.
>
> This tool is not supposed to be a miracle solution, but it does fix a
> good portion of ie6 bugs with one single click. Also, it doesn't output
> clean and lean ie6 fix css, but that's something you'll have to bear
> with for now.
>
> http://www.onderhond.com/tools/ie6fixer/
>
> Hope this helps :)
>
> Greets,
> Niels Matthijs
> http://www.onderhond.com
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Acronyms

[JWN]

Afternoon Brian

You wrote

>I was wondering, if you use an acronym more than once on a page, do you
> define it every time or just the first occurrence on a page?
>

I'm not really clear about your question.

If you are asking about the acronym *element* in html, you can style it once 
and the style will apply to all instances in the document.

html [1]
 NATO
 RADAR
 CSS


CSS
acronym{ color: navy; more styles;}

All the acronyms in the document will have a text color of navy and any 
other styles you apply.

If you're asking about repeating an acronym, like NATO,  in the body of a 
document, you don't have to *define* it.  (unless of course it's some 
obscure reference that your audience may not understand)

You can give different acronyms (NATO, RADAR, CSS)  different styles if you 
want, but that, I think, is a topic for another post.

It might be helpful to post a link to a page with the problem (or a minimal 
test case) to help clarify your question.

Jim Nannery
blog - www.nannery.net/wordpress

[1] http://www.highdots.com/css-editor/html_tutorial/phrase/acronym.html



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Acronyms

[Bill Brown]

JWN wrote:
>  CSS
> CSS
> acronym{ color: navy; more styles;}
> You can give different acronyms (NATO, RADAR, CSS)  different styles if you 
> want, but that, I think, is a topic for another post.

Just for the record, CSS is an abbreviation , not an acronym.
Acronym's are pronounced, like POTUS, NASA, NATO, RADAR while 
abbreviations are stated as letters, like CSS, HTML, FBI and CIA.

Technically, an acronym is in many ways just a subset of abbreviation, 
while the inverse is not true.

This is all off-topic for this list (inluding the original post), so 
pardon the additional noise but I thought it might useful to point out 
for anybody reading this thread now or in the future.

-- 

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Background Images clickable links

[Christopher R]

I was reading up on how to create links from background images, so I came 
across this page
which mentions the following:
http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
Simple enough one thought, I applied it like so to my code:

HTML:

 /* coka cola is 
just a test URL */

CSS:

#logomiddle {
  display: block;
  background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
  display: block;
  position: absolute;
  left: -490px;
  top: -150px;
  height: 1150px;
  width: 960px;
  z-index: 1;
}

I added display: block as it mentions but there is some mentioning of 
positioning that has gotten me lost.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Christopher R]

Well the concept they mention is pretty easy, but I can't get it to work.


On Mon, Apr 6, 2009 at 6:19 PM "Krystian - Sunlust"  wrote:
>I don't get what's the point of doing that , why not just use an image
> as a link?
> 
> 
> 
> On 4/6/09, Christopher R  wrote:
> > I was reading up on how to create links from background images, so I came
> > across this page
> > which mentions the following:
> > http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
> > Simple enough one thought, I applied it like so to my code:
> >
> > HTML:
> >
> >  /* coka cola is
> > just a test URL */
> >
> > CSS:
> >
> > #logomiddle {
> >   display: block;
> >   background: url(header-web-page-graphic-done3_01.png) no-repeat top
> > center;
> >   display: block;
> >   position: absolute;
> >   left: -490px;
> >   top: -150px;
> >   height: 1150px;
> >   width: 960px;
> >   z-index: 1;
> > }
> >
> > I added display: block as it mentions but there is some mentioning of
> > positioning that has gotten me lost.
> >
> >
> > __
> > css-discuss [cs...@lists.css-discuss.org]
> > http://www.css-discuss.org/mailman/listinfo/css-d
> > List wiki/FAQ -- http://css-discuss.incutio.com/
> > List policies -- http://css-discuss.org/policies.html
> > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
> >
> 
> 
> -- 
> Krystian Szastok
> Affordable, Freelance Web Designer in Eastbourne, East Sussex:
> http://eastbournewebdesign.net
> Mobile UK (Orange): 07528 036 337
> Call for more information or email me.
> 
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Krystian - Sunlust]

I don't get what's the point of doing that , why not just use an image
as a link?



On 4/6/09, Christopher R  wrote:
> I was reading up on how to create links from background images, so I came
> across this page
> which mentions the following:
> http://www.attackr.com/css-trick-turning-a-background-image-into-a-clickable-link/
> Simple enough one thought, I applied it like so to my code:
>
> HTML:
>
>  /* coka cola is
> just a test URL */
>
> CSS:
>
> #logomiddle {
>   display: block;
>   background: url(header-web-page-graphic-done3_01.png) no-repeat top
> center;
>   display: block;
>   position: absolute;
>   left: -490px;
>   top: -150px;
>   height: 1150px;
>   width: 960px;
>   z-index: 1;
> }
>
> I added display: block as it mentions but there is some mentioning of
> positioning that has gotten me lost.
>
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
>


-- 
Krystian Szastok
Affordable, Freelance Web Designer in Eastbourne, East Sussex:
http://eastbournewebdesign.net
Mobile UK (Orange): 07528 036 337
Call for more information or email me.
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Margins and Shorthand

[Christopher R]

I used FireBugs layout method to adjust the margin on a  As most of us 
know margins work by top, right, buttom, left.  Now using firebox I enter in 24 
for the right margin, then I wrote the short hand for the  which I have in 
absolute positioning inwhich I wrote, {0%, 24%, 0%, 0%;} when I previewed in 
Firefox after entering that into my code it didn't show what I had saw using 
those values in firebug, why is that?

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background Images clickable links

[Jack Timmons]

On Mon, Apr 6, 2009 at 12:37 PM, Christopher R  wrote:

> HTML:
>
>  /* coka cola
> is just a test URL */
>

You shouldn't be bothering with positioning. Move your spans inside your
anchors, not outside. Throw in some text, and use spans to hide it. Place
background on the anchor. Position block to anchor.
-- 
-Jack Timmons
http://www.trotlc.com
Twitter: @codeacula
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Acronyms

[David Laakso]

Brian Hazelton wrote:
> I was wondering, if you use an acronym more than once on a page, do you
> define it every time or just the first occurrence on a page?
>
>   

First only as I recall.
See the University of Chicago Manual of Style.
Online version:

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 3.x: background image on an anchor tag

[Philippe Wittenbergh]

On Apr 7, 2009, at 1:48 AM, Stephen Tang wrote:

> The CSS looks like this:
> .viewAllLink a {padding: 4px 20px 0 0; background:
> url(../i/green-arrows.gif) center right no-repeat; font:normal 13px
> "Tahoma", verdana;}
>
> This works in IE6, IE7, IE8, and FF3, but not Safari 3.x.  In Safari,
> the link text overlaps the background image like this:
> http://stephentang.info/safari/test.jpg
>
> ...
>
> It seems that Safari's idea of how padding works on the anchor tag is
> different than the other browsers I tested.  In all the other
> browsers, the padding applies inside the anchor tag, which pushes the
> link text away from the background image.  In Safari, the padding
> applies outside of the anchor tag, so the background image is
> obfuscated by the text. The padding just pads the anchor tag relative
> to its parent element.

Can you post a url of a test case that actually shows the issue ? A  
screenshot and lose code snippets are hard to debug :-).

Fwiw, I never experienced issues with similar markup and styling on  
Safari 3.x.

I do know that Safari sometimes had (has ?) problems with top-padding  
on inline elements, but only when using a transitional doctype.
such as this bug report
https://bugs.webkit.org//show_bug.cgi?id=8544

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 3.x: background image on an anchor tag bug

[Stephen Tang]

Hi Phillipe,
The actual bug appears here:
http://www.realsimple.com/food-recipes/shopping-storing/beverages/best-coffee-008163/index.html

In the right column, there is a link called "See All Galleries."
There is a green arrow underneath this text, but the overlap only
happens in Safari 3.x.  When viewing in Firefox 3 or IE6/7/8, the
green arrow is to the right of the text.

I attempted to isolate the markup and CSS onto a test page, but I
cannot reproduce the bug.

The only way I could fix the problem was to attach the background
image to the DIV, not the anchor.  However, I am still at a loss why
Safari behaves this way.  It's as if the right-padding on the A is
being ignored.

--Stephen

On Mon, Apr 6, 2009 at 8:08 PM, Philippe Wittenbergh  wrote:
>
> On Apr 7, 2009, at 1:48 AM, Stephen Tang wrote:
>
>> The CSS looks like this:
>> .viewAllLink a {padding: 4px 20px 0 0; background:
>> url(../i/green-arrows.gif) center right no-repeat; font:normal 13px
>> "Tahoma", verdana;}
>>
>> This works in IE6, IE7, IE8, and FF3, but not Safari 3.x.  In Safari,
>> the link text overlaps the background image like this:
>> http://stephentang.info/safari/test.jpg
>>
>> ...
>>
>> It seems that Safari's idea of how padding works on the anchor tag is
>> different than the other browsers I tested.  In all the other
>> browsers, the padding applies inside the anchor tag, which pushes the
>> link text away from the background image.  In Safari, the padding
>> applies outside of the anchor tag, so the background image is
>> obfuscated by the text. The padding just pads the anchor tag relative
>> to its parent element.
>
> Can you post a url of a test case that actually shows the issue ? A
> screenshot and lose code snippets are hard to debug :-).
>
> Fwiw, I never experienced issues with similar markup and styling on Safari
> 3.x.
>
> I do know that Safari sometimes had (has ?) problems with top-padding on
> inline elements, but only when using a transitional doctype.
> such as this bug report
> https://bugs.webkit.org//show_bug.cgi?id=8544
>
> Philippe
> ---
> Philippe Wittenbergh
> http://l-c-n.com/
>
>
>
>
>
>
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Safari 3.x: background image on an anchor tag bug

[Philippe Wittenbergh]

On Apr 7, 2009, at 12:18 PM, Stephen Tang wrote:

> The actual bug appears here:

> http://www.realsimple.com/food-recipes/shopping-storing/beverages/best-coffee-008163/index.html
>
> In the right column, there is a link called "See All Galleries."
> There is a green arrow underneath this text, but the overlap only
> happens in Safari 3.x.  When viewing in Firefox 3 or IE6/7/8, the
> green arrow is to the right of the text.
>
> I attempted to isolate the markup and CSS onto a test page, but I
> cannot reproduce the bug.

I see. Puzzling.

I put a border on that particular link, and that shows that the right  
part is actually clipped (the right-border didn't show up). Quizzing  
the page with the WebKit inspector didn't tell me anything as to why  
this clipping happens.

> The only way I could fix the problem was to attach the background
> image to the DIV, not the anchor.  However, I am still at a loss why
> Safari behaves this way.  It's as if the right-padding on the A is
> being ignored.

Setting that  to display: inline-block is a cleaner way to solves  
this.
But that doesn't explain the 'why' of this.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Margins and Shorthand

[Tim Climis]

On Monday, April 6, 2009 7:08:13 pm Christopher R wrote:
> I used FireBugs layout method to adjust the margin on a  As most of us
> know margins work by top, right, buttom, left.  Now using firebox I enter
> in 24 for the right margin, then I wrote the short hand for the  which
> I have in absolute positioning inwhich I wrote, {0%, 24%, 0%, 0%;} when I
> previewed in Firefox after entering that into my code it didn't show what I
> had saw using those values in firebug, why is that?

if you don't specify units in firebug, it defaults to pixels.  So if you just 
typed in 24, it's 24px, not 24%.

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Margins and Shorthand

[Michael Grosch]

The syntax is incorrect. It should be

xyz {
margin: 0% 24% 0% 0%;
}

No commas between the values in the shorthand syntax. And you could  
also leave out the percent symbol when the value is 0. 0px = 0% = 0em  
= 0 ;-)


Michael


Am 07.04.2009 um 01:08 schrieb Christopher R:

> I used FireBugs layout method to adjust the margin on a  As  
> most of us know margins work by top, right, buttom, left.  Now using  
> firebox I enter in 24 for the right margin, then I wrote the short  
> hand for the  which I have in absolute positioning inwhich I  
> wrote, {0%, 24%, 0%, 0%;} when I previewed in Firefox after entering  
> that into my code it didn't show what I had saw using those values  
> in firebug, why is that?
>
> __
> css-discuss [cs...@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List wiki/FAQ -- http://css-discuss.incutio.com/
> List policies -- http://css-discuss.org/policies.html
> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/