[css-d] Tiled background image not showing in MAC IE
Hello all, I've a strange problem with a recent layout. In MAC IE (tested in mac IE 5.01), two backgrounds images are not showing, the one on the body and the one on the banner div. These images are quite wide (2550px) to account for large screen resolutions. After running a few tests, I've realised that, apparently, IE MAC doesn't like background images much larger than the viewport. The only solution I've found is using an IE MAC filter to feed it a smaller version of the main page background image (I decided not to bother about the other one since it is not essential). Here are the files: XHTML http://www.g-rom.be/test/index.html CSS http://www.g-rom.be/test/css/main.css Two requests: 1. Can anyone test in IE MAC 5.2 and see if the problem occurs as well ? 2. Did anyone have the same kind of problem ? Is there another workaround ? Master Wittenbergh, maybe ? Best regard, Jérôme Coupé -- http://www.polarfoundation.org http://www.sciencepoles.org http://www.educapoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Multiple IR in IE 5.0/Win [Solved]
Hello Jono, You can have a look at one previous post regarding IR techniques [1] (references to test pages, usefull reviews and discussions) This particular technique [2] seems to fulfill you requirements. Drawbacks: transparent images / massive bump-up of font-size by user [1] http://www.mail-archive.com/css-d@lists.css-discuss.org/msg04488.html [2] http://www.tjkdesign.com/articles/tip.asp Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- While I am am concerned about the few who know how to turn off images, I have not found a better technique (yet) that works cross-browser - Mac\Win IE 5.0 - 6.0; Safari, FF, maybe even Opera, etc - that doesn't involved JS, or the DOM, or something more complicated. I'd also like to be able to add a link to the image that replaces the text. Anyone have a suggestion...for an IR technique that works as mentioned? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Text sizing in IE
Hello Ali, In addition to what Georg said, I usually set the root-declaration to 100.01% to avoid size inheritance bugs in some versions of Opera, and then use em. http://css-discuss.incutio.com/?page=UsingEms Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- Phone : +32 (0)2 533 97 33 -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- Hi, Could anyone help me out with a problem with relative text sizing in IE (and possibly other browsers)? I have declared the body font-size as 1.0em, p as 0.8em and headings 1.2em etc on my page (http://www.aycee.co.uk) and they all scale correctly in relation to each other, the problem occurs when using IE to change the visible font-size - the size of the text as a whole seems to adjust in big jumps from really large text for largest, down to miniscule unreadable text for smallest. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Floats break containing div
Hello Brendan, This is typical with floats. Floated items are removed from the document flow and non floated elements do not take them into account anymore. You can have a look at Eric's article on the subject of float containment http://www.complexspiral.com/publications/containing-floats/ In you case you can force the wrapper to enclose the floats by: Floating the wrapper as well Or Applying a clearing technique http://css-discuss.incutio.com/?page=ClearingSpace Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- Phone : +32 (0)2 533 97 33 -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). Hi all I have the following code, and the floats are displaying correctly (as in they're side-by-side), but the wrapper doesn't extend down... __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Multiple IR in IE 5.0/Win [Solved]
Hello Thierry, Setting aside the debate should we or should we not use IR techniques, I might have not expressed myself correctly in my post. I understand the method and its benefits. I was just stressing that: 1. Problems remain if a user can display images and bumps up font size (either the text shows through (unless you are willing to use extra large images to account for worst case scenario), or the image becomes blurry, even if you specify its size using relative units like you do in another example). Some users I know must increase their font-size to 500% to be able to read. 2. Even if anchors are used instead of images, since take into account the css on/img off scenario, you have a problem if you want to use transparent / partially transparent images to replace your text, since your text must be hidden under the image. Having that said, your method is indeed interesting in many aspects. Thanks for making it available. Cheers, Jérôme Coupé -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- From: Thierry Koblentz [mailto:[EMAIL PROTECTED] Sent: mercredi 12 octobre 2005 15:40 To: jérôme coupé; css-d@lists.css-discuss.org Cc: 'Jono' Subject: Re: [css-d] Multiple IR in IE 5.0/Win [Solved] IMHO, if Jono is using anchors, there are no drawbacks. See the new section in this article about anchors and named anchors. And the technique is not just about transparent images, it's about using the img element. Using real images (not shims) rather than background image has another advantage: there is no flickering in MSIE when the user hovers over the elements. Thierry | www.TJKDesign.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] BIR Bob Image Replacement - (z-index stack order probs)
Hello all, Setting apart the general debate on should we use IR at all, here is another technique that seems quite interesting to me untill CSS3 supprt is widely available. It avoids common pitfalls of other IR techniques like CSS ON / IMG OFF - screen magnifiers, ... the only drawback I see is transparent images (Jaws 6,20 test ok and keyboard navigation as well) What do you think ? http://www.tjkdesign.com/articles/tip.asp Best regard, Jérôme Coupé http://www.polarfoundation.org http://www.sciencepoles.org Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] BIR Bob Image Replacement - (z-index stack order probs)
Hello there,
Here is the link to the BIR example
http://wdhaven.com/xmp/bir.html
Regarding Image Replacement techniques, here are resources for checking the
pros and the cons of various methods
http://www.mezzoblue.com/tests/revised-image-replacement/
http://wd.mrclay.org/tests/ir/
http://www.mezzoblue.com/archives/2005/03/30/image_replac/
An addition to the list of used techniques (many others as well)
http://www.stuffandnonsense.co.uk/archives/mir_image_replacement.html
Basically, there are some accesibility problems with all these methods under
certain conditions:
* screenreader access
* CSS on / Images off scenarios
* Screen magnifier users
Discussions on the subject can be found at:
http://www.accessifyforum.com/viewtopic.php?p=21802
http://www.access-matters.com/2005/04/03/quiz-241-on-being-heard-but-not-se
en/
http://meyerweb.com/eric/thoughts/2005/06/27/dont-read-speak/
I personnaly try to avoid such techniques as much as possible untill CSS3's
generated content module is widely supported
h1
{
content:url(image.gif);
}
Sfir can also be an option if you just need fancy text/fonts
http://www.mikeindustries.com/sifr/
The most accessible solution I know of:
http://www.quirksmode.org/dom/fir.html
-Original Message-
Hi folks,
A colleague has pointed me to another image replacement technique by the
name of BIR (Bob's Image Replacement)
Has anyone used this technique much?
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.338 / Virus Database: 267.9.5/58 - Release Date: 25/07/2005
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Problem in Firefox on initial page load only
Hello Anthony, Works for me as well using FF 1.0.4 on Win XP SP2 without reload. Best regard, Jérôme Coupé -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -Original Message- From: [EMAIL PROTECTED] On Behalf Of AntonyG The problem is that the background colour of the main content area doesn't reach down to the bottom of the container, even though it should (and does upon refresh!). I have uploaded an image showing the problem indicated by the red arrow here: http://www.antonygolding.com/trisalford.jpg (670kb) The site URL is http://www.trisalford.info -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.338 / Virus Database: 267.9.5/58 - Release Date: 25/07/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Formatting ordered lists
-Original Message- Is anyone in possession of an explanation on how to style an ordered list? I'm trying to set a large font size for the number and a small size for the copy in the list item with out using extra markup.ello Keith, -- Hello, If you are willing to simply add ids or classes, I would use background images. I might be wrong but I do not think there is any way (yet) of styling the ol generated numbers differently than the items. Here is an example with images: http://www.julian-bez.de/blog/2005/05/13/styling-ordered-lists/ Cordialement, Jérôme Coupé -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -- Internal Virus Database is out-of-date. Checked by AVG Anti-Virus. Version: 7.0.323 / Virus Database: 267.9.1/51 - Release Date: 18/07/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Newbie - Positioning Problem (I think)
Hello Juanita,
As others have pointed out, this lateral jump from page to page is caused
by the presence or not of a vertical scrollbar, depending on the length of
your page. The wisest thing to do is probably to live with it ... but in
case you want to force vertical scrollbar, here is the best trick I know:
html
{
height: 100%;
margin-bottom: 1px;
}
It keeps the vertical scrolling to a minimal 1px.
Source:
http://www.hicksdesign.co.uk/journal/forcing-scrollbars-now-even-better
Credits to Patrick H. Lauke.
Best regard,
Jérôme Coupé
Technical knowledge is not enough.
One must transcend techniques so that the art becomes an artless art,
growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99).
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] bizarre top margin exception behaviour in IE6
Hello Julia, I do not have time right now for a full check but I would go for the infamous guillotine bug described here (with fix): http://www.positioniseverything.net/explorer/guillotine.html HTH, Jérôme Coupé -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). --- quote http://www.we3.co.uk/for_james3/AIF_admin.htm when you roll over the tabs something makes the bottom 2/3rds of the page dissapear. This effect disappears if I take the conditional statement of the top margin out of the html (but the gap is still there). Can anyone explain, please why this happens? And can anyone help me fix my problem? Thanks Julia /quote -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.323 / Virus Database: 267.8.14/48 - Release Date: 13/07/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] SOLVED : Problem under MAC IE 5.0 and 5.5 (list navbar doesn't display correctly under MAC IE 5.0)
Hello Philippe,
Thank you very much for your quick answer.
Your suggestion (below)corrected the first problem when added to my CSS
http://www.polarfoundation.org
http://www.polarfoundation.org/css/main.css
/*The following is read by IE5 MAC only
http://www.stopdesign.com/log/2004/07/06/filtering-css.html
and is used so that IE 5.0 mac draws the main navbar (almost) correctly
credits to Philippe Wittenbergh for this solution:*/
/*\*//*/
div#mainnav li
{
display:inline-block !important;
float:none !important;
}
div#mainnav a
{
display:inline-block !important;
float:none !important;
white-space:nowrap;
width:1px;
}
/**/
To solve the jumpy box below (my second problem), you suggestion was to add
a border on both states of a tags (normal + hover: see below)
I've decided to leave that as it is because I am not willing to change the
design so drastically for such an old browser.
What is important to my is that everyone can use the website (which IE5.0
users on MAC can do now, thanks to the first part of the solution). I can
live with the fact that users using IE 5.2 on MAC will see things jump a bit
on the homepage untill they have hovered every link.
Again, thanks very much.
If you have a page up explaining the trick in detail, I'd be happy to point
to it in the CSS file.
That one is caused by the repainting of the page when hovering over the
(some) links in the #mainnav.
Instead of this
div#mainnav a
{
float:left;
font-family:Arial,Verdana,sans-serif;
padding:5px 8px;
text-decoration:none;
color:#000;
}
div#mainnav a:hover,div#mainnav a:focus,div#mainnav a:active,div#mainnav
a.current {
border-bottom:3px solid #bd000b;
padding-bottom:2px;
}
use this
div#mainnav a
{
float:left;
font-family:Arial,Verdana,sans-serif;
padding:5px 8px 2px; == NEW !important */
text-decoration:none;
color:#000;
border-bottom:3px solid lime; /* == NEW !important */ } div#mainnav
a:hover,div#mainnav a:focus,div#mainnav a:active,div#mainnav a.current {
border-bottom:3px solid #bd000b;
padding-bottom:2px; /* delete */
}
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.322 / Virus Database: 267.3.3 - Release Date: 31/05/2005
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] SOLVED : Problem under MAC IE 5.0 and 5.5 (list navbardoesn't display correctly under MAC IE 5.0)
Hello Philippe, I tried this transparent border trick after your first post but finaly decided it was not worth it ... hence my SOLVED post to the list. However, since you took some of __your__ precious time to very kindly point me to this solution (and I had to include the reference of your site anyway), I took the time to implement the whole stuff ... IE 5 MAC fans can now rejoice (except that the border on hover features a 2 pixels gap on the left ;o), but hey, I can live with that) Thanks ever so much for your help again. Cheers, Jérôme Coupé International Polar Foundation Multimedia Communication -- Phone : +32 (0)2 533 97 33 -- http://www.polarfoundation.org http://www.sciencepoles.org -- Technical knowledge is not enough. One must transcend techniques so that the art becomes an artless art, growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99). -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.322 / Virus Database: 267.3.3 - Release Date: 31/05/2005 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
RE: [css-d] Problem under MAC IE 5.0 and 5.5
Hello Philippe,
Thanks for replying.
I tried what you suggested (you can see it online) but it doesn't correct
the problem.
Maybe I am doing something wrong ? Here is the code I used.
/*The following is read by IE5 MAC only
http://www.stopdesign.com/log/2004/07/06/filtering-css.html*/
/*\*//*/
div#mainnav a
{
white-space:nowrap;
width:1px;
}
/**/
Could you please have another look ?
Thanks for your help.
Cheers,
Jérôme
On 31 May 2005, at 12:39 am, jérôme coupé wrote:
The problems are the following:
* Under IE MAC 5.0 the navbar displays all funny (big gaps between
items)
The HTML
http://www.polarfoundation.org
The CSS
http://www.polarfoundation.org/css/main.css
See ###main navigation###
For (older) IE mac, adding this:
div#mainnav a {white-space:nowrap; width:1px;} ought to fix that.
Note that I have better results by setting the li to {display:inline-block}
Hide both from other browsers.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.322 / Virus Database: 267.2.0 - Release Date: 27/05/2005
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Problem under MAC IE 5.0 and 5.5
Hello list,
I recently redesigned the horisontal navbar of this website for
accessibility reasons (used Image Replacement before, have switched to
text). Since then, I have problems under IE 5 MAC, which did not occur
previously:
The problems are the following:
* Under IE MAC 5.0 the navbar displays all funny (big gaps between items)
* Under IE MAC 5.2 the navbar is ok but the text in the box underneath on
the homepage jumps a bit (reflow) when links are hovered.
It stops after you have hovered all the links once.
Can any body give me a clue about what is going on ?
Is there a way to make such navbars work in IE 5.0 and IE 5.2 without
problems (I noticed that other websites have that problem too) ?
I thought it was a clear inheritance problem but it does not seems so, since
adding clear:none; does not correct the problem.
One more thing: the method used for clearing is the easyclearing method
http://www.positioniseverything.net/easyclearing.html
The HTML
http://www.polarfoundation.org
The CSS
http://www.polarfoundation.org/css/main.css
See ###main navigation###
Here is the code:
HTML
div id=mainnav
ul class=clearfix
lia href=index.php?s=1amp;rs=homeamp;lg=en class=current
title=Accesskey [1] accesskey=1Home/a/li
lia href=index.php?s=2amp;rs=10amp;lg=en About us/a/li
lia href=index.php?s=3amp;rs=homeamp;lg=en Projects/a/li
lia href=index.php?s=4amp;rs=homeamp;lg=en News/a/li
lia href=index.php?s=5amp;rs=homeamp;fnct=upcomingamp;lg=en
Agenda/a/li
lia href=index.php?s=6amp;rs=homeamp;fnct=latestamp;lg=en
Publication/a/li
lia href=index.php?s=7amp;rs=13amp;lg=en Partners amp;
Support/a/li
/ul
/div
CSS
div#mainnav
{
width:100%;
background:url(../images/bkg_navbar.jpg) bottom left no-repeat;
}
div#mainnav ul
{
list-style:none;
margin:0 5px;
padding:0;
}
div#mainnav li
{
float:left;
background:url(../images/bkg_sep.jpg) bottom right no-repeat;
padding-right:2px;
}
div#mainnav a
{
float:left;
font-family:Arial,Verdana,sans-serif;
padding:5px 8px;
text-decoration:none;
color:#000;
}
div#mainnav a:hover,div#mainnav a:focus,div#mainnav a:active,div#mainnav
a.current
{
border-bottom:3px solid #bd000b;
padding-bottom:2px;
}
Best regard,
Jérôme Coupé
--
Technical knowledge is not enough.
One must transcend techniques so that the art becomes an artless art,
growing out of the unconscious. - Daisetsu Suzuki, J. Hyams (1979, 99).
--
No virus found in this outgoing message.
Checked by AVG Anti-Virus.
Version: 7.0.322 / Virus Database: 267.2.0 - Release Date: 27/05/2005
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
