Re: [css-d] How to embed Flash movies?

[francky]

Gate Wizard wrote:
> There is now means to embed a flash movie via CSS that I am aware of.
>   
Hi Mike,
Indeed, but css can be used to style an embedded flash file, like css 
can style almost everything.

example test page
<http://home.tiscali.nl/developerscorner/css-discuss/test-css-flash.htm>

> Sorry, but this topic is not what this CSS-Discussion list is about.
>
> peace,
> -G7W
>   
... though the css-Wiki of this list has a special page about html/css 
valid [1] embedding of external objects. ;-)

http://css-discuss.incutio.com/?page=ExternalObjects

Maybe you can find some useful tips over there (I used a link for my 
testpage).

Greetings,
francky

[1]
Also here is an on-topic relationship, I think.
If the w3c html-validator doesn't validate due to the embedding, then 
the w3c css-validator doesn't work on the url of the html of that page.
If you want to validate the css in such a case, you can:

* test the separated styles.css files by url, or
* test the separated styles.css files by upload, or
* test the css by direct input.

http://jigsaw.w3.org/css-validator/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Unordered Lists in IE7 -- Text-align

[francky]

Clarence A. Reber III wrote:
> http://www.exprescafe.com/order.php
> http://www.exprescafe.com/css/xpr18.css
>
> In IE7, the  smashes into the left side of the  eliminating the 
> list markers and the indent that it should have.  The CSS that causes 
> this is the text-align: left;command that I use in the class 
> .notcenterIn Firefox the  shows up just fine.  You eliminate the 
> .notcenter class from the  containing my , and it shows up just 
> fine but centered due to other CSS I am using.  What am I missing, or is 
> this a bug that has an easy work around?  Or, neither?
>
> Thanks!
>
>
>   
Hi Clarence,
I hope: neither! ;-)
IE6 is doing the same, - and has got the same invalid html:

html-validator tells...

<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.exprescafe.com%2Forder.php&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1>

Some ...'s don't have an embedding  and that kind of 
things - and error handling by different browsers is pretty unpredictable.

So I hope after correcting the html also IE will show the right thing. 
And if not: you always can come back!

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] (no subject)

[francky]

r paterso wrote:
> Hello,I am trying to insert a background image into URLs that link to 
> pages outside our intranet and thus when clicked open a new window. 
> The image used is the common one seen on may sites, the little 
> overlapping windows. This code:
> a.newWindow { padding-right: 14px; background: 
> url(/bcasinfo/images/productionFiles/icons/newWindow.gif) no-repeat 
> right center;}
> works fine in FF-whatever regardless, and, most of the time in IE6. 
> However it does not work in IE6 when the sentence text that comprises 
> anchor wraps to a new line. What happens is the bg image stays on the 
> first line, usually overlapping the text, even as the padding-right is 
> visible on the line below.
> The basic anchor rules have nothing unusual in their styling so I have 
> not included that code here.Any help would be appreciated.
> Thanks,R.A. Paterson
Hi,
I've got this one for you:

css :: external link with icon/image, workaround for IE 
<http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate.htm>


Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] conditional comment not seen by IE 5.5?

[francky]

[EMAIL PROTECTED] wrote:
> I may be wrong but 

Re: [css-d] IE/Win test please

[francky]

Gunlaug Sørtun wrote:
> Timothy Martens wrote:
>   
>> Live: http://66.216.113.114/bookings/
>> 
>
> Doesn't look good in IE6...
> <http://www.gunlaug.no/tos/alien/tm-ie.png>
>
> - The paragraph doesn't wrap, and goes behind the textarea.
> - IE6' auto-expansion bug is making a mess of the entire layout when
> subjected to font-resizing.
>
> regards
>   Georg
>   
...and:
OK in Opera (and OK if Opera is zooming the font-size), but wrong again 
in FF2 if font-enlarging 
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-maui-FF2.gif>
I think it are the given sizes [1] of the input text lines / text areas 
 > expanding also the table cells in which they are sleeping.
Guess a possible workaround for this could be to give the containing 
table a yellow background color and (right-side positioned) a (repeat-y) 
yellow triangle border background image.
Result at font-scaling: right side of the table will shift to the right 
together with the text fields, while there will come a "yellow jump" 
where the table is starting; I hope it will stay just under the right 
sidebar text. [2]
Validation:

* HTML-Tidy is warning for the unescaped  in the javascript on
  line 136 (must be: <\/p>).
* HTML-validator has 2 other tips.
  
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2F66.216.113.114%2Fbookings%2F>
* CSS-validator sees a negative padding somewhere.
  <http://66.216.113.114/stylesheets/grendel133i.css?1175130851>

Success and greetings,
francky

[1]
w3c definition of "size" (= amount of characters) of an input field in a 
form <http://www.w3.org/TR/html401/interact/forms.html#adef-size-INPUT>

[2]
Otherwise maybe the form part can be cut off from the "Book a Tour" part 
by making the sidebar floating, and clearing this float at the start of 
the form.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Rollovers (hovers) not working in Firefox

[francky]

~davidLaakso wrote:
> [...]
> As a strictly personal opinion, I think I'd do the rollovers with 
> text, rather than images as he has in the example.
> As it stands now, you've got a tremendous amount of code and a bunch 
> of images need to create a simple means of navigation.
>
> Best,
> ~dL
>
> PS Do you think the content text is maybe a little tiny for some folks?
>
>
Hi Kathi,
... setting the font-size in relative units will help (IE visitors can't 
change px fixed sizes).
... and an alternative for the menu can be to use a list with a 1 image 
css rollover (as well for the horizontal as for the vertical menu):

example page
<http://home.tiscali.nl/developerscorner/css-discuss/test-jakob-nav.htm>

Will save 26 small images > save 26 http-requests > save lots of 
download time too [1] :-)

Greetings,
francky

[1]
As the page is now, it needs 40 sec. to display with a 56Kbps telephone 
modem connection.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] perfect font sizes- any sample solutions?

[francky]

david wrote:
> [EMAIL PROTECTED] wrote:
>   
>> [...]
>> 
>
> Why even set a font size on the body? Let it be at whatever the visitor 
> has chosen for his or her preferred font size. Then use percentages for 
> everything else.
>   
O gentlemen and ladies,
Read the thread, read the whole thread, and read not only the thread. :-)

There are links given to good explaining pages why/when fontsizing the 
body , there are links to example pages...
Otherwise, we will circle in circles. And as we know, circles are round 
(maybe except in IE).

screenshot

<http://home.tiscali.nl/developerscorner/css-discuss/images/fontsize-thread.gif>

My 2 cts. ;-)
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Random float drops

[francky]

Francky wrote:
> [...]
> ... overflowing Google img ...
>   
Sorry, I was too fast: didn't look at earlier replies before to write. 
It was already noticed and the same solution was given too.

frnacky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Random float drops

[francky]

Richard Grevers wrote:
> We are getting random float drops on the newly redesigned
> http://www.freeparking.co.nz/hosting/
> So far IE7 and Opera have been rock-solid, but Firefox 1.5.11 has
> dropped on one PC and been ok on another, and I've seen one instance
> of dropping on IE6. (on a smaller monitor)
>
> The sizing is 69% + 3% + 27% (=99%) - how low do we need to go to
> avoid rounding errors?
>
>   
Hi Richard,
- I don't know...
On my 17" 1024x768 screen at WinXP there are no droppings in FF2 and 
IE6. If window resized, all stays fine.
But I notice in IE6, that the Google ad container is extended, and the 
bottom right corner doesn't fit.

Screenshot

<http://home.tiscali.nl/developerscorner/css-discuss/images/freeparking-IE-corner.gif>

Also FF is overflowing the Google-img at 800x600, so I think cutting off 
the unneeded white space on the left & right side of this img will help.

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Son of Suckerfish problem in IE7

[francky]

Ingo Chao schreef:
> Seona Bellamy wrote:
>   
>> Hi guys,
>>
>> I've been finding an odd problem with the Son of Suckerfish menu in IE7.
>> I've Googled it extensively, and tried implementing every IE7 fix I came
>> across whether it seemed relevant or not, but I just can't get the problem
>> to go away.
>>
>> You can see it in action if you go to the (extremely bare bones) example
>> I've thrown together here:
>> http://www.frontandback.com.au/test/test.html
>>
>> Mouse over one of the menu items, press the mouse button, but then move the
>> mouse slightly before you release the button. Now shift the mouse across the
>> rest of the top-level menu. All of the sub-menus now refuse to vanish.
>>
>> Has anyone run into this problem before? More importantly, does anyone know
>> of a way to fix it?
>> 
>
>
> It's IE6's old stuck-on-hover bug with the ingredient of a mouse click 
> as a trigger.
>
> #mainnav li:hover {background-position: 0 0}
>
> fixes it.
>
> IE6 itself does not show this stuck-on-hover phenomenon in 
> suckerfish-type menus: to process the li:hover on any element, the 
> sfHover = function() already does register an user event with 
> onmouseover and applies a new class sfhover to li. So there is no need 
> for this fix in IE6.
>
> http://www.satzansatz.de/cssd/pseudocss.html#hoverstuck
>
>
> Ingo
>   
Hi Seona,
Apart from this, I notice that (while the html is validating) the 
css-validator is reporting a I/O error and doesn't go on.
And looking at the code of the page, I see some strange double ##'s in 
the conditional comments.

Screenshot
<http://home.tiscali.nl/developerscorner/css-discuss/images/doublecross.gif>

Maybe this can have some influence too?

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Perfect font sizes across all browsers ... not solved in this way; but IE-fix is present

[francky]

Ed Seehouse wrote:
> On 3/25/07, Lee Powell <[EMAIL PROTECTED]> wrote:
>   
>> Hi all
>>
>> This weekend I've been working on a way of getting complete control
>> over font sizes without IE's text-resize shrinking text beyond all
>> readable sizes.
>> [...]
>> I'd be interested in hearing anyones results / bugs / opinions about
>> this.
>> 
>
> My opinion is that it is madness.
>   
Hi all,
Here I can half agree.
The goal of the script was: getting IE to behave as a decent browser. 
Kind of hack: that's not too bad (if it is working & usable in different 
circumstances) - agree to this intention!
But "getting complete control over font sizes" is a complete other story 
(and not targeted / accomplished by this script anyway). ;-)
> The web is not paper.
>
> It never will be paper.
>
> The web, in contrast to paper [...]
>   
This I can agree from my heart. See also: "The Graphical Designer and 
the CSS Zen Guru"; a small story about perception.

Link <http://home.tiscali.nl/developerscorner/guru-1.htm>

To come back on topic, I've made 3 test pages:

   1. Plain setting of the body in em.
   2. Pasted Lee's javascript method.
   3. The css fix as Georg and others mentioned before.

Start is here
<http://home.tiscali.nl/developerscorner/css-discuss/test-resize-plain.htm>.

To be seen in IE. - Now everybody can make an independent conclusion. :-)

Greetings,
francky

PS-1:
The default font-size ("normal" browser setting) in these pages is (a) 
the same in the 3 pages, and (b) much smaller than I should advise to 
use in real world. I've taken the size of Lee's example - just to make 
it possible to compare and to see the variation in IE deviation from the 
medium size.

PS-2:
There is a lot of material about web font sizing in the "Sizing Text" 
pages of the the css-d Wiki. <http://css-discuss.incutio.com/>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Simple numbering of headings fails on IE - why?

[francky]

Jukka K. Korpela wrote:
> On Sat, 24 Mar 2007, francky wrote:
>   
>> [...]
>> 
> [...
>> So I guess the we have to wait until IE is supporting the "counter" 
>> property; 
>> and the only way for the meantime is falling back on some DOM-scripting.
>> Or just a not automated typing of the numbers in the h2's.
>> Right?
>> 
> That pretty much summarizes it. Besides, even if automatic numbering 
> worked the simple way, it would generate numbers with a period ("42."), 
> which is not the correct numbering for headings according to ISO 2145
> ("Numbering of divisions and subdivisions in written documents"). Using 
> counters, generated content, and suppression of markers, we can create ISO 
> 2145 conformant numbering - though currently at a high cost, since IE 
> would happily follow the rule list-style-type: none and ignore all 
> attempts to create numbers with generated content. :-(
>
>   
Hi Jukka,
I made another last desperate test: going to Word, shaking well, and see 
what html is coming out. Maybe some proprietary IE code with automated 
numbering? You never know... [1]
But in vain again.

See testpage over here.

<http://home.tiscali.nl/developerscorner/css-discuss/test-h2-numbering-word.htm>

As long as you stay in Word, the auto numbering is fine, but in 
converting it disappears. :'(

Greetings,
francky

[1]
One must be pretty desperate to use Word for generating a html page, 
isn't? ;-)

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] problems with design in IE6

[francky]

Karl Bedingfield schreef:
> Hi there,
>
> I seem to be having major problems with my design in IE6 (thus far
> fine in IE7 and Firefox, though I imagine IE5.5 will have the same
> problems).
>
> I have a DIV named: #latest that has the following:
>
> /* Latest News Style
> --- */
> [...]
> Now that code should produce the following:
> http://www.eilig.co.uk/grab2.jpg but when viewed in IE6 I get this:
> http://www.eilig.co.uk/grab2.jpg
>
> I have spent about 2 hours clueless here hence my email in desperation :)
>
> Does anyone know what might be causing this?
>
>   
Hi Carl,
Assuming the second grab2.jpg has to be grab1.jpg, the it looks like IE 
needs some { position: relative; },
but as Ian said, it is difficult to say without the rest of the css and 
the exact html > need testpage!

Greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Simple numbering of headings fails on IE - why?

