Re: [css-d] Safari 3.x: background image on an anchor tag bug
Sorry for copy, just CC to list. Philippe Wittenbergh wrote: 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 a 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/ Hello Philippe and Stephen. This is a bug in Safari 3 (Windows) when whitespace or a line-break appears in the inline box with side padding in a floated right container. http://css-class.com/test/bugs/safari/whitespace-line-break-bug.htm Safari 3 doesn't show the padding-right inside the anchor but outside like it was a margin-right (though this wouldn't normally work with an inline element) when whitespace or a line-break is present. The first test show neither and all is well. I have know idea why this happens. :-) -- 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/
Re: [css-d] Problem with links on IE 7 and link on IE 6
Hi Chris, There are already several responses to this problem on your previous post [css-d] CSS Problem with a tags on IE 6\7. I still firmly believe it's something to do with your stacking issues. Ta, ~Mx http://www.mxdx.co.uk __ 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
Hi Chris,
What you've done there is partially correct (the HTML is fine).
However, in the CSS you've made the #logomiddle have it's dimensions
(960x1150px) but the A tag is empty.
You'd need to do something like this:
CSS:
#logomiddle {
display: block;
background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
position: absolute;
left: -490px;
top: -150px;
height: 1150px;
width: 960px;
}
#logomiddle a
{
display: block;
height: 1150px; /* same as height above */
width: 960px; /* same as width above */
}
I've just tested this and it works correctly in FF3 IE6.
Based on the code you've used I'm guessing this has something to do
with your indexpage9.html? ;)
Ta,
~Mx
http://www.mxdx.co.uk
__
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
After just commenting on that, you have given me my answer Tim :) So can you
mix percentages and pixels ? So far I am and seems to be working fine!
On Tue, Apr 7, 2009 at 12:57 AM Tim Climis tcli...@indiana.edu wrote:
On Monday, April 6, 2009 7:08:13 pm Christopher R wrote:
I used FireBugs layout method to adjust the margin on a div 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 div 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/
__
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
Sorry, I don't follow and is there a major difference ? On Mon, Apr 6, 2009 at 7:22 PM Jack Timmons jorac...@gmail.com wrote: On Mon, Apr 6, 2009 at 12:37 PM, Christopher R majes...@thecreativesheep.ca wrote: HTML: span id=logomiddlea href=www.cokecola.com/a/span /* 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/ __ 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
Oh, I tried it and I so far it appears that it works so all I was missing was
to tell the a tag to be {display: block} and it had to be
the height and width of the #logomiddle. I've tried to make the link size
smaller by going as low as 200px but then it just doesn't work, I'm going to
see if I can make it smaller.
On Tue, Apr 7, 2009 at 8:53 AM Martyn Merrett mx.css...@googlemail.com
wrote:
Hi Chris,
What you've done there is partially correct (the HTML is fine).
However, in the CSS you've made the #logomiddle have it's dimensions
(960x1150px) but the A tag is empty.
You'd need to do something like this:
CSS:
#logomiddle {
display: block;
background: url(header-web-page-graphic-done3_01.png) no-repeat top center;
position: absolute;
left: -490px;
top: -150px;
height: 1150px;
width: 960px;
}
#logomiddle a
{
display: block;
height: 1150px; /* same as height above */
width: 960px; /* same as width above */
}
I've just tested this and it works correctly in FF3 IE6.
Based on the code you've used I'm guessing this has something to do
with your indexpage9.html? ;)
Ta,
~Mx
http://www.mxdx.co.uk
__
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] Margins and Shorthand
What I don't understand is when I entered in 24% for the right value in firebug
it's position with the margin was perfect now when I enter that
value into my code it's too big, argggh.
On Tue, Apr 7, 2009 at 1:47 AM Michael Grosch li...@migrosch.com wrote:
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 div 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 div 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/
__
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] Problem with links on IE 7 and link on IE 6
I believe it could be a stacking issue, I have gotten the links to work now the only problem is the image is hiding behind my, I don't know how to word it the center block on my page :) On Tue, Apr 7, 2009 at 8:39 AM Martyn Merrett mx.css...@googlemail.com wrote: Hi Chris, There are already several responses to this problem on your previous post [css-d] CSS Problem with a tags on IE 6\7. I still firmly believe it's something to do with your stacking issues. Ta, ~Mx http://www.mxdx.co.uk __ 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/
[css-d] shifting divs in ie6 and ie7
Hello all, I've been assigned a bug fix, and I wanted to check my instincts to see if I'm on the right track, as css is rather new to me. The page in question: http://xtf.lib.virginia.edu/xtf/view?docId=2005_Q4_3/uvaBook/tei/z00175.xml This renders fine in Firefox, but problematically in ie6 and 7. In ie6, the div id=mainContent is far lower down on the page than in Firefox, and in ie7, the same div jumps over to the right. When debugging in Firefox with Firebug, I was able to mimic what it looks like in ie6 by modifying a css rule specifying float: none; for #mainContent. When I change the rule to float: left;, the div jumps down in the browser, and looks like ie6. From some reading I've done, it looks like this may be a case of the escaping float. Can someone confirm this, or correctly diagnose this problem? With a diagnosis, what treatments do you suggest? Thanks! Tony __ 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] Website help - CSS layout and Spry Menu Bar questions
Also the site has %...@language=JAVASCRIPT CODEPAGE=65001% above the header and the header bar is moved in firefox - but again not with explorer. Help! From: Tarah - Dome Cleaning, Inc. Sent: Tuesday, April 07, 2009 12:59 PM To: 'css-d@lists.css-discuss.org' Cc: Tarah - Dome Cleaning, Inc. Subject: Website help - CSS layout and Spry Menu Bar questions Hey everyone, This is probably a simple problem, but I need some help. I have been working on a site for my office and I am having some troubles with an editable div region in my template. You can go to www.domecleaning.com/devhttp://www.domecleaning.com/dev to look at the page in progress (there is only one page since I am getting my template perfect before I make all the pages). I am trying to get an optional sidebar 200 pix wide (same with as the current side bar) to go below the current sidebar and I am having no luck. You can see where it says SideBar2 below the main content - I want this to be the optional sidebar but it keeps going above or below the main content, not below the current sidebar as I want it. Any help would be appreciated. I do have another question with my spry menu bar... sometimes in the internet explorer browser the first menu to drop down will have a white box next to it - do you know what this is? Also, in Firefox, the drop down menu's are all the same width and the text is cut of on some of the menu's - but in explorer the width fits to my text. Any help here? I have attached the CSS files for both the site and the spry menu bar. Thanks so much! Tarah M. Ornelas Marketing, Sales Customer Service Manager Dome Cleaning, Inc. Ph: (415) 442-0766 Fax: (415) 442-0756 There's No Stopping the Mopping! __ 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] shifting divs in ie6 and ie7
Tony Zanella wrote:
http://xtf.lib.virginia.edu/xtf/view?docId=2005_Q4_3/uvaBook/tei/z00175.xml
In ie6, the div id=mainContent is far lower down on the page
than in Firefox, and in ie7, the same div jumps over to the right.
Problematic to diagnose and correct a layout that is based on tables,
multiple classes and inline styles to such a degree :-)
It is _not_ an escaping float case - rarely happens in older IE/win
anyway.
Elements inside #subContent1 take up space to the right in old IE/win,
which causes overflow/expansion. As a result #docText gets pushed over
in IE7 - IE7 handles overflow somewhat correct in this case, while in
IE6 #docText runs out of space and gets pushed down below #subContent1 -
IE6 handles visible overflow badly (or rather not at all).
One way to fix old IE's problem is to pull in the right margin on
#subContent1 and thereby make it appear narrower.
The addition of...
#subContent1 {margin-right: -500px!important;}
...will do, and won't create problems for better browsers.
This is not a perfect solution though, only a quick-fix (I got tired of
looking through the somewhat messy source-code and stylesheets).
You should dig a bit deeper and figure out which elements/styles that
cause the overflow/expansion in old IE, and try to correct it there.
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] Acronyms
Carolyn Rosner wrote:
I find it helpful as a designer and web-page reader to see acronyms
(or initialisms, as I understand the proper term to be for non-'word'
abbreviations) spelled out each time. My question is: is the use of
acronym deprecated, or is it still OK to use? Is it accessible?
Presently HTML 5 recommends ABBR instead of ACRONYM. However, it will be
a long time before ACRONYM goes away, I imagine. I don't know whether
screen readers try to pronounce an acronym as a word or not, but with
Internet Explorer's historical lack of support for ABBR, I imagine
screen readers have adapted.
I do my acronyms/initialisms this way, I like it because on hover you
get the thing spelled out: acronym title=Woods Hole Oceanographic
InstitutionWHOI/acronym
Yes. You can do the same with ABBR elements. To get older IE to work,
put this in the HEAD section so that it runs before the page loads:
!--[if lt IE7]
scriptdocument.createElement('abbr');/script
![endif]--
Cordially,
David
--
__
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/