[francky]

Forgotten my footnote:

 From msdn: 
<http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/liststyletype.asp>

"The display:list-item property is available as of Microsoft Internet 
Explorer 6 and later."

francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Simple numbering of headings fails on IE - why?

[francky]

Jukka K. Korpela wrote:
> It occurred to me that I could number headings in CSS in a simple way, 
> like
>
> h2 { display: list-item;
>   list-style-type: decimal; }
>
> This works nicely on Firefox, but IE (both IE 6 and IE 7) uses strange 
> numbering. It seems to use numbers that reflect the position of the h2 
> element as a child of body, so the first h2 is not numbered "1." if there 
> is anything before it inside the body, and consecutive h2 elements 
> don't get consecutive numbers if there is anything between them.
>
> I'm afraid there is no cure. IE does not support counters, and here its 
> internal counter ticks wrongly. Or is it wrong? How are items supposed to 
> be numbered by default?
>
>   
Hi Jukka,
I never believe things without a testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test_h2_numbering.htm>. 
;-)
Without a counter setting...

css2.1 counters and numbering
<http://www.w3.org/TR/CSS21/generate.html#counters>

...my Firefox2 doesn't give any number except zero.
Opera9.10 is going on with the h2 numbering after other elements.
IE6 is indeed numbering all elements, also the not h2 elements.

Looking to the css2.1 specs, I cannot find a prescriptive or forbidding 
rule for numbering of elements with a { display: list-item; }.

css2.1 - Lists <http://www.w3.org/TR/CSS21/generate.html#lists>

Then browsers should be free to have an own interpretation. For me: the 
FF numbering seems to be a bug (probably FF is expecting always a 
counter setting), the IE method is not ... the top, and Opera wins.
So I guess the we have to wait until IE is supporting the "counter" 
property; and the only way for the meantime is falling back on some 
DOM-scripting.
Or just a not automated typing of the numbers in the h2's.
Right?

Greetings,
francky

btw: on "IE fails - why?" the 1 and only answer must be "because it is 
IE". ;-)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] setting height to be as big as my (or any) monitor height / browser interpretations

[francky]

Gunlaug Sørtun wrote:
> francky wrote:
>> [...]
>> *Georg's Jumping Cat Acid Test ;-) *
> [...]
> (Did I mention in an earlier thread that I don't apply such '100% tall'
> methods in real-world designs? Think I did but I'll say it now anyway  
> :-) )
Can't be said enough! ;-)
>
> [...]
>> - Everybody still here and confirming? ;-)
>
> Present... and still digesting.
(Quite happy: confirming anyway an audience of 1 on the world population.)
> [...]
> BTW: don't try my 'Jumping Cat Acid Test' in a table - CSS or HTML -
> especially if Firefox is your preference...
> http://www.gunlaug.no/tos/alien/test_07_1854.html
Euh, what about Opera? ;-)
Still a difference in refresh or reload...

screenshot table-display OP9

<http://home.tiscali.nl/developerscorner/css-discuss/images/full-height-Opera9.10%28table%29.gif>

And indeed FF and Netscape are playing their own game, but now FF is 
consequently not jumping anymore.

screenshot table-display FF2

<http://home.tiscali.nl/developerscorner/css-discuss/images/full-height-Firefox2%28table%29.gif>

screenshot table-display NS8

<http://home.tiscali.nl/developerscorner/css-discuss/images/full-height-Nestscape8.1.2%28table%29.gif>

IE6: still stable.

screenshot table-display IE6

<http://home.tiscali.nl/developerscorner/css-discuss/images/full-height-IE6%28table%29.gif>

(This time all shots on 1280x1024px)

Meow!
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] setting height to be as big as my (or any) monitor height / browser interpretations

[francky]

r window button" in the top bar right: cat *jumps 
*to last paragraph position!
(c) in the smaller window of step (b): dragging the window bottom 
upwards: cat stays at last paragraph position. (and disappears at small 
height windows)
(c-1) after disappeared cat in step (c): refreshing doesn't help, *cat 
is gone*!

screenshot (c-1)

<http://home.tiscali.nl/developerscorner/css-discuss/images/full-height-Firefox2%28c-1%29.gif>

(c-2) if cat is down after (a-1): dragging the window bottom upwards: 
cat *jumps *to last paragraph position! (and disappears at small height 
windows)
(c-3) after disappeared cat in step (c-2): refreshing doesn't help, *cat 
is gone*!

(d) in the smaller window of step (b): dragging the window bottom 
downwards: cat stays in last paragraph position.
(d-1) if cat is down after (a-1): dragging the window bottom downwards: 
cat *jumps *up to last paragraph position!

(e-1) refreshing after step (c) or (d) at visible cat: as (a-1), cat 
*jumping *to bottom.
(e-2) reloading after step (c) or (d) at visible cat: cat stays in last 
paragraph position or *jumps *to last paragraph position.
(f) dragging a window side to the right or left: cat stays in last 
paragraph position or *jumps *to last paragraph position.

REM: if FF cache is disabled, then reloading is acting as refreshing.

- Everybody still here and confirming? ;-)
Conclusion so far (guess what): browsers are different.
Anyway, it seems I have to study more maths about combinations, 
permutations and multi-dimensional matrices (tables!), and probably a 
lot more about probability computing!  :-)

Greetings,
francky

PS: Help! - Don't conclude that IE is a cool browser...







__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Total newby question - linked/external css vs embedded

[francky]

Charles Marcus wrote:
> Hello,
> [...]
> Obviously, one of the main benefits I'm hoping to achieve is to learn 
> web development right the first time, as opposed to learning a bunch of 
> bad habits that I later have to unlearn.
>
> :)
>
> Best regards,
>
> Charles
> __
>   
Hi Charles,
Wish more people should have that attitude  -  why do I think 
immediately about IE's bad browser habits? :-)
- Apart from all good books and sites already mentioned, I've grabbed my 
practical experiences [= errors ;-) ] in a 1 page list of

Golden rules of css


Some "Golden links" for more reading are included.
Maybe you can have a look and see if you can use it now or later.

Much success,
franvky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with a:hover

[francky]

Hi John,
~davidLaakso wrote:
> John M Shepard wrote:
>   
>> I am working on this page with all the css on same page but having a
>> difficult time getting the ³a:hover² to work. I am trying to get the color
>> to change slightly when the mouse hovers over.
>>
>> Here¹s the mockup site:
>> http://pushforpd.earthpedal.com/
>>
>> Can anybody help?  
>>
>> John Shepard
>>   
>> 
> You have a page that is entirely made of images. There is nothing to 
> hover. Try setting the navigation as a very simple vertical list with 
> text links.
>
>  Regards,
> ~dL
>
>   
Yes, or you can choose for a "one for all" image solution. In a combined 
background image you can put all link images and all hover state images, 
- then with background positioning of list items you can select each 
image part and set it in the right position.

A bunch of buttons
<http://home.tiscali.nl/developerscorner/port-hole/bunchbuttons.htm>

Other example is over here
<http://home.tiscali.nl/developerscorner/css-discuss/test-jakob-nav.htm>

In the 2nd example a horizontal list is used (with items of different 
width).
If you want to read more about background positioning:

The Porthole Theory
<http://home.tiscali.nl/developerscorner/port-hole/porthole.htm>

If you like to see several [eh, some more than "several" ;-) ] other 
list solutions:

the List Tricks page <http://css-discuss.incutio.com/?page=ListTricks>

of the css discuss Wiki <http://css-discuss.incutio.com/>

Success and greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problem with a:hover

[francky]

John M Shepard schreef:
> I am working on this page with all the css on same page but having a
> difficult time getting the ³a:hover² to work. I am trying to get the color
> to change slightly when the mouse hovers over.
>
> Here¹s the mockup site:
> http://pushforpd.earthpedal.com/
>
> Can anybody help?  
>
> John Shepard
>
>   
Hi John,
The html-validator has 2 errors 
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fpushforpd.earthpedal.com%2F>
 
(and html-Tidy some warnings too).
The css-validator says:

* 2   #outer_wrap  invalid number : position 100% no
  position value: 100%
* 28 a:hover invalid number : background Lexical error at
  line 28, column 14. Encountered: " " (32), after : "#"
  url(images/button_over.gif) no repeat;
* 29 a:hover invalid number : background Parse error -
  Unrecognized }

Does it help to repair these?

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE7 special code

[francky]

Pelle wrote:
> Hi all.
>
> I have this in my CSS
> * html .clearing {display:none;}
>
> i NEED this to imp+lement in IE7 too, but NOT in Ffx or so.
> What is the bug code for this?
> In pure .css file cause it is external, no javascript or [if lte IE 7] 
> works in this case :(
>
> Regards Pelle
>
>   
Hi Pelle,
Did you try:

.clearing {
 display: block !important; 
 display: none;
 }

Don't know what IE7 will play with that...

But: *why* the clearing has to be canceled for IE?
If you have a testpage to see, maybe somebody can suggest a workaround.

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] 2 issues with my page, please advice

[francky]

hepabolu schreef:
> Hello,
>
> I have this page:
> http://people.apache.org/~hepabolu/final6.html
>
> and there are 2 issues left:
>
> 1. (most important) when the browser is resized to 800x600 the right 
> green block and the blue block drop below the 2 blocks on the left and 
> the "news" section creeps in gap between the blue and the grey block.
>
> I've been tossing and turning this but I can't get the news section to 
> remain below the blocks in all browser sizes without creating a huge 
> white gap.
>
> Any ideas?
> [...]
>   
Hi Helma,
Maybe making 4  vertical blocks of them instead of 4 besides each other 
in a (too) narrow space?
Or 3 green vertical + 1 blue horizontal block? Or 2x2? 
<http://home.tiscali.nl/developerscorner/css-discuss/images/cocoon.png>
In this way (with clearing between) they expand together, and no big 
gaps can occur.

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] strange li strong formatting in Firefox

[francky]

Timothy Martens schreef:
> Hi all,
>
> This is one I haven't come across before, If you look at the "Day of  
> Tour" section at the bottom of the page http://66.216.113.114/details/
>
> the stuff inside strong tags in the list items looks like it has  
> negative left padding/margin or some funky letter/word spacing. We're  
> railisfying the site and little has changed in the CSS. Maybe  
> something in saffold.css needs over-riding?
>
> Proper formatting on live site: http://www.mauimountaincruisers.com/ 
> details/
>
> Thanks,
>
> T
>   
Hi Timothy,
I don't see any difference - is the problem solved in the meantime?

Greetings,
francky

btw:
The html-validator is pointing to a  too much.
The css-validator has some small remarks too.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help me with this mess

[francky]

Mário Gamito schreef:
> Hi Francky,
>
> Thank you for your answer.
>
>   
>>html-validator says...
>>
>> <http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gamito.org%2FtopContainer.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1>
>>  
>> 
> Yes, i know it's shitty, but that's his problem.
> I'm just trying to set the page layout straight.
> I'm a Linux system's administrator, not a web designer.
>   
Aii! The problem is: if the html is not validating, then the whole page 
layout doesn't work > all tries to get it straight will be in vain...
So it's not only his problem, now it is your problem too. ;-(
>   
>> But if the page is repaired and 1 or more problems is/are still there: 
>> don't hesitate to come back!
>> 
> I just don't know how to repair it :(
>
> Already tried a lot of things, but nothing.
>   
... confirming the validation problems (some IE only style rules are in 
the html). Tips are included in the html-validator messages.
For the layout: I guess canceling all absolute positions and replacing 
them by floats will do good.
I'm sorry not to have more time at the moment, maybe others can give 
some help.

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help me with this mess

[francky]

Mário Gamito schreef:
> Hi,
>
> Sorry for the kind of lame question.
>
> A colleague of mine is doing a website with CSS, but it has several 
> glitches that i can't fix:
>
> 1) The "Top Label" blue header resizes if the browse resizes too;
>
> 2) The pink "MENU" left column doesn't go until the end of the page;
>
> 3) The yellow "BOTTOM label" is obviously to be at the end of the page;
>
> http://www.gamito.org/topContainer.html
>
> Sorry for the trouble.
>
> Any help would be appreciated.
>
> Warm Regards,
> Mário Gamito
>
>   
Hi Mário,
No trouble at all: 2 basic tools did the work. ;-)
Maybe you can give your colleague the tip to check the html-validator or 
html-Tidy first:

html-validator says...

<http://validator.w3.org/check?uri=http%3A%2F%2Fwww.gamito.org%2FtopContainer.html&charset=%28detect+automatically%29&doctype=Inline&ss=1&verbose=1>

Then you can advise him/her to have in mind (for the next time):

Golden Rule #7
<http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm#r7>

Oh, the css-validator has a tip too:

non-existing css-property

<http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A%2F%2Fwww.gamito.org%2FtopContainer.css>

But if the page is repaired and 1 or more problems is/are still there: 
don't hesitate to come back!

Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] An odd IE 7 bug with :first-letter, link, and border

[francky]

Jukka K. Korpela wrote:
> I noticed that on IE 7 (both in standards mode and in quirks mode),
> a border set for a paragraph affects its first child also, when the child 
> appears at the very start of the paragraph content and when there is a 
> setting for p:first-letter (any setting). This sounds absurd, but if you 
> don't believe me, please look at the following page on IE 7:
>
> http://www.cs.tut.fi/~jkorpela/test/border.html
> [...]
>   
Hi Jukka,
I cannot see IE7 at the moment, but I'm afraid IE6 is not much better.

screenshot IE6 under WinXP

<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-IE-firstletter.gif>

It is not time saving and not elegant, but a wrapper around each  is 
calling IE back from buggyness...

testpage

<http://home.tiscali.nl/developerscorner/css-discuss/test-IE-firstletter.html>

Maybe there is better way out...
See also the link in the testpage to more IE:first-letter weirdness in 
Ingo Chao's "pseudo-pages".

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Positioning & Margins Problem

[francky]

[EMAIL PROTECTED] wrote:
> Hi,
> [...]
> Here is the code from the  situation:
> (header code)
> [...]
>
> ...
>
> The resulting XHTML:
>
> [...]
>
> ..
>
> So, as you can see, it's a header with explicitly positioned  
> elements.  The problem I run into is that every  time I try to put in  
> "billboard", I have to give it a huge negative margin.
>
> Why is this?  What am I doing wrong?
>
> Also, how would this rule apply when you want to position a  
> container, which will have its own positioned child elements?
>
> Thanks for your help!
> DC
Hi DC,
Do you have a link to a real page? That will make the conversation a bit 
easier! :-)
If I paste your code in a document directly, it is showing the typo's above:

.body {..}

instead of

 body {...}

and the not existing class

 

and will give this testpage, which isn't font scaling proof 
<http://home.tiscali.nl/developerscorner/css-discuss/test-dc-typos.htm>

If I correct the code, and add something to center FF, we get this 
testpage. <http://home.tiscali.nl/developerscorner/css-discuss/test-dc.htm>
So the question is: what is the exact question? ;-)

Greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Feedback needed for Drop-Down Menu

[francky]

THOMAS ROGERS wrote:
> Thanks Francky,
>
> I changed it, but it made no difference?
>
> Tom  
>
> -Original Message-
> Yes, typo.  ;-)
> Link is:  http://www.ncmhcsc.org/menu/csshover.htc
> must be:  http://www.ncmhcso.org/menu/csshover.htc
>   
Hi Tom,
Ah, then more investigations are needed...
But you're a step forwards: now the first sublists are working @hover in 
IE6 under WinXP. :-)

To get the li li ul's working, I think you should have a look at Peter 
Nederlof's site.

http://www.xs4all.nl/~peterned/csshover.html
<http://www.xs4all.nl/%7Epeterned/csshover.html>

I see he has an updated version of the htc-file. Also see his notes, 
especially #1:

"Changes (updated: february 06, 2006)
NOTE 1: The rules for HTCs have changed a bit in Windows XP SP2.
Users with SP2 installed may not see it working correctly, because
webservers have to send htc files with the mime-type set to
text/x-component. For more info on this, check Aldo's blog."

If visited the response headers of your htc-file (FF webdevelopers 
toolbar > Information > View Response Headers), the result is telling: 
"Content-Type: text/plain".
I'm not used to configure servers, and this is moving out of :focus css. 
Maybe somebody can help you offlist, if you can't manage.

Back to css!
The positioning of the lists is wrong though, but that sounds as "normal 
IE css troubles". If you turn on (tmp) the hover state in the css, you 
can easy see what is going wrong (and easy change); then with some IE 
bug hunting IE should have to perform better, I hope.

Success,
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Feedback needed for Drop-Down Menu

[francky]

Yes, typo.  ;-)

Link is:  http://www.ncmhcsc.org/menu/csshover.htc

must be:  http://www.ncmhcso.org/menu/csshover.htc


Success,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Feedback needed for Drop-Down Menu

[francky]

Tom Rogers wrote:
> [...] 
> I've got it looking pretty much the way I would like it -
> http://www.ncmhcso.org/sperling/test2.htm, but again I can't seem to get it
> to function in IE6 on the pc.  There must be some setting that I changed,
> because it's pretty much the same thing that Tedd has in his example which
> does work in IE6.
Hi Tom,
It seems that the csshover.htc file is not in the path: 
"http://www.ncmhcsc.org/menu/csshover.htc"; > 404!

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Saving pages to disc for editing?

[francky]

Barney Carroll wrote:
>
> CSSfly looks like a lot of fun - the ability to edit the xhtml is an 
> incredible tool. Until now I've always used Firefox's Web Developer 
> toolbar extension <https://addons.mozilla.org/firefox/60/>, which is 
> absolutely fantastic. In a similar way it allows you to view the CSS 
> files in tabs, and edit them - with on-the-fly refreshing of the edited 
> styles.
> [...]
>   
btw:
In version 1.1.3 of Chris Pederick's Webdeveloper also an "edit html" 
option is added (toolbar > Miscellaneous > Edit Html), though it has 
some limitations [1]
The css edit sidebar and the html edit sidebar can be used 
simultaneously! :-)

Greetings,
francky

[1]
Only the html inside the  tag is aboard, which means:
(a) nothing in the  can be changed on the fly, and
(b) an ID or class of the  element itself (if any) cannot be 
changed either.

PS:
A downloaded source code with added http://www.faraway.com/directory/root of page .../" /> is 
taking also most of the needed ingredients. Again CC links to give 
source by hand, and sometimes a javascript link.



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] align link in a paragraph

[francky]

jeffrey morin wrote:
>> When you set a link to display: block, it becomes a block element. Block
>> elements by default take on the full width of their containing element. So
>> now,
>> the text within the link is free to slide across to the right.
>> 
> but when you put text-align : right on a paragraph it works. and
> that text may not take up the entire width of the block right?
>
> sorry if these are simple questions. i'm not quite grasping it
Ah, the thread was going on while I made my example/question! The 
display:block solution is easier! [1] :-)
Simple explanation: a paragraph is an element with a block character by 
default, a link isn't. Giving a link a block character by css, it is 
taking a line like a paragraph. And if something has a block character, 
you can set the text-align property.

See screenshot.

<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-link-block.gif>

More about block formatting can be found in the css specs:

    http://www.w3.org/TR/CSS21/visuren.html#q5

Greetings,
francky

[1]
I guess I simulated the block character > with display:block the browser 
is doing the work; better!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] align link in a paragraph

[francky]

jeffrey morin wrote:
> On 3/15/07, Daniel Beardsmore <[EMAIL PROTECTED]> wrote:
>> jeffrey morin wrote:
>>> hello everyone,
>>> i have a box with 4 paragraphs in it. one paragraph has nothing but 
>>> a link which is 2 words long. my question is can i apply tex-align: 
>>> right to that link somehow without adding another class in my code.
>>>
>>> i tried #divBox p a:link {text-align: right} and i tried #divBox a 
>>> {text-align: right} neither of those worked though. does anyone have 
>>> a solution
>> [...]
>> You'll want to put the text-align property on the container of 
>> whatever you want to align. In this case, on the paragraph. Then, 
>> everything within the paragraph will be right-aligned.
> so it sounds like there is no way around adding a class to that 
> paragraph then? 
Hi Jeffrey,
Instead of text-align, maybe you can float: do you mean something like this?

testpage
<http://home.tiscali.nl/developerscorner/css-discuss/link_right-here.htm>

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] relatively positioned float with background is stuck (IE6)

[francky]

Ingo Chao wrote:
> Gunlaug Sørtun wrote:
>   
>> Is it possible that you can use this reduced version in your 'real
>> world' layout...
>> <http://www.gunlaug.no/tos/alien/test_07_3690.html>  ?
>>
>> Would save you from having extra divs, and looks rock steady in my IE6.
>>
>> regards
>> Georg
>> 
>
> Thanks Georg and francky!
>
> I am already using left:percentage value to position the columns
>
> http://www.satzansatz.de/cssd/eqhcol.html
> css and comments inside.
>
> (Basically, I am combining the footer stick alt with the equal heights 
> column approach of One true layout, with the modification that the 
> columns' padding excess is running from bottom to top, starting from the 
> footer. With this attempt, I can omit the overflow disaster in Gecko's).
>
> The additional margin is a small compensation for rounding errors. This 
> effect is stuck in IE<7, depending on the initial window size. After 
> resizing the window, the compensation kicks in and there is no gap 
> visible anymore in IE between the right and the center column (so far I 
> can see).
>
> If anyone has an idea how to make IE behave ... I am stuck.
>
> Ingo
>   
Huh? IE6 is shifting the whole right column 2px to the right too.
But what about adding the center column background color to the #page to 
fix the gap visually? Then only the close readers should see the shifting...

Ok, test IE gap hiding
<http://home.tiscali.nl/developerscorner/css-discuss/test-eqhcol.html>

Surprising IE again! Also the 2px shift to right is gone: resize window, 
refresh, reload, drag hor. window-size (and any combination I could 
imagine): all good (IE6 under XP)! :-)

Oops! Terrible omission - forgotten the right path to the background 
images...
So:

Second try
<http://home.tiscali.nl/developerscorner/css-discuss/test-eqhcol-bgimg.html>

Mmm, gap still gone, but 2px right shift is back...
Struggle goes on: IE still has to be defeated! ;-)
New idea: hang the bg-img (and bg color) of the right column in the #page?

Third try
<http://home.tiscali.nl/developerscorner/css-discuss/test-eqhcol-new.html>

For IE6 under XP: hé! :-)

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] relatively positioned float with background is stuck (IE6)

[francky]

Gunlaug Sørtun schreef:
> Ingo Chao wrote:
>
>   
>>>> http://www.satzansatz.de/cssd/prbgbug.html
>>>> 
>
>   
>> This fix does solve for the example, probably not for the original 
>> problem, but I will try, thank you very much. It's a column, its
>> height is not easy to determine, and the proposed inner div would
>> have to have the same height ...
>> 
>
>   
>> Another div for all columns just to compensate for a 1 pix rounding 
>> problem ... sigh.
>> 
>
> Is it possible that you can use this reduced version in your 'real
> world' layout...
> <http://www.gunlaug.no/tos/alien/test_07_3690.html>  ?
>
> Would save you from having extra divs, and looks rock steady in my IE6.
>
> regards
>   Georg
>   
That's a stable release over here too! :-)
In the meantime also an instable illustrating experiment for the 
IE-documentation ;-) 
<http://home.tiscali.nl/developerscorner/css-discuss/test-IE-percentages.html>

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] relatively positioned float with background is stuck (IE6)

[francky]

Ingo Chao wrote:
> This float is relatively positioned, it has a percentage width, and it 
> should move to the right due to a left margin.
>
> .c {
>   position: relative; 
>   float: left;
>   display: inline;
>   width: 50%;
>   margin-left: 100px;
>   background: gray url(bg.gif) no-repeat 0 0;
>   }
>
> 
>   
>    
>   
> 
>
> The problem with IE<7 is that it does not move, initially.
>
> http://www.satzansatz.de/cssd/prbgbug.html
>
> To make it move, the window has to be resized a little.
>
> The bug does not occur if the float has no background image attached.
>
> But I need the bg-img, the float, the pos.relative, the margin shift, 
> the percentage width (and display:inline is added to prevent the doubled 
> margin bug.)
>
> Can anyone help me, point me to a bug description, or to a fix maybe?
>
> Thanks,
>
> Ingo
>   
Hi Ingo,
Yes, all hasLayout tricks failed; IE is always in for a joke! ;-)
Seems something like the opposite of the doubled margin bug, or a 
peekaboo without a link to hover...
I found as a fix: isolate the problem, i.e. pulling the background out 
of the class="c" div, and pushing it in an inner div.

testpage
<http://home.tiscali.nl/developerscorner/css-discuss/test-prbgbug.html>

Hope you can apply this wrapper in your case, and no other IE troubles 
will appear.

Greetings,
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] List Items

[francky]

Gunlaug Sørtun schreef:
> Ledvina, Barbara [ED] wrote:
>   
>> How can I modify the amount of space between the bullet in an 
>> unordered list and the actual text?
>> 
>
> Set suitable paddings on the ul and the li...
> <http://www.gunlaug.no/tos/alien/test_07_3670.html>
>
> regards
>   Georg
>   
Ah, too late to send. Well, then more of the same 
<http://home.tiscali.nl/developerscorner/css-discuss/test-bulletspace.html>

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera border bug

[francky]

Gunlaug Sørtun wrote:
> Philippe Wittenbergh wrote:
>   
>> Gah, I missed one sentence there
>> 
>> '[Border-width doesn't allow percentages in CSS2; should we allow  
>> percentages (of the containing block's width) in CSS3?]'
>> 
>> Written in red, guess that is why I couldn't see it. :p
>> 
>
> Probably :-)
>
> So, it looks like Opera treats that percentage-width border in 
> accordance with the not yet recommended CSS3.
> We at least can't call it an Opera bug then, but rather wait till other 
> browsers either pick up on it or W3C change that part in CSS3.
>
>   Georg
>   
According to this, and for the time being, the css-validator with option 
css3 is saying "yes" to the question:

'[... should we allow percentages (of the containing block's width)
in CSS3?]'

w3c css-3 validating of testpage 
<http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fhome.tiscali.nl%2Fdeveloperscorner%2Fcss-discuss%2Ftest-operadots.html&warning=2&profile=css3&usermedium=all>

Molly the Cat will like it: Opera ahead for the future! ;-)
francky

btw: maybe next question for w3c:
[css2 doesn't say what is the definition of a 'dot' - should we allow 
UA's to have their own definition like now (FF and Opera: a dot is a 
square dot; IE: a dot is a round dot) ?] screenshot 
<http://home.tiscali.nl/developerscorner/css-discuss/images/just-a-dot.gif> 
:-)


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Opera border bug

[francky]

Arnold Jonathan E. wrote:
> I'm working on my first elastic-layout site and Opera is giving me
> something I've never seen before. In my  declarations, I've added
> border-bottom: 1px dotted {color} style. FF, IE 6/7, and Mozilla are
> rendering correctly, but Opera is generating these huge colored blocks
> underneath my h1's. 
>
> Does switching between em and px cause problems in Opera? The page is a
> protected area, but I've set-up the CSS here,
> http://the1912gallery.ehc.edu/testcss.css.
>
> Thanks,
>
> Jed 
Hi Jed,
You have given also a border-width of 80%, and that is giving different 
interpretations by Opera and other browsers.
I think the css2.1 specs aren't very clear at this point. Also the 
ccs-validator is hesitating, and sends different signals: validating as 
well as invalidating!
I put the main stuff of your css in a testpage, and:

*

  see: testpage with some notes 
<http://home.tiscali.nl/developerscorner/css-discuss/test-operadots.html>

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE6 being its usual awkward self

[francky]

Ian Young wrote:
> Just completing layout for new site. Looking ok in FF/IE7/Opera
> As could be expected IE6 not behaving.
> Menu starts half way down the div
>
> Test page at:
> http://www.iyesolutions.co.uk/templates/11-03-07/test.html
> [...]
>   
Hi Ian,


Greetings,
francky

btw: some hints of the css-validator.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Scrollbar in IE ... Causes horizontal scroll bar

[francky]

Beauchamp Michael J CONT NPRI wrote:
> Hi Francky,
>
> Thanks for your help. Unfortunately, I'm blocked from seeing your website and 
> have no public server myself to post to. However, knowing that this is not 
> common and probably not a browser problem is a big help. Now I can assume 
> that there is something in my code that is causing the problem. I'll take 
> your advice and look for padding issues. 
>
> Thanks again,
>
> Mike
>
>   
> Francky wrote:
> [...]
> [1] Not yet results of Browsershots at this moment 
> <http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-long.htm#success>
> [2] The D-Zero Method
> <http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm#r13>
> [3] PIE: Mystery Bug
> <http://www.positioniseverything.net/articles/mys-bug.html>
>   
Hi Mike,
In the meantime the Browsershots 
<http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-long.htm#success>
are finished, and I can see on them that, as expected, no one of the 
IE's (IE5.1, IE5.5, IE6, IE7) is showing a hor. scrollbar for the long page.

Success!
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problems with custom image-bullets (IE of course)

[francky]

Sarah McCall wrote:
> [...]
> Can I just ask what kind of code the '[if lte IE 6] ... [endif]' is? 
> Even though it works, I like to know the details of how, 
Well, it is not html, not css and not a programming language - it's a 
part of Microsoft's IE language ...
The MSIE language is just IE only, and IMO it shouldn't be used unless 
to correct IE bugs. ;-)
How the Conditional Comments (the name for the '[if lte IE 6] ... 
[endif]' stuff) are working, is explained by Microsoft in a MSDN page:

* About Conditional Comments
  
<http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/overview/ccomment_ovw.asp>

... though their examples could be a bit updated:

* test :: Microsoft's IE CC information  :-)
  
<http://home.tiscali.nl/developerscorner/css-discuss/test-IE-cc-information.htm>

Besides the link of Jukka, lots of practical suggestions about filtering 
on Georg's page:

* CSS sledgehammer...#2 <http://www.gunlaug.no/contents/wd_1_02_01.html>

> [...]
> and what other programming languages I need to think about learning to 
> enable me to make the fullest use of CSS.
> [...]
>
In my opinion, css and (x)html should be enough; added can be some 
knowledge about javascript for some (dynamical) features and tricks.

But for the fullest use of CSS a kind of "bug destroying language"  :-)  
is developed, which is no language at all, but a series of hacks and 
workarounds, gathered from all over the world, to force that browsers 
(and especially IE) are doing what should be expected according to the 
w3c css specs. For this, I can recommend 'Position Is Everything - 
modern browser bugs explained in detail':

* PIE, startpage <http://www.positioniseverything.net/>
* PIE, IE troubles <http://www.positioniseverything.net/explorer.html>

Greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vertical Scrollbar in IE ... Causes horizontal scrollbar

[francky]

Beauchamp Michael J CONT NPRI wrote:
> Hi,
>
> This is probably a FAQ but I can't find the answer...
>
> I have a problem in IE. I have body overflow set to auto. The width of the 
> document is all percentage and never scrolls horizontally.  However, there is 
> usually a vertical scroll.  The problem is that in IE, when the vertical 
> scrollbar appears, the width of the page stays the same (in terms on actual 
> screen width in pixels), creating a need for horizontal scrolling.  It's as 
> if IE doesn't notice that the scrollbars are using up some of the horizontal 
> space so it never resizes to compensate.
>
> Can anyone tell me how to solve this?  At the moment I have overflow-y:scroll 
> set so the scrollbar is just always there.  I guess it works... sort of. 
>
> [unfortunately, I can't post or link to the code.]
>
> Thanks in advance for any help or pointers to help.
>   
Hi Michael,
Strange ... normally IE is *always* making space for the vertical 
scrollbar (up to IE6 under WinXP; in IE6 a "transparent" vertical 
scrollbar, if not needed). Is it IE7 and/or Vista which is giving your 
results?
I made 2 testpages, a short and a long one, both with body { width: 
100%; overflow: auto; }, and no horizontal scrollbar is appearing in IE.

* Short page
  
<http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-short.htm>
* Long page
  
<http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-long.htm>

Is the long page showing the hor. scrollbar at your side? [1]
If not, maybe there is in the css of the content of the longer page 
something like an element with a width in % and a padding-left and/or 
padding-right as well?
Could be also some IE expanding bug - hard to say without code...

Maybe you can isolate the problem in a "minimal error page" [2] [3], 
replace the remaining content with Lorem's and 1-color images, and send 
us a link to that?

Greetings,
francky

[1] Not yet results of Browsershots at this moment 
<http://browsershots.org/website/http://home.tiscali.nl/developerscorner/css-discuss/test-IEoverflow-scrollbars-long.htm#success>
[2] The D-Zero Method 
<http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm#r13>
[3] PIE: Mystery Bug 
<http://www.positioniseverything.net/articles/mys-bug.html>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Problems with custom image-bullets (IE of course)

[francky]

Jukka K. Korpela wrote:
> [...]
>> And fundamentally where do I put the:
>>
>> 
>>
>> Does it go in the HTML document  near the list itself?
>> 
>
> It goes into the  part of your HTML document, in a place where a 
> 

Re: [css-d] Boxed ullist

[francky]

Pelle wrote:
> Hi all!
>
> I KNOW i recently visited an page with several exaples making an  and 
> ul list to became an small liten boxmeny, like the image on 
> www.dummy.nu/sidemenu.gif
>
> Anyone that knows example like this?
> regards Pelle
>
> __
>   
Hi Pelle,

* Listamatic <http://css.maxdesign.com.au/listamatic/>?
  <http://css.maxdesign.com.au/listamatic/>
* List-O-Matic ?
  <http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/>

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Lining up text

[francky]

[EMAIL PROTECTED] schreef:
>  [...]
>   I've tried divs and paragraphs and spans; inline and float:right, and I
>  am absolutely sure it's obvious, but unfortunately not to me.
>  [...]
>  
>  Any ideas?
>   
Hi Mark,
Checkpoint 1: tabular data? Yes, so table allowed. ;-)
First idea: isn't it possible to add a 3rd table column for the 
directions, instead of styling something on the right side of the input?
Otherwise maybe a margin-left (with the width of the input) for the 
direction element can be applied, in addition to a float-left of the input?

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background-image at end of link not displaying properly when there's a line break in IE

[francky]

Allison Bloodworth wrote:
> Yes, [...]
>
> I noticed that in IE 7 on your site
> (http://home.tiscali.nl/developerscorner/nederdev/test-link-icon6.htm) the
> last word which has the  tags around it appears slightly lower than the
> rest of the link text preceding it. 
Hi Allison,
Correct! IE7 is displaying the last word of an iconized external link 
1px lower.
> Is this another IE bug? It doesn't happen in Firefox. 
Yes, FF is alright in this example. Is it a bug? Yes and no (not more 
than in IE6):

* This solution is good working in IE6, for I used the * html hack
  for IE.
* I made this page at a moment I couldn't check IE7. - And I had a
  bit of hope that IE7 would do it better than IE6...
* Later I tested in IE7, and saw IE7 was doing the same as IE6. So I
  updated my English version with a Conditional Comment for all
  IE´s, including IE7.
* ... but didn´t update my Dutch page yet.

Point is, that FF, Opera and IE where reacting different. To get Opera 
alright, I had to add a line to correct Opera. Happily this did not 
influence FF. But IE (which was right before I made the Opera fix) was 
reacting wrong on the Opera fix! So I had to make an IE only fix to 
correct the Opera fix for IE (are you still there? ;-) ). The whole 
operation was like pushing on an air-bed: pushing down the one browser 
was lifting the others. :-)
> I'm wondering if using the span tag would solve this problem?
>   

* ... so the use of a  instead of a  will not make any
  difference (css still the same). Only solution is to use the CC to
  catch IE7. - If IE8 is coming, we have to see again...

I just updated my Dutch version 
http://home.tiscali.nl/developerscorner/nederdev/test-link-icon6.htm
with the CC and now IE7 has to obey too (in the last "Lorem" paragraph) 
- I´ll check that tomorrow.
To compare: I renamed the old version in 
http://home.tiscali.nl/developerscorner/nederdev/test-link-icon6-ori.htm

Conclusion: the updated English version 
http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate.htm
is the one with the best description and performance.
It´s less complicating to maintain 1 site in 1 language! :-)

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Faux Columns not scaling to the bottom of page

[francky]

~davidLaakso wrote:
> francky wrote:
>   
>> Anyway, I found after some experiments [2] that:
>>
>> * html body { margin-bottom: -23px; }
>>
>> is helping, together with in the html (IE only) 2 times a non-breaking 
>> space just before the end of the last wrapper div's:
>>
>>  
>>  
>>  
>>  
>>  
>>  
>>  
>>  
>>  
>>
>> See testpage 
>> <http://home.tiscali.nl/developerscorner/css-discuss/test_santini_IEbottomgap.html>
>>
>> Should IE7 need kinda this too (with a Cond.Comm.)?
>>   
>> 
> RE: XP IE/7.0
> Please see screenshot (lower right corner).
> <http://chelseacreekstudio.com/ca/cssd/fr.gif>
>   
Aha,
As you reported before that IE7 was o.k. with Georg's basic page, then 
apparently the cc's have to exclude IE7:




    






new testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test_santini_IEbottomgap-2.html>
 
Better now?

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] nested list formatting IE Win

[francky]

Timothy Martens schreef:
> Hi All,
>
> Trying to get my nested list to play nicely in IE Win. Was using  
> first-child, but no IE support? Added a class or two thinking it  
> would work but no dice.
>
> How it should look:
> http://www.kaupoart.com/collections/paintings/usque-dum-vivam-et- 
> ultra/subnav.png
>
> CSS link:
> http://www.kaupoart.com/css/screen.css
>
> HTML link:
> http://www.kaupoart.com/collections/paintings/usque-dum-vivam-et-ultra/
>
> CSS:
> [...]
>
> HTML:
>
> 
>Collections  
>

>   Paintings
>
>
>   
>  http://home.tiscali.nl/developerscorner/css-discuss/usque.htm>

(Probably the text-decoration styles of the 2nd/3rd levels have to be 
adapted now).

Success and greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Faux Columns not scaling to the bottom of page

[francky]

Oops, I see I've send the wrong screenshot (wrong url but same page) > 
is corrected now.
- My last question about IE7 can be canceled, as David checked IE7 in 
the meantime, & alright.

francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Faux Columns not scaling to the bottom of page

[francky]

Gunlaug Sørtun wrote:
> Ok, so let's see how far a bit of "blind hacking" of IE7 leads us.
> Same test-page needs checking in IE7...
>   
>>> <http://www.gunlaug.no/tos/alien/san/test_07_3350.html>
>>> CSS: <http://www.gunlaug.no/tos/alien/san/main000D.css>
>>>   
>
>   
IE7 I can't check either, but (just as ~David's screenshot for IE7; 
http://www.chelseacreekstudio.com/ca/georg/gs.gif) I notice in IE6 under XP 
that there is a white bottom gap of 23px (all font-sizes, at 1024x768 
resolution).

Screenshot

<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-georgs-santini.png>

Maybe there is a simple explanation / fix [1], but I have no idea why 
this is happening. Couldn't find a 23px anywhere in the css (or maybe it 
is the result of 2 other distances)...
Anyway, I found after some experiments [2] that:

* html body { margin-bottom: -23px; }

is helping, together with in the html (IE only) 2 times a non-breaking 
space just before the end of the last wrapper div's:











See testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test_santini_IEbottomgap.html>

Should IE7 need kinda this too (with a Cond.Comm.)?

Greetings,
francky

[1] Among the other bugs: "The well-known 23px IE mystery gap"? ;-)
[2] For me, "shoot in the air and try at random" is still a good method 
to find antidotes for IE (after browsing in PIE). :-)




__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] table height problem: FF vs. Safari

[francky]

Mark Lundquist wrote:
> Hi,
>
> (Note, I'm still trying to pull this design together in compliant 
> browsers, and I have dared not look at it Exploder yet...)
>
> See the 3 colored block areas here?:
>
>   http://dev.hearthstone.wd-2.net/
>
> [...]
> nested tables
> [...]
>
>
> Help!  How do I fix this?
>
> Thanks a lot,
> — Mark, the Frustrated

Hi Mark,
First, a glance at the html-validator is never bad for the desired 
display in our browsers:

* html-validator says
  
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fdev.hearthstone.wd-2.net%2F>

Then, as I tried to say some days ago, 
<http://archivist.incutio.com/viewlist/css-discuss/85503>
in table design, I think you can make a 3x2 table, with sliced images. 
Top parts can be a bottom-right positioned background-img in the txt 
columns, bottom parts (clickable!) can be right-aligned foreground 
images in the bottom row.

* Like this
  
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-marktable.gif>

That's the theory. Now reality:

* 3 Columns with background images on the bottom
  <http://home.tiscali.nl/developerscorner/css-discuss/test-marktable.htm>

FF2 is satisfied, Opera9 as well, IE6 has a small 1px background colored 
line between top and bottom parts of the table (grmpff!), and
Saphari is happy too, according to Browsershots 
<http://browsershots.org/screenshots/f52c17680f4839ff1727d229b8a6b344/>

... but I have the idea that all must be (cross browser) possible in 
pure css too, so maybe a Part II  will follow...

Success and greetings,
francky

btw:
Now I see George has made an alternative too, didn't study it yet. - The 
mail arrived some later as it was send; I guess the list server is doing 
that deliberately, so more people are busy with css. ;-)

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] custom 'search' text box

[francky]

Web Developer wrote:
> wow thanks Holly! Too bad it wasnt done with all css, would have been
> impressive; kinda cheating throwing the image on there :).
>
> Ari
Hi Ari,
I haven't links to tutorials either, but maybe inspiration can be given 
by some:

* Search Form experiments with css
  <http://home.tiscali.nl/developerscorner/css-discuss/test-searchform.htm>

Examples #1 - #3 without images... ;-)

Success and greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] site/CSS check - Win IE6/7

[francky]

Timothy Martens schreef:
> Developing on a non-intel Mac. Can someone have a look? Maybe a  
> screen capture or two?
>
> Working file:
> http://www.kaupoart.com/collections/paintings/usque-dum-vivam-et-ultra/
>
> CSS:
> http://www.kaupoart.com//css/screen.css
>
> Safari/Firefox view:
> http://www.kaupoart.com/collections/paintings/usque-dum-vivam-et- 
> ultra/mockup_v1.7.1.jpg
>
> Thank you!
Hi Timothy,

* Here is IE6.
  
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-kaupo.jpg>

  IE6 doesn't have problems with font-scaling or other resolutions. :-)
* And here some others
  <http://browsershots.org/screenshots/eb747ffaa8ad29b5789149e11212c280/>.


Cheers,
francky

btw-1: At browsershots.org you can test it yourself.
btw-2: Too high condition of the visitor's eye power is asked, according 
to the color contrast analyser 
<http://juicystudio.com/services/colourcontrast.php>


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] firefox border when i click over a link: alternatives

[francky]

Jukka K. Korpela wrote:
> On Fri, 2 Mar 2007, Rob Wilmshurst wrote:
> [...]
>> I personally wouldn't do this though; as part of the browser's default
>> behaviour the user is expecting it.  That outline indicates that the
>> link is currently active.  It may be annoying when clicking, but if one
>> is tabbing through the document then it's the only thing to show what's
>> currently in focus. [...]
>> 
> I couldn't agree more.
>   
Hi Jean-Claude,
Nor can I: it is a real good accessibility feature. People who don't 
have the abilities to use a mouse, can use the Tab key to track the 
links in a page. The outline dots are the "mouse pointer" for them: the 
only way to see on which link they are, and where they have to click (= 
Enter key) to visit the link.

One thing you can do to get a less striking presentation, is to style 
the outline dots just around the img, and not with a bottom margin in 
the text area, as in your testpage. The bottom margin is caused by the 
fact that in general an image is placed vertically on the same height as 
the letters of the line in question, but also with adding the needed 
space for characters with something under the line, like p,y or j.
You can check this (in not-IE) by enlarging the font-size: the bottom 
distance of the dotted outline border will grow and shrink according to 
the scaling factor.

To get rid of this, you can:
1. Add a vertical position for the images in the links:

* screenshot with adapted css
  
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-studiomaci.png>

Then the outline is just around the img. - But with dark images it is 
hard to see.

2. Alternative (better accessible) is in your case to extend the dotted 
outline to the whole clicking area. Voilà:

* testpage
  <http://home.tiscali.nl/developerscorner/css-discuss/test-tab-dancing.htm>

3. An other alternative for better visibility of the outline dots is to 
style the img with a 1px white border (or 1px padding with white 
background-color). Then there is some distance between img and dots, 
whatever the colors of the img are.

CSS is giving choices! :-)

Greetings,
francky

btw: In the meantime I've set the font-size in em instead of in the 
fixed px unit. Now also scalable for IE-visitors who like/need to 
enlarge the fonts.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Simple Rounded corners not rounding.. need help setting up javascript correctly.

[francky]

Noah Learner wrote:
> Hey all,
>
> The page concerned is at http://www.bartlettsfarm.com/new/inseason.html.  I
> know that I need to set it up differently so the onload function works with
> the different scripts running at the same time.  Any help would be greatly
> appreciated.
>
> Noah

Hi Noah,
Maybe first repairing the html-validation errors is helping somewhat 
already?

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] css-d Digest, Vol 51, Issue 39

[francky]

[EMAIL PROTECTED] wrote:
> I am having trouble getting MSIE to display my Joomla menu properly (i.e., 
> the way it looks in FireFox). MSIE is adding extra space
> above the separators.
>
> Below is the relevant snippet of menu HTML, followed by the related CSS.  The 
> actual site is at www.AdamsStreet.info .  Can anybody
> help me understand why this is happening?  Thanks.
Hi Jordan,
I've this one for you ...

* testpage
  <http://home.tiscali.nl/developerscorner/css-discuss/test-adamsstreet.htm>

...but:
maybe a good idea to check the html-validator:

* 78 html-errors in the page
  
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.adamsstreet.info%2FJoomla%2Findex.php%3Foption%3Dcom_content%26task%3Dview%26id%3D547%26Itemid%3D140>

The different error-handling of browsers is making things pretty 
unpredictable...

I hope that the issues in Vol1 to Vol50, and Issues 1 to 38 in Vol51 are 
solved already (and not too much issues > #39) ! ;-)
Success and greetings,
francky

btw-1:
In my testpage corrected some html-errors, still 57 remaining.

btw-2:
The fixed heights of the "rows" are breaking the layout if the font-size 
is scaled in the visitor's browser (if not IE).

btw-3:
The fixed font-size will cause that IE-visitors cannot enlarge the font, 
which is rather inaccessible, especially with a 1280x1024 plus monitor.

btw-4:
IE is forgetting "me" in "Remember me"; dunno why.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background-image at end of link not displaying properly when there's a line break in IE

[francky]

Allison Bloodworth wrote:
> Hi, 
>
> I am having a problem where a background-image at end of an  link is not
> displaying properly in IE when it contains a line break. See
> http://technology.berkeley.edu/msvista/, and after links like "Minimum
> Security Standards," "significant hardware investment," and "UC Berkeley
> BearShare Windows Vista site" there should be a little "offsite" icon,
> similar to the one wikipedia uses. 
> [...]
>   
Hi Allison,
(That was quite a year ago, when we talked about the B. News site. :-)  )
I didn't remark this question before, but probably you have seen the 
POOF! thread in the meantime:

* POOF! start here
  <http://archivist.incutio.com/viewlist/css-discuss/85416>

* and the updated workaround here
  
<http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate.htm>

Success and greetings!
francky

btw:
As you can see in the right column halfway down in the Dutch version 
<http://home.tiscali.nl/developerscorner/nederdev/test-link-icon6.htm>,
IE is normally placing the icons somewhere in the vertical middle of the 
amount of lines which the link is taking...

- In Wikipedia is is going wrong in IE too, but mostly you don't see it 
because the links are only 1 or 2 words, and the probability of breaking 
in 2 lines is not so big then.
- Example of things going wrong in IE is also the small link column in:

* http://www.spip.net/en





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] overriding link styles

[francky]

Timothy Martens schreef:
> Hi trying to get my hovered images inside #container and  #main to  
> not have any background color as the normal the normal text links.  
> The hover for the images bottom border is working but the backgound  
> color is showing up. How can I override it? Can it be done without  
> extraneous classes?
Hi Timothy,

* See testpage
  <http://home.tiscali.nl/developerscorner/css-discuss/test-imglink.htm>. 
  :-)

Greetings,
francky

btw: if interested in some variants on text-decoration:

* Split image and text hover colors for one link
  
<http://home.tiscali.nl/developerscorner/css-discuss/img-and-text-hovering.htm>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text Indent Not Working in Firefox

[francky]

~davidLaakso wrote:
> .dateline {/*text-indent: 15px;*/ margin-left:15px; }
>
>   
Of course! :-)
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Two Problems

[francky]

Francky wrote:
[...]

Correction!
Maybe also (if less space in the bottom of the columns is desired) 
spliting the images: partially a background-img in the bottom-right of 
each column, and partially bg-img top-right in the new row with the links.

And success with IE!
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Two Problems

[francky]

Mark Lundquist wrote:
> Hi,
>
> I just started this today...
>
>   http://dev.hearthstone.wd-2.net/
>
> and I'm seeing two problems (note, as always I'm starting w/ just FF & 
> Safari — I'll deal w/ the IE carnage later!)
>
> 1) The footer content has a higher z-index than the gray mask that runs 
> across it... so why is the gray mask actually stacking above the 
> content?
>
>   
Hi Mark,
Though no answer to the question, ;-)

#footer-content {
position: absolute;
width: 100%;
margin: 0 auto;
z-index: 2;
}

> 2) The colored corner box at the bottom right of the main content pane. 
>   Actually, this is a train wreck of three elements all stacked in the 
> same place.  The three corner boxes have colors like the three columns, 
> and each one is *supposed* to be snuggled into the bottom right corner 
> its like-colored column container.  The columns are done with a  
> (no flames please... this scenario is my only non-semantic use of 
>  :-), and I think the reason the absolute position of the corner 
> pieces isn't working has to do with the fact that the effect of 
> "position: relative" on table cells is undefined (per the spec), so the 
> browsers just ignore it.  That's a bummer... virtually the only use I 
> ever make of "position: relative" is to establish containment, and it 
> seems like it wouldn't have hurt for the spec to at least define that 
> effect.  Anyway... does anybody know of an alternative?  It seems like 
> a catch-22... I need the table cells to get full-height columns, but 
> then the table cells kill absolute positioning!
>
> thx a lot :-),
>
> —ml—
Table-thinking (how was it again?): what about a second row in the table 
with background-colors of the columns, and the images + "next" link in it?

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Text Indent Not Working in Firefox

[francky]

Chris Akins schreef:
> Can't figure out what is preventing the text-indent from taking effect in
> Firefox.  Something actually works in IE, but not Firefox - that's a new one
> on me. :-)
>
> Fairly simple, valid CSS here:
>
> http://www.springfieldmo.gov/webapps/news/css/citytalk.css
>
> Page URL, also validated:
>
> http://www.springfieldmo.gov/webapps/news/citytalk.jsp
>
> Thanks for any insight.
>
> Chris
>   
Hi Chris,
The indent seems to be applied on the (right floated; ) , which 
isn't giving any effect if the span is the first txt in the line.
If the span and the normal txt are turned around, and the span lifted by 
a neg. margin-top, FF is doing well.re
Hope IE too (not tested).

Screenshot



Greetings,
frabcky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Strange Results with IE Conditional Comments

[francky]

Dejan Kozina wrote:
> Hi.
> Unless I misunderstood you badly, you're expecting IE to read 
> IE6_default.css INSTEAD of default.css. Well, it won't.
> IE will happily load any linked or included stylesheet. The CCs will 
> only prevent other browsers to load the one inside the comment.
> You should link the default stylesheet first, and then use the 
> 'commented' stylesheet only for correcting the values of the first one 
> (as it comes later in the document it will overwrite the previous values).
>
> djn
Hi Figgy,
I can agree with Dejan. - Without looking for the doubles in the IE 
stylesheet, I have changed for IE6:

.logo { margin: -103px 0 0 5px; position: relative; }
.topnav-container { margin: -15px 0 0 200px; position: relative; }
.shadow { margin: -94px 0 0 0px; position: relative; }

then the IE6 positioning is going better (IE7 I can't test now).

* See testpage
  
<http://home.tiscali.nl/developerscorner/css-discuss/test-advantixIE6.htm>.

O, I see you are changing things in the stylesheets, so I hope the 
testpage is still working when you see it. :-)

Remaining  *big* problem: a fixed (and small) font-size is used.

* It is impossible to enlarge the font/size for the visitors with IE
  as browser. - If seen in a 1280x1024 resolution monitor, the text
  is not readable.
* Visitors with other browsers can scale the font-size, but then the
  layout will break (text doesn't fit in the backgrounds).

So I think you should consider to build a more liquid design (layout), 
and to style the font-sizes in relative units (as em), so IE-users can 
enlarge/access the site too.

Success & greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] POOF! Background image on link goes away in IE!

[francky]

[EMAIL PROTECTED] wrote:
>   Excellent! I used  tags rather than , but the effect was the same. 
> [...]
> ---
>   -Original Message-
>  From: [EMAIL PROTECTED]
>  [...]
>   CSS workaround for external link with small icon 
> <http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconEN.htm> 
>  
>  
Hi all,
One day later and tested in IE7. Appears to give the same results as 
IE6. Means:

UPDATE
The * html hack has to be replaced by a general Conditional Comment for 
IE, which covers also IE7 (* html doesn't).

I already updated the page/article, but this moment my isp is not 
willing to upload the updated file with the same name. Strange: also the 
old one cannot be deleted by ftp. Hope in a few days.
A new file is coming through though:

http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconENupdate.htm

Cheers,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] question

[francky]

Philippe Coq wrote:
> Hi,
> I have a problem with this sample test.
> I have the following html :
> 
> ABCDE FGHIJK
> abcde fghijk
>
> With the following .css file:
> a:link { color: blue;text-decoration: none;}
> a:visited {color: green;text-decoration: none;}
> a:hover {
> color: red;
> text-decoration: none;
> background-color: #ecf5ff;
> }
> a:active {color: black;text-decoration: none;}
> h2 {color: red;}
>
> I wonder why I lost color attribute in the string fghijk in the case 
> ...
> while in the case  there is no problem.
> How must I code the .css file?
> Thanks in advance,
> regards,
Hi Philippe,
I guess the css can be the same, but the html in the 2nd line has to be 
changed. Now the  is nested in the ..., which is forbidden.

* See testpage
  <http://home.tiscali.nl/developerscorner/css-discuss/test-span-code.htm>

You can do:
abcde fghijk
or maybe:
abcde fghijk

We don't know what your intention is with the code and the (styling of 
the) .
So if this is not what you want, do you have a link to a testpage to 
illustrate your question?

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FW: Adjacent siblings

[francky]

Bill Hely schreef:
> OK, my boo-boo, I had the Firefox tab set to use the IE rendering
> engine. Once switched back it works fine.
>
> However, without IE6 support that CSS formatting trick is no use
> to me.
>
> Anyone got any ideas about another (IE6-compatible) way to apply
> formatting to an element, conditional upon the nature of the
> preceding sibling?
>
> TIA
>  - Bill
Hi Bill,
If a separate use of the h3 is not needed, maybe a negative 
margin-bottom for the h3?

p  { padding: 0; margin: 10px 0; }
h3 { padding: 0; margin: 20px 0 -10px 0; }

Greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Vanishing divs in IE6

[francky]

Paul Galatis schreef:
> Hi,
>
> I am developing a page that includes a small piece of
> javascript that make div appear or dissapear. This
> works perfectly on this page when 'info' is clicked
> next to each song:
> http://www.kateluckhille.com/index.php/music/
>
> But when I change the layout in another section:
> http://www.kateluckhille.com/index.php/soundfactory/
> the songs dissapear as one hovers over them in IE6.
>
> Does anyone have any ideas? I have removed the
> Javascript  element and it still happens so I assume
> it is the css. Any help would be greatly appreciated.
>
> Kind regards.
>
> I am Paul

Hi Paul,
1. The Music page.
First I couldn't see at all the 'info' links to click on. Had to go in 
the source code to see where they must be. Back to screen, and found 
them! But on my CRT monitor these dark colored text links on the dark 
background are hardly visible. This is not only due to the too small 
contrast in the darks [1], but extra because of the very bright white of 
the top img, which is so brilliant that all details in brightness in the 
dark disappear. Scrolling upwards and hiding the top img is a bit 
better, but still almost impossible to see the Info links. Especially if 
the visitor doesn't know there are Info links!

2. The Soundfactory page.
Here the Info tags are missing in the html at the moment - also FF 
doesn't display anything...
Should be good to check the html-validator too: 5 missing 's found.

- If repaired, we can have a look what is going on in IE. Or maybe the 
problem is solved automatically! :-)

Success,
francky

[1]
See Colour Contrast Analyser 
<http://juicystudio.com/services/colourcontrast.php>
Result is far below usability (not to speak about accessibility!), see 
screenshot results 
<http://home.tiscali.nl/developerscorner/css-discuss/images/test-colorcontrast.gif>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] POOF! Background image on link goes away in IE!

[francky]

Ingo Chao wrote:
> [EMAIL PROTECTED] wrote:
>   
>> [...] issue at http://runwithmcp.org/poof.html
>> [...] in IE6 if the link wraps around an end-of-line, the background image 
>> vanishes! 
>> [...] I've tried several IE voodoo-hacks ...
>> [...]
>> 
> There is no CSS-only fix, and it is not a bug. The positioning of the 
> background-image on inline elements is just not defined in CSS2.1 [1].
>
> IE seems to follow the 'bounding-box' model for the 'background-break' 
> property (CSS3) [2].
>
> Ingo
>
> [1]http://www.satzansatz.de/cssd/wrappinglinkbg.html
> [2] http://www.w3.org/TR/2005/WD-css3-background-20050216/#background-break
>   
Hi Mark,
Some months ago I was Voodoo-ing IE as well for this problem, and found 
a dirty trick.

*

  CSS workaround for external link with small icon 
<http://home.tiscali.nl/developerscorner/css-discuss/test-link-iconEN.htm>

Can be used without scripting (css/html only): most handy if a new 
site/page (fresh html) is started. Or otherwise some work by hand, to 
change html (all external links have to be adapted). Small site, small 
problem; big amount of external links, big problem. ;-)
And who knows, maybe also good starting point for a script builder to 
implement on existing sites.

Hope you can use some of this,
Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Background color on form w/ fieldset

[francky]

Ingo Chao wrote:
> Unicorn Design wrote:
>   
>> http://www.excellenterprisesllc.com/contact.php
>> 
> The problem is demoized here [1].
>
> I think a fix could be to pull the legend with a negative margin, apply 
> position:relative to fix the clipping, and to apply position:relative to 
> the fieldset in order to fix the positioning of the legend itself. Sigh.
>
> In your Conditional Comment:
>   
> #email fieldset { position:relative; }
> #email legend { position:relative; margin-top: -1em; }
>
> And remove the first  before the legend.
>
> Ingo
>
> [1] 
> http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
>
>   
Hi Denise,
Yes, a good fix (hear, hear, Ingo). - In practice it turns out to be a 
margin-top of -1.55em in this case. And the legend is even maintaining 
it's position in IE at different resolutions: pff! ;-)
Addendum: also a bit extra margin-bottom for the #email legend appears 
to be needed for IE, to compensate the upwards shifting.
So besides the #email fieldset { P:R; } our never satisfied glutton 
wants to eat in the Cond.Comm.:

#email legend { 
position:relative;
margin-top: -1.55em;
margin-bottom: 10px;
}
  

Tested in IE6 under WinXP: testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test-legend-in-form.htm>

Greetings,
francky

btw:
Filling the empty  with a

 

 is pushing the Submit Button under the text area in not-IE.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE7 text size bug? (Resolved?)

[francky]

~davidLaakso wrote:
> Arlen Walker wrote:
>   
>> I won't trouble the list with details of the problems, as most of  
>> them were js-related.
>>
>>
>> Arlen
>> 
> re: your uri : < http://www.whc2008.org/ >
> I'd say the text-size issue that you wrote about in (xp) ie/6 and ie/7 
> is resolved on my end. If it is of concern, there's a little clipping of 
> the "hot box" text in ie/6.0.
> See: <http://chelseacreekstudio.com/ca/cssd/a.gif>
> Best,
> ~dL
>
>   
Hi Arlen,
IE horror goes on! ;-)
Can it be the { margin-right: -5%; } of the #sidebar?

Cheers,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] FooterStickAlt with a background color

[francky]

Rakesh Pai schreef:
> So, I've created a page using the exact code from footerStickAlt
> http://www.themaninblue.com/writing/perspective/2005/08/29/ except
> I've given a background to the HTML. Unfortunately, the background
> applies only to the page to the extent of the viewport height. Which
> means that if the page is taller than the viewport, the area below the
> viewport will not have the background applied.
>
> Any solutions?
>   
Hi Rakesh,
In the FooterStickAlt example [1] I see the background-color and 
background-img aren't attached to the HTML, but to the BODY styles. Is 
that it?

Success and greetings,
francky

[1]
http://www.themaninblue.com/experiment/footerStickAlt/good_example_long.htm

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE7 text size bug?

[francky]

Gunlaug Sørtun wrote:
> Arlen Walker wrote:
>   
>> Site: http://www.whc2008.org/
>> 
>
> Observations on a slow connection.
> In IE6: page loads ok with pretty normal text, but once everything is in
> place _all_ text switches to a size I need glasses to read - 10px I think.
> Same happens on reloads.
>
> Some javascript that overrides font-size after load?
>
> regards
>   Georg
>   
Hi Arlen,
DSL connection here - and page coming normal on IE6 at WinXP. No strange 
after burning effects. At refresh or reload: nothing strange happening.
But no effect if clicking the Preferences > LargerText or > SmallerText 
either.
FF and Opera also not reacting (script enabled!).
So I'm suspecting the script too.
Maybe (for the modern DOM browsers) a more simple and risk less css/js 
font-size switcher can be used?

* 
http://home.tiscali.nl/developerscorner/css-discuss/simple-fontsize-switcher.html

[for javascript reactions = offtopic > please mail offlist]

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling legend in fieldset

[francky]

Austin Harris wrote:
> [...]
> <http://art-dept.org/test/standardform.html>
> [...]
>
>   
Hi Austin,
This kind of pages we like! :-)
> I seem to be spending more and more time on forms so found it useful to get 
> the stuff in one place, maybe I'll start getting a "library" of these things 
> together at some point...
>
> Austin
... and more easy to realize (in the meantime): adding this example to 
the css Wiki page about FormElements:
http://css-discuss.incutio.com/?page=FormElements
Idea?

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Jumping buttons in IE6 fixed position hack. - update

[francky]

... And some more no-style friendly (and searchbot friendly), a beginning:

* updated testpage
  
<http://home.tiscali.nl/developerscorner/css-discuss/test-universal_index6-update.html>

Good luck,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Jumping buttons in IE6 fixed position hack. - alternative

[francky]

Gunlaug Sørtun schreef:
> Christopher Blake wrote:
>
>   
>> http://domain1255110.sites.fasthosts.com/uni/index6.html   html
>> 
>
>   
>> I have been playing around with this hack and it seems like my 
>> earlier attempts were over complicating things. This is the revised 
>> version but I am still experiencing problems with the rollover images
>>  (see original post *). And I think that there is a little problem at
>>  the bottom too.
>> 
>
> You're still over complicating things - not just for old IE/win. Makes
> it pretty hard to fix things without rewriting everything, so the
> following is more like "a conditional patch"...
> <http://www.gunlaug.no/tos/alien/test_3010/test_3010.html>
> ...which is something I don't like creating.
>
> All relevant IE/win styles in page-head, and *note* that I have altered
> the source-code.
>
> Fixes for "jumping buttons" and "containing floats" are included and 
> commented.
>
> IE6 (and older) will produce an "endless scrollbar" on windows shorter
> than 640px. That can't be helped unless both stylesheets and parts of
> the source-code are rewritten, and I don't have time for that. The fixed
> sidebar is pretty much ruined in all browsers at such short windows
> anyway. It's too tall.
>
> regards
>   Georg
>   
Hi Christopher,
I agree: in this model the left column is not visible at 1024x768 
resolution. It is not "a little problem at the bottom". Seems the only 
way is to paste an extra scrollbar for the left column (frame-like), but 
I think that is ugly and not good usable/accessible, apart from the 
cross browser issues. If you're fighting a deadline, I should forget 
spending time to try to get this layout working, and quickly develop an 
easy working new one...

To compensate for the bad news, I made an alternative testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test-universal_index6.html>.

Just scrolling straight up & down - I guess nobody will miss the fixed 
sidebar. Solutions for enabling clientside font scaling of the menu (now 
breaking the layout) are included, also some adapted images.

Success and greetings,
francky

btw: fixed the html-validation errors (an overcomplete  and some 
smaller things). Even when in a hurry: testing is life insurance! ;-)

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Tabs not displaying right in IE

[francky]

Brian Jones schreef:
> Hi,
>
> I have created a tab navigation menu and it displays fine in Firefox,
> but in IE there is a gap between the tabs and the tabbox. I've tried
> playing around with it but I still can't get it to display correctly
> in both browsers. Any help would be greatly appreciated.
>
> Here's the html
> http://astro.temple.edu/~tua14115/tabs.html
>
>
> Here's the css
> http://astro.temple.edu/~tua14115/css/tabs.css
>
> Thanx
Hi Brian,
The margin-top of 10px for the #tabbox is not good for IE: can be 
deleted. Then give "HasLayout" [1] for IE with { height: 1%;} in the 
#tabbox. No more problem. :-)
Some other things:

* The fixed line-height (13px) of the #tab is pulverizing the
  ability for good font-scaling by the visitor; can be deleted.
* Setting a font-family for the tabs will enable a better
  positioning of the tab texts (by fine tuning of the margins /
  paddings).
* Enlarging the background images for the tabs is also needed for
  clientside font-scaling.
* Adding bg colors for the tabs is satisfying the css-validator
  warnings, and enabling visitors with disabled background images to
  see the tabs as well.

See fresh testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test-astro_tabs.html>

Success and greetings,
francky

[1]
http://www.satzansatz.de/cssd/onhavinglayout.html

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Hover issue

[francky]

Kenoli Oleari wrote:
> This now my code in the stylesheet and I am still getting a background 
> on hover:
>
> a {
> color: #FF;
> font-size: small;
> }
> a:active {color: #339933; }
>
> a:visited {color: #006633; }
>
> a:hover {
> color: #003366;
> background-color: #00}
>
> a.button:hover { background-color: none; }
>
Hi Kenoli,
Oops, focused on the cascade order, I didn't notice before; but it has 
to be:

a.button:hover { background-color: transparent; }

or

a.button:hover { background: none; }

for

a.button:hover { background-color: none; }

is not valid css. A color "none" doesn't exist! :-)
If {background: none;}is set, then all properties are set to their 
initial values (which is transparent for a background-color).
See: css-specs, background-properties 
<http://www.w3.org/TR/CSS21/colors.html#background-properties>

Greetings,
francky
 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Styling legend in fieldset

[francky]

Eystein Alnaes wrote:
>> Legend
>>
>> legend span {
>> display: block;
>> add styles...
>> }
>>
>> 
> This doesn't work with width: 100% though, only fixed width.
Hi Eystein,
I didn't look again what I did, but maybe you can use some of this one:

* 
http://home.tiscali.nl/developerscorner/css-discuss/test-tibbits_form-legend-6.htm

Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Hover issue

[francky]

Kenoli Oleari schreef:
> I have a hover style for links that are attached to text.  I also  
> have some links that utilize images and want no hover effect in these  
> cases.  The class I give to the links with images is ".button".
>
> The following code does not work to stop the hover effect.  How do I  
> do this?
>
> a:hover.button { background-color: none; }
>
> a:active { color: #339933; }
>
> a:visited { color: #006633; }
>
> a:hover {
>   color: #003366;
>   background-color: #00
>   }
>
> Thanks,
>
> --Kenoli
>
>   
Hi Kenoli,
Did you try:

a.button:hover { background-color: none; }

or a simple (without a class for the img):

a:hover img { background-color: none; }

?
See also: SelectOracle <http://gallery.theopalgroup.com/selectoracle/>

Success and greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Setting an element based on its child

[francky]

Kenny Graham wrote:
>> Does this include it not needing to be IE compliant? The reason I need it is
>> to fix a margin issue in a template I've inherited, and IE is currently
>> behaving itself quite nicely (I suspect they built for IE in the first
>> place). Firefox, however, is not. *sigh*
>> 
>
> If anything had a nonstandard way of doing something like this, it'd
> probably be IE, not the others.  The only options I can think of are
> recoding the site (adding classes to elements that have children with
> id="par2"), or using PHP or javascript to automate the adding of those
> classes.

Hi Seona,
If it is only for an IE-correction, then maybe there is one more option: 
changing the css in that way, that FF and others are giving a good 
result. And then correcting IE by means of a conditional comment.
In general it sounds like the site is build upside down (for IE, giving 
problems with FF). If this can be turned around again, then it's 
possible there are solutions (hacks, workarounds) for the resulting IE 
problems. :-)
No guarantee: all will depend on the details!
If you isolate and upload the "margin fix" css in a testpage, maybe the 
thinking power of this list can give some more help.

Success and greetings,
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Newbie CSS callibeth website questions

[francky]

Beth Lee wrote:
> [...]
> This test site page is here: http://www.callibeth.com/dev2/index.htm
> and the css is here: http://www.callibeth.com/dev2/css/main.css
> [...]
>
> 3. The three main boxes are not centered. Don't know why. What's the best
> way to address that?
> And help with these problems, or any other problems I don't see yet, would
> be much appreciated.
>   
Hi Beth,
Another one: I guess it's just a typo:

(col1  + margin-right)= 168px + 50px
(col2  + margin-right)= 168px + 50px
(col3)= 168px

all together .: width: 604px 

  

while you gave the wrapper:

#indexcols { width: 632px;}

causing the right hand side (because of the floating-left of all 
columns) has 28px too much empty space.
Change to:

#indexcols { width: 604px;}
  

and problem solved. :-)

Success & greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] (no subject > image as border)

[francky]

Mark Lundquist schreef:
> On Feb 16, 2007, at 10:14 AM, jeffrey morin wrote:
>
>   
>> is there a way to set an image as a border?
>> 
>
> No... but if the box you're bordering is fixed-width, you can combine a 
> full-width background that contains the two side rails with 
> :before/:after rules to give the top and bottom images.
>   
Hi Jeffrey.
In principle: Yes... (even in IE, even liquid):

* 
http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-08a.htm

... but the results will depend of the image you want to show. For a 
liquid design the (background repeated) images must be able to slide 
without shifting a part of the img. Maybe there are problems with the 
image you intend (and maybe also a solution for that). If problems, do 
you have a link to the img or to a testpage?

Success and greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] First timer looking for css review

[francky]

Mike Buettner wrote:
> I did a bunch more reading (and associated confusion) with this result:
>
> Site:  http://scottriggs.com/2007/index.html
>
> CSS: http://scottriggs.com/2007/css.html
>
> 1.  I used Francky's suggestion:
>
> * The 3 small images [...]
> And it worked great.
>
> 2. Don't really understand this comment though:
>
> * Sometimes you are using a CLASS and an ID with the same name. For  
> the most elements, I found in the stylesheet only the ID-references  
> (with the # before the name). For elements with only the ID-styles  
> the CLASSes in the html can be missed.
>   
Hi Mike,
For instance I see in the html:

 

In the stylesheet I see only the ID mentioned:

 #bgTopbar { ... }

If in addition a CLASS with this name was defined, it should have read:

 .bgTopbar { ... }

But as this CLASS doesn't exist in the css stylesheet, the reference to 
it can be missed in the html. So what is needed to show the Topbar 
styles, is only:

 


>
> 3. Back to having trouble in IE Mac 5.2 with the page not centering  
> in browser.
>   
I've no Mac aboard, and no solution for this. Maybe some of the other 
list members can check? ;-)
>
> 4. My biggest issue is not being able to get the left and right  
> columns to expand down (with more content) and pull the other column  
> with it:
>
> http://scottriggs.com/2007/indexv2.html
>
> CSS and HTML validated.
>
> Thanks,
> Mike
In your construction, the Scott Riggs image (rtcol_pichome.jpg) is 
connected to the bottom of the right column. If the left column is 
longer, this bottom is not the bottom of the combination, and a white 
gap under it (towards the footer bar) is showed.

What you can do, is to connect the image to a bottom line div under both 
columns (i.e. in the footer bar), and then working upwards. This can be 
done by isolating this div from the normal flow (with a float: right), 
and giving this div a negative margin-top of the amount of the height of 
the image. Then it is pushed upwards. :-)

Remaining problem is, that the man's head can go so far upstairs, that 
the image part over there is covering the under parts of the 3 images 
(or something else) in the right column. This will occur if the left 
column is "too small".
To avoid this, we can give the right column an empty space under the 
content, which is some larger in height as the img. We can do this by 
adding a div at the end of the right column, with only a height in it.

Here is a testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test-indexv2.html>.

If you browse with something else than IE, now you can see the img 
moving on the fly (and staying fixed to the bottom), if you change the 
font-size in the browser. [1]

Greetings and success,
francky

[1] ... and you'll see some other things to correct. ;-)



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Placing images in corners

[francky]

Dave M G wrote:
> [...]
> What I want to do is place images into the corners of my DIV, so I 
> thought I could use the same techniques that get used for rounded 
> corners with images.
> [...]
>
> I have a feeling this kind of information is out there, but it's hard to 
> find because of the overwhelming popularity of solutions to rounded corners.
>
> Is there a simple tutorial for corner images that would be more suited 
> to my purpose?
>
> Thank you for any advice.
>   
Hi Dave,
Maybe what you are looking for is more or less like this example? 
<http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-07a.htm>
A mini-tutorial is inside the stylesheet. :-)

Greetings,
francky


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Design repository less fancy than CSS Zen Garden

[francky]

Hi Martin,
Maybe the designs / links in the css-discuss Wiki page about CSS layouts 
<http://css-discuss.incutio.com/?page=CssLayouts>
can give some inspiration?

Success in deciding  which one! :-)
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] help with internet explorer oddity..

[francky]

Si wrote:
> [...]
> The dynamic pages are nearly working but still getting conflicts are:
>
> http://www.find4.eu/events/event_list.php 
>
> - the main content of the table
> seems to be breaking the design of the 2column layout
> [...]
>   

Hi Si,
With IE6 or FF2 under WinXP I don't see a breaking design (also fine at 
800x600px resolution; also fine at font-scaling). Repaired already, or 
didn't I look in the right way?
But I see the html-validator has some suggestions.
The page seems to be rather HTML 4.01 Transitional (14 errors) than 
|XHTML 1.0 Transitional (47 errors).

Success and greetings,
francky
|
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] XForms styling Submit button

[francky]

Kelemen Viktor wrote:
> Dear All!
>
> I would write css code to a XForms submit button to redefine its looking.
> I'm working with FF and its XForms plugin.
>
> Ive tried these but nothing happend
>
> 1. xf|submit { background: transparent url(...) repeat scroll;}
> 2. xf|submit .xf-value { ... }
>
> How could I do it?
>
> Thanks in advance
>  Viktor
Hi Viktor,
I don't know anything about XForms, but on the w3c specs pages [1] I 
found the code is described as:

xforms|group { display: table; }

So maybe:

xforms|submit { background: transparent url(...) repeat scroll;}
xforms|submit .xf-value { ... }
  

Just a guess!
francky

[1]
See "F.3 Examples" in 
http://www.w3.org/TR/2006/REC-xforms-20060314/sliceF.html#id160979
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] First timer looking for css review

[francky]

Mike Buettner wrote:
> Thanks for the help Francky.
>" * You have put the IE-only-styles in the body of the document; they
>   should go to the head part. Notice: the html-validator doesn't
>   notice this, because these styles are placed (correctly) in IE
>   conditional comments, which are just normal comments / unseen by
>   other browsers and the validator as well (REM: what is inside a CC
>   is not validated!)."
>
> I'm a little behind the learning curve on -only- styles. I take it you 
> are talking about this:
>
> 
> 
> 
>
> Can this go anywhere in the head?
> Mike
Yes Mike,
on condition these lines are following the normal style declarations / 
links to stylesheet(s). Otherwise the normal styles later on are 
overruling the IE-specialties, and there is no correction for IE.
In fact it are normal style declarations in the head (only in very 
compact notation), but because of the wrapping comment construction the 
styles are only readable for IE.
It is easier to recognize in the more extended notation:

 

... and so on.
To be complete, you can add the type-property:

 

Re: [css-d] Print CSS renders mystery elements in IE

[francky]

Gunlaug Sørtun wrote:
>> http://bssh.test.textmatters.com/sandbox/printtest
>> 
> [...]
> There are a few errors in the source-code...
> [...]
> There are also a few - pretty serious - errors in those stylesheets...
> [...]
> Generally: my experience is that _completely separate_ screen and print
> styles are handled better by all browsers. Overriding one with the other
> seems to result in slightly different print-outs across browser-land.
> Others may disagree in my "separate media"[1] approach though.
>
> regards
>   Georg
>
> [1]http://www.gunlaug.no/contents/wd_1_04.html
>   
Hi again,
After sending my reply I discovered this one had fallen into the mailbox 
in the meantime. Always glad to see some convergent hints, and glad to 
see I've learned from the knowledge of Georg as well! ;-)
Thanks, list & members!
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Print CSS renders mystery elements in IE

[francky]

Barney Carroll wrote:
> francky wrote:
>   
>> Hi Barney,
>> It's difficult to analyze, if we don't have some practical material 
>> (maybe you've send it in an attachment, but they are deleted in this list).
>> Do you have a link?
>> 
>
> [...]
>
> http://bssh.test.textmatters.com/sandbox/printtest
>
> Recap: URL is the page with non-print media CSS turned off and print 
> media CSS made universal. Using IE it looks fine in the browser, 
> previews for print /terrible/ (but I'm not overly concerned with that), 
> and prints fine except for mysterious overlaid characters in a small 
> space around the centre-top of the document. I want to find out where 
> these characters are coming from.
>   
Hi Barney,
First I should have a look at the html-validator and repair some errors 
- will have a positive effect anyway. :-)
Then the strange characters.
It are some rests of the header h1 and header h2 styles in the media-all 
styles.
If we give these styles a font-size of say 15px instead of 1px/0px (IE 
is enlarging everything: and seems to enlarge the height of the 1px/0px 
characters without enlarging the width of them proportionally), the text 
is appearing just in the positions as where the collapsed characters are.

* See testpage 1
  <http://home.tiscali.nl/developerscorner/css-discuss/test-printtest-1.htm>

So the solution will be, if you don't want the h1 and h2 texts to 
display: to set these styles to {display:none;} in the print stylesheet.

* See testpage 2
  <http://home.tiscali.nl/developerscorner/css-discuss/test-printtest-2.htm>

Success and greetings,
francky

Btw: can't you give the normal stylesheet an @media-screen? Then you've 
your hands free for a fresh start in the print styles, without any 
influence of the screen styles (now and later, if something has to be 
changed in the screen styles).


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Links with separator lines

[francky]

Diane Ross wrote:
> I looked at the code several time, but I just didn't see it.  head at my stupidity>
>   
I think it´s not stupid at all if you don´t see one missing slash after 
numerous cut-copy-paste actions in a large and complicated code. But you 
don´t have to see everything yourself by eye and by hand: the validators 
are eager to help (if clicked ;-) ).
As a lazy boy, I first validate if something seems not ok (2 seconds 
rest to take some coffee), and only if the validators are green, and the 
error is still there, I´m going to look in the code for bug hunting. :-)

francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Links with separator lines

[francky]

Diane Ross wrote:
> I use  #page_links and .footerbar for links. The problem shows on this page
> <http://www.entourage.mvps.org/>
>
> but
>
> show OK on this page (and other pages on the site that use the same divs)
> <http://www.entourage.mvps.org/exchange/index.html>
>
> The Problem:
> 
> In Opera and FireFox on the Mac, I'm seeing two separator lines after the
> first link. 
>
> IE 5.2 on the Mac shows the separator lines inside the link or way to one
> side in both #page_links and #footer. There are other problems with IE Mac
> that I'll address in a separate subject.
>
> Safari Mac and OmniWeb Mac are OK for both page links and footer links.
>
> On the PC side there is no problem with the separator lines for IE 6. I'm
> seeing space after the first link "Search A-Z Index". I'm guessing this is a
> padding issue. I haven't been able to test in other PC browsers yet. Have
> been downloading Opera and Firefox and the rate they are going it's going to
> be hours just to download. Running VPC isn't what you would call swift.
>
> My first thought was to check for some extraneous code but there is none
> that I see. I don't understand why it works on other pages and not the home
> page. I can see that IE Mac would be problematic but for other browser to
> have a problem with just this one page is confusing.
>   
Hi Diane,
In FF2 under WinXP: I see the double separator lines at #page_links in 
the index page, in IE6 indeed an extra space instead.
But ... you ordered it by typo on the home page. ;-)
In the index page the html-validators (w3c and html-Tidy) are so 
friendly to tell us that the first  in the #page_links is closing 
with another  instead of a . The different error handling of 
browsers is giving different shows. The one browser is completing to the 
prescribed ´s for XHTML, so adding an extra separator, the other 
browser is doing nothing but adding a space.
> [...]
> HTML
> ---
>
> 
> 
> 
> Search A-Z Index
>  <<<--- here he is!  :-) 
> 
> Most Asked Questions
> 
> [...]
>
>   
I don´t have an IE5/mac, so no idea why that is happening. Maybe you can 
hard code a separator `letter` | in the html instead of a border line in 
css, to avoid strange effects?

Greetings,
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] (no subject) > liquid corners

[francky]

Julia Ccc wrote:
> Hello,
>
> Another problem. I'm implementing a css custom corners and border box with 
> multiple divs inside the "main box" div. I want it to be expandible both by 
> width and height. So the problem is that whan I don't specify float:right 
> for the divs of right corners, they stick to the left corners and content 
> div takes just the text widths. But when I specify float:right for the right 
> corners they take their pace at the box, but the box expands automaticlly at 
> 100% of available width. So the question is how to make the box (using the 
> dloats of it's inside divs) take just th elength of text inside?
>
> Tnax in advance...
>   
Hi Julia,
Indeed, often floats are floating away. :-)
Some solutions without floating (instead of floats: with background 
positioning of the custom corners & borders) you can find over here:

* Liquid Round Corners
  <http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm>
* One of the illustrations, maybe in the direction you´re searching:
  More Round Corners
  
<http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm>

If you don´t find what you are looking for, do you have a link to a 
testpage with your code?

Salut!
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] First timer looking for css review

[francky]

Mike Buettner wrote:
> [...]
> Could you please take another look at it?
>
> Site: http://scottriggs.com/2007/index.html
>   
Hi Mike,
For a first timer, it´s hard stuff and you are going not bad for this 
not too simple layout! :-)
But I'm afraid there are still some css-hills to climb.

* IE is dropping down the right column. This is a perfect
  illustration of the "IE Doubled Float-Margin Bug". ;-)
  It is described here in PIE
  <http://www.positioniseverything.net/explorer/doubled-margin.html>
  The remedy is to add { display: inline; } to the floating #lftColbox.
* You have put the IE-only-styles in the body of the document; they
  should go to the head part. Notice: the html-validator doesn't
  notice this, because these styles are placed (correctly) in IE
  conditional comments, which are just normal comments / unseen by
  other browsers and the validator as well (REM: what is inside a CC
  is not validated!).
* You have chosen for a fixed width of 800px, probably to serve
  800x600px resolution monitors. In 800x600 an horizontal scrollbar
  is coming, though. That's due to the needed space to put the
  vertical scrollbar aside the page. Making the width about 770px
  can help (implicating the header-img has to be smaller too...).
* With a fixed width, much screen space is not used in higher
  resolutions. In 1280x1024 there is an area of about 40% unused,
  which is rather much. A solution is to give the page a liquid
  width in a % of the screen width.
  A lot of models are linked from the css-d Wiki page about layouts
  <http://css-discuss.incutio.com/?page=CssLayouts>.
* Sometimes you are using a CLASS and an ID with the same name. For
  the most elements, I found in the stylesheet only the
  ID-references (with the # before the name). For elements with only
  the ID-styles the CLASSes in the html can be missed.
* In your page fixed font-sizes are used (in px). This has 2
  disadvantages. For IE, which is is not standards compliant here,
  the fonts cannot be enlarged in the browser of the visitor. For
  some people the pages aren't accessible then, especially if they
  are using a screen of 1280x1024px or more  (very small letters).
  On the other hand, at 800x600 the fonts are biggy, and no
  possibility to get them smaller in IE.
  In FF, Opera and other browsers, the font-size can be enlarged or
  made smaller by the visitor's browser. But then the present layout
  is breaking ...
* This breaking of the layout is caused by some fixed heights, for
  instance in the navigation bar. Maybe a good idea is to develop
  the page from the top elements downwards.
  See: some Golden CSS-Rules
  <http://home.tiscali.nl/developerscorner/golden-rules-of-css.htm>.
* The 3 small images (car and logos) with associated text at the top
  of the right column: this is one of the points where the layout is
  breaking at larger font-sizes (because of the fixed 49px height of
  the .links class). Can be repaired by deleting this style rule.
  Another quick way to get it unbreakable with the text staying
  vertically centered, is to apply a css-styled table for them.
  See testpage
  <http://home.tiscali.nl/developerscorner/css-discuss/test-mike.htm>
  (other things still have to be done).

So far,
Greetings and success!
(and don´t hesitate to come back to the list for questions)
francky

PS: excellent name for your site! :-)

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Print CSS renders mystery elements in IE

[francky]

Hi Barney,
It's difficult to analyze, if we don't have some practical material 
(maybe you've send it in an attachment, but they are deleted in this list).
Do you have a link?

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help broke my template

[francky]

Diane Ross wrote:
> On 2/4/07 11:31 PM, "francky" <[EMAIL PROTECTED]> wrote:
>   
>> * testpage 2 
>> <http://home.tiscali.nl/developerscorner/css-discuss/test-base2.html>
>>
>> So I guess it must be some margin or padding in the inner parts of the
>> #sidebar, for when we make the width of the #sidebar some 10px smaller,
>> it's ok.
>> 
>
> How did you come up with 10px?
>   
>> * testpage 3 
>> <http://home.tiscali.nl/developerscorner/css-discuss/test-base3.html>
>> 
It was just a guess to see what should happen, not deliberated.
> I have some questions on the change you suggested to the sidebar.
>
> 
>
> You mention margins...do I adjust margins for divs inside the sidebar or
> simply change the size as you suggested?
>
> Rather than just "do-it", I want to understand what I'm doing. 
Yes, that is a good attitude. I pointed to the direction, but now I've 
to do some further investigations to see what is really going on! ;-)
...
Back here: it appears to be the left and right border of 1px around the 
.quicklinks and the other boxes in the #sidebar.
If we disable them, IE is showing good, and also FF doesn't have a 
horizontal scrollbar anymore.

* See testpage 4
  <http://home.tiscali.nl/developerscorner/css-discuss/test-base4.html>

And if we make the border larger, we see more overlap with the yellow 
background'ed #content in IE, while FF is giving a larger horizontal 
sidebar.

* See testpage 5
  <http://home.tiscali.nl/developerscorner/css-discuss/test-base5.html>

> I really appreciate your patience with me on this.
> #quicklinks is inside the #sidebar. I have both set for width 150. Is this
> wrong thinking to make them the same?
>
> #sidebar {
> text-align: left;
> width: 150px;
> float: right;
> margin-top: 0;
> margin-right: 0;
> margin-bottom: 0; }
>
> /*Quicklinks
> */
> .quicklinks {
> width: 150px;
> border: solid 1px #ccc;
> margin: 0;
> }
>
> You can view the site with just the cleanup for the divs here:
> <http://www.entourage.mvps.org/>
>   
Indeed, this is the direction to find the culprit. You assigned the 
{width:150px} to the .quicklinks and so on, but then the border-width is 
added to the box-width. Then FF is giving overflow + hor. scrollbar to 
see the overflow, and IE is extending the surrounding right-floated 
#sidebar (thus extending to the left, coming in conflict with the width 
of the content, and dropping down because later in the normal flow).

* See css box model specs
  <http://www.w3.org/TR/CSS21/visudet.html#the-width-property>

If we omit the width in .quicklinks, .highlight and the other boxes 
below, then these boxes _inclusive everything_ (borders, paddings, ...) 
have to stay inside the width of the surrounding container #sidebar.

* That's done in testpage 6
  <http://home.tiscali.nl/developerscorner/css-discuss/test-base6.html>

Now no more drop of the #sidebar in IE, and no more horizontal scrollbar 
in FF. :-)

Success and greetings,
francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] How do we handle rollovers using a NAME tag?

[francky]

Michael Stevens wrote:
> [...]
> Any ideas on the name attribute?
>   
Hi Mike,
As this is a html/js question and has not much to do with css, I'm 
proposing other listers to go off-list for replying. [1]
If I'm wrong, I'll hear it! ;-)

Greetings,
francky

[1]
Quick answer: if you can use XHTML-Transitional, there is no validating 
problem to use NAME instead of ID. Testpage 
<http://home.tiscali.nl/developerscorner/css-discuss/test-js-swap.htm>.


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help broke my template

[francky]

Stephane Bortzmeyer wrote:
> On Mon, Feb 05, 2007 at 06:47:29PM -0800,
>  Diane Ross <[EMAIL PROTECTED]> wrote 
>  a message of 39 lines which said:
>   
>> SAVE EVERY STEP with an OWN VERSION NUMBER!
>> 
> A better advice may be to use a real Version Control System, for your
> HTML pages and your CSS stylesheets. A version number does not tell
> much ("What is version 567?" "When did I change the color scheme?"). A
> VCS is much more powerful (for instance, you can attach a text to each
> change, the date is automatically set, etc).
> [...]
>   
Hi Stephane,
The most important part of my advise is "save every step": do it! The 
way _how_ do to this, is at choice. Can be with a version #, can be with 
a VCS. While I'm not working in huge projects with many contributors, 
I'm happy to give just quick version numbers without spending time to 
describe what I changed.
But it's true: to be 100% correct, I should have written: "... with an 
OWN VERSION _INDICATION_ (version number, or version date, changing 
description, and so on; or a combination of these)". - So thanks: I'll 
add the VCS-option to the Golden Rule as another option.
> [...]
> The page you mention has other strange advices such as:
>   
>> To see where you are: use TEMP BACKGROUND COLORS for the div-boxes,
>> ul's, li's and other elements.
>> 
>> Sometimes a TEMP {border: 1px dashed red;} can do the same. - But
>> that is a bit more risky, because adding or removing borders can
>> influence the layout (suddenly dropping or lifting of an element can
>> be the result, or appearing or disappearing of paddings with
>> unintended backgrounds).
>> 
>
> While it is much simpler (and cleaner!) to use a browser extension
> such as Firefox's WebDeveloper (with its Outline function).
>   
For a quick problem shooting sometimes the Outline function in the FF 
WebDev (apart, or in combination with the edit functions) can be very 
handy, but to be sure, I prefer a real change in my code, and real 
testing in different browsers:

* The Outline function sometimes causes a dropdown of one or more
  elements (because of the with of the border line), in case a page
  has a narrow layout. [1]
  AFAIK, a background color is never changing the width or height of
  an element, and even for IE there is no risk.
* With the FF WebDev under my WinXP (and before under Win98SE),
  sometimes background-img parts of the page are disappearing when
  the window format is changed on the fly; then the Outline alone
  can be not enough for analyzing and playing with margins and paddings.
* I cannot save the outline version of the WebDev.
* I want to see the result of a change in hard coded html /css, to
  compare browsers - often a browser difference has to be eliminated.

With respect to my "strange advices": I agree, they aren't all "clean 
coded". - But that's just for building, bug hunting and testing purposes.
As long as "unallowed methods" (as the X-out method) are helping me to 
get a page faster to what I desire, then a tmp pollution doesn't matter 
for me. [2]
Afterwards the strange elements can easily be deleted: to get clean, 
valid and crossbrowser pages in the end. - Nobody knows! :-)

Greetings,
francky

[1] Yes, I always should make pages which have some liquid freedom; but 
I'm testing pages of others too. ;-)
[2] Together with tools as the WebDev extension, the dirty comment-out 
methods are saving about 40% of my analyzing time, I guess. But maybe 
for more experienced coders it doesn't make any difference. Let 
everybody follow his/her heart...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Help broke my template

[francky]

Diane Ross wrote:
> [...]
> One of my biggest problems is knowing how to troubleshoot problems.
> [...]
>   
Recognized! Some sources I got good hints from:

* In some hours without deadlines, you can read the whole PIE :-)  
  (and the links in it) to get an idea of known browser issues and
  how to solve (or work around) them. -
  http://www.positioniseverything.net/

* You can try to isolate the problem: omit everything else in the
  page which doesn't have effect on the bug, and find the trigger. A
  way to achieve this, is described in the article "Mystery Bug (a
  method of isolating an unknown CSS bug, by reduction to a 'minimal
  test case')". -
  http://www.positioniseverything.net/articles/mys-bug.html

* You can try to find the answer in the Tips & Tricks of the css-d
  Wiki. - http://css-discuss.incutio.com/

* You can try to search the CssDiscuss List; some hints for this:
  http://css-discuss.incutio.com/?page=SearchCssDiscussList

* You can try to Google a problem description, for instance "float
  problem with IE", and see what happens. Often you'll find
  fellow-sufferers in a scala of forums, and with some good luck
  within not too much clicks a page with the solution too.
  In this case, o wonder, PIE is the first hit and the css-d archive
  is coming soon! (screenshot
  
<http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-google_float-problem-IE.gif>)

francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/