[css-d] Stop

2007-12-23 Thread Irwin Williams 
-- 
Irwin Williams
785-1268

Do you see a man skilled in his work?
He will serve before kings; he will not
serve before obscure men.
Proverbs 22:29
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread David Hucklesby 
> On Dec 22, 2007, at 9:43 AM, Jeroen wrote:
>
>> I''m working on a design for a photo blog, and stumbled upon an overflow 
>> issue for
>> which I can't find the cause.
>>
>> I copied all relevant code to a test file: URL:
>> http://test.intellit.nl/test.html
[...]

>> HTML & css is valid (CSS partly because of opacity stuff for IE/mozilla 
>> failing;)
>>

On Sat, 22 Dec 2007 12:21:24 +0900, Philippe Wittenbergh responded, in part:
> 
>
> You can safely drop the '-moz-opacity'. Gecko browsers support the 'opacity' 
> property
> since at least Firefox 1.0, if not earlier.
>

FWIW - "opacity" works in Netscape 7.2 here (Win xp).

Cordially,
David
--

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

Re: [css-d] IE7 bug changing border color? [off-topic]

2007-12-23 Thread Rafael 
This was meant to be a private message, but I though it could be of 
some use to someone else...

I would like to ask you a small favor: when replying, please avoid 
including people's email addresses. The messages in this kind of lists 
are usually archived (and indexed) by one or more sites being globally 
available... this means that writing down email addresses here is almost 
as good as putting them in some random forum (spam-wise).

Rafael.

P.S.   Yes, I think the image you sent me is the only one where you see 
that darker border.

Michael Leibson wrote:
> - Original Message 
> From: Rafael <[EMAIL PROTECTED]>
> To: Michael Leibson <[EMAIL PROTECTED]>
> Cc: [EMAIL PROTECTED]
> Sent: Sunday, December 23, 2007 3:22:06 PM
> Subject: Re: [css-d] IE7 bug changing border color?
>
> Michael Leibson wrote:
>> Hi, 
>>
>> I just had my first look at what IE7 does to my website, via a 
>> BrowserCam.com screencapture.  The first thing I noticed is that the border 
>> to my homepage 'container' div is rendered as black, rather than as 30% 
>> black (#AAA9A9).  Is this the result of an IE7 bug, and -- if so -- any 
>> recommendations on how to work around it?  
>>
>> You can find the page at:
>>   http://members.distributel.net/~leibson/ 
>>   
>> but, of course, it will only appear black in IE7.
>>   
> I don't know about the rest, but I see no difference between Fx 
> and IE7 rendering. What about sending a link to picture describing 
> what you mean?
>
>
> Sorry, Rafael, I should have thought of that.  Here it is:
>
> http://members.distributel.net/~leibson/tests/screencapture_of_IE7.htm 
> 
>
> If you saw no difference between FF and IE7 rendering, I wonder if all 
> is in fact okay, with the problem simply being somewhere in the 
> transfer from screen to screen capture via Browsercam.com?
>
> Thanks for your help, Rafael.
> - Michael
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Gunlaug Sørtun 
Jeroen wrote:

> I see you added a width of 510px to the details container, the problem is
> I don't know the size beforehand, it changes with every photo. The pblog
> software I use only gives out the width of the photo (533px) in this case.
> 
> Is there a way to do it with percentages / relative? I can hack it in with
> javascript easily, but this will cripple it when JS is disabled.

Reducing styling of details to a minimum and include a 'hasLayout' 
trigger, will work reasonably well...

#details {
padding:10px;
height: 1%;
}

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

Re: [css-d] CSS simple question?

2007-12-23 Thread David Hucklesby 
On Sun, 23 Dec 2007 16:44:27 +, Ernie Finlay wrote:
>
> I can put a right angle triangle on the left side of the container with the 
> diagonal
> facing right,I need a code to put the triangle on the right side of the 
> container with
> the diagonal facing left.

Without a context, it's hard to know exactly what you require.
But a "pure CSS" solution to forming shapes from borders, you
may get some inspiration from Eric's classic demo, "slantastic", at

  


Cordially,
David
--


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

Re: [css-d] IE7 bug changing border color?

2007-12-23 Thread Michael Leibson 


- Original Message 
From: Rafael <[EMAIL PROTECTED]>
To: Michael Leibson <[EMAIL PROTECTED]>
Cc: css-d@lists.css-discuss.org
Sent: Sunday, December 23, 2007 3:22:06 PM
Subject: Re: [css-d] IE7 bug changing border color?




  

Michael Leibson wrote:

  Hi, 

I just had my first look at what IE7 does to my website, via a BrowserCam.com 
screencapture.  The first thing I noticed is that the border to my homepage 
'container' div is rendered as black, rather than as 30% black (#AAA9A9).  Is 
this the result of an IE7 bug, and -- if so -- any recommendations on how to 
work around it?  

You can find the page at:
  http://members.distributel.net/~leibson/  
but, of course, it will only appear black in IE7.
  

I don't know about the rest, but I see no difference between Fx and
IE7 rendering. What about sending a link to picture describing what you
mean?


Sorry, Rafael, I should have thought of that.  Here it is: 

http://members.distributel.net/~leibson/tests/screencapture_of_IE7.htm

If you saw no difference between FF and IE7 rendering, I wonder if all is in 
fact okay, with the problem simply being somewhere in the transfer from screen 
to screen capture via Browsercam.com?

Thanks for your help, Rafael.
- Michael







  Looking for a X-Mas gift?  Everybody needs a Flickr Pro Account.

 

http://www.flickr.com/gift/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS simple question?

2007-12-23 Thread Jim Davis 
Ernie
Here is a way to do it with a single image that contains two triangles in a
fluid layout.

http://www.jimdavis.org/test/triangles.html

Jim


On Dec 23, 2007 8:44 AM, Ernie Finlay <[EMAIL PROTECTED]> wrote:

>
> I can put a right angle triangle on the left side of the container with
> the diagonal facing right,I need a code to put the triangle on the right
> side of the container with the diagonal facing left.
> Thanks,Ernie.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Weird footer problem in IE7

2007-12-23 Thread Karl Bedingfield 
Hi there,

I am currently working on a photography site that has a mootools
hidden layer vertical slide triggered by #info. When the link is
clicked some content slides down. Now the problem is that in IE7
whitespace appears at the footer, this white space appears to be the
amount of space needed for when the slide is triggered. Now is Firefox
all performs well and there is no whitespace, why is there some in IE?

This is the style in question:

#info {
background-color: #e3e7e2;
text-align: left;
position: relative;
margin-left:15px;
border-top: 15px solid #fff;
z-index: auto;
}


At first I thought is was a hasLayout issue and used:

#info {
height: 1px; /* hasLayout */
}

This did infact correct the whitespace issue but because I was
specifying a 1px height the slide could not slide more than 1px.

Here is a screen grab of my page: http://www.elymods.com/footer_grab.jpg

Does anyone have any suggestions as I have drawn a big fat zero.

Many thanks
Karl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE7 bug changing border color?

2007-12-23 Thread Rafael 
Michael Leibson wrote:
> Hi, 
>
> I just had my first look at what IE7 does to my website, via a BrowserCam.com 
> screencapture.  The first thing I noticed is that the border to my homepage 
> 'container' div is rendered as black, rather than as 30% black (#AAA9A9).  Is 
> this the result of an IE7 bug, and -- if so -- any recommendations on how to 
> work around it?  
>
> You can find the page at:
>   http://members.distributel.net/~leibson/  
> but, of course, it will only appear black in IE7.
>   
I don't know about the rest, but I see no difference between Fx and 
IE7 rendering. What about sending a link to picture describing what you 
mean?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Jeroen 
On Dec 22, 2007 4:42 AM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:

> Yes, you have added 10px padding to all sides of a 100% wide
> #title-date. That makes it 100%+20px wide in standard mode.
>
> Also: IE6/7 can't make up their mind about the container-width with a
> scrollbar, and IE6 can't calculate percentage-width properly anywhere.

That explains a lot, I must have overlooked it after staring 4 hours :)

> > Another question is; I want to have the Title and other text on the
> > right on the same line. I can't get it to float correctly. I want to
> > separate it in two different columns, one 70%, other 30% of max -
> > width.
>
> You didn't float them at all, and the width is missing on Title and
> is 100%+20px on the other.

I tried it before but didn't get it to work. Probably mixed it up later on.

I see you added a width of 510px to the details container, the problem is
I don't know the size beforehand, it changes with every photo. The pblog
software I use only gives out the width of the photo (533px) in this case.

Is there a way to do it with percentages / relative? I can hack it in with
javascript easily, but this will cripple it when JS is disabled.

Thanks all for your time again.

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

[css-d] IE7 bug changing border color?

2007-12-23 Thread Michael Leibson 
Hi, 

I just had my first look at what IE7 does to my website, via a BrowserCam.com 
screencapture.  The first thing I noticed is that the border to my homepage 
'container' div is rendered as black, rather than as 30% black (#AAA9A9).  Is 
this the result of an IE7 bug, and -- if so -- any recommendations on how to 
work around it?  

You can find the page at:
  http://members.distributel.net/~leibson/  
but, of course, it will only appear black in IE7.

The relevant CSS is as follows:

#homepage_container   
{
 position: absolute;
 left: 50%; 
 top: 50%;
 width: 780px;
 height: 430px;
 margin-top: -215px; 
 margin-left: -390px; 
 padding: 0;
border: 1px solid #AAA9A9; 
 overflow: hidden;
 background: white;
 }

. . . which works fine in IE6, FF2, Opera9 and Safari3.


Thanks for any tips you'd care to share.
- Michael




  Ask a question on any topic and get answers from real people. Go to 
Yahoo! Answers and share what you know at http://ca.answers.yahoo.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] IE7 & Opacity - Why don't it work?

2007-12-23 Thread Ingo Chao 
Karl Bedingfield wrote:
> Hi all,
> 
> I am a little confused as to why the following style does not give me
> opacity in IE7. Is there anything you can see I have done wrong? All I
> get is solid black!
> 
> li.thumbBlock h3 span {
>   padding:3px;
>   color:#BBB;
>   background-color:#000;
>   filter:alpha(opacity=80); opacity:0.8; -moz-opacity:0.8;
>   }
> 
> Thanks
> Karl

The filter needs haslayout to work. The span is probably inline, you'll 
have to add zoom:1 or display:inline-block. And in any case, it will act 
like an inline-block. This may affect the design, although the snippet 
is too small to say.

Ingo

ps. wondering what will become my standard reply to this list once 
haslayout is history in IE 8.

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Thierry Koblentz 
> I did however stumble upon something else (for another part of the
webpage);
> It seems when you have a container and floats inside them, the container
> does not stretch to the size of the floats. Is there a way to overcome
> that problem without specifying the sizes explicitly?

> Sample code: .

That may help:
http://tjkdesign.com/articles/block-formatting_context/newBFC.asp



-- 
Regards,
Thierry | http://www.TJKDesign.com




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

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Gunlaug Sørtun 
Jeroen wrote:

>  the right float has 10px smaller
>  font size.  the right float has 
> same font size as left.
> 
> Any clues?

Either you had a margin-top in there, or the software you got that
outline from is broken beyond repair.

A more direct approach...


...shows clearly how the floats line up.

As you can see, the line-height is a fixed "12px" - inherited from
#details-container, so with a font-size of 20px the text overshoots its
own line and indeed the entire float.

> According to the first part it should always align on the top. So I'm
>  a bit confused.

If you want the text to line up regardless of font-size, you have to
adjust the position of the float itself depending on the *line-height*.
With a fixed line-height you can only achieve a static adjustment, which
will give end-users a whole range of problems if they resize text.

You can of course also declare a top padding on the float and push small
text down until it lines up where you want, but that is an even more
limited and static solution since it has to work in reverse and you
can't subtract padding based on font-size.

You have to let go of those fixed font-sizes and line-heights if you
want anything but a static - print - solution. A static solution will
break under stress anyway.

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

Re: [css-d] need help on vertical alignement

2007-12-23 Thread Jim Davis 
Pat,

When you use height: 100% you have to ask yourself the question "what is it
100% of?" Since you did not specify the height of the containing element or
the body, the browser can't calculate the height.

Here is an example of two floated divs, with a height of 100%,  inside of a
fixed height container: http://www.jimdavis.org/test/heights.html

This approach would only work if you were certain the content would always
fit vertically within the specified height of the container, or use one of
the overflow rules to deal with the additional content.

To accommodate an unknown height it is common to use the faux columns
technique. Here is an example I did:
http://www.jimdavis.org/test/heights2.html

You can read this for more information:
http://www.alistapart.com/articles/fauxcolumns/

Jim

On Dec 21, 2007 9:03 PM, Patrick Aljord <[EMAIL PROTECTED]> wrote:

> Hi all,
> I need help for those two divs "details" and "body" in my container,
> they don't have the same height and I would like them to have the same
> height. Any way to do this with css?
>
> here is the page: http://p80.free.fr/testy/dropdown/test.html
>
> thanks in advance
>
> Pat
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CSS simple question?

2007-12-23 Thread Rahul Gonsalves 
On 23-Dec-07, at 10:14 PM, Ernie Finlay wrote:

> I can put a right angle triangle on the left side of the container  
> with the diagonal facing right,I need a code to put the triangle on  
> the right side of the container with the diagonal facing left.

Erm.

I don't think it is possible to switch an image's orientation merely  
using CSS. The only possibility that I can think of is to change the  
direction [RTL rather than LTR], though I have absolutely no idea what  
that does.

The best idea would be to use an image manipulation program to flip  
the triangle and save it as a different file, and call that file in  
your HTML.

In some confusion,
  - Rahul.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Gunlaug Sørtun 
Jeroen wrote:

> It seems when you have a container and floats inside them, the
> container does not stretch to the size of the floats. Is there a way
> to overcome that problem without specifying the sizes explicitly?
> 
> Sample code: .

Sure. It's the old "expand to contain floats" problem, for which there
are a multitude of methods and variants.

I think the simplest and safest method for your case, is "easyclearing"...

...with a minor bug fix for IE/win - just for your case.

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

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Gunlaug Sørtun 
Jeroen wrote:
> .
> 
> How does the aligning of the floats work?

Floats go as high as they can, but not higher - unless you pull them up.
So, floats always align vertically with their top edge or margin in line
with whatever element they line up against.
With 2 floats side by side, their top edges/margins should be at the
same vertical line.

Text-alignment in any one of those floats has no relations to text in
the other float or other elements, and will only be affected by whatever
font-size, line-height etc that's declared on itself and its own float.


No problem getting whatever text line-up you want - static or
dynamically, but it won't work well as long as you apply absolute units
for font-size, line-height and vertical paddings and/or margins.
Reliable vertical alignment of a float based on the size of its
text-content - a kind of baseline alignment, requires well-calculated
use of relative units.

I use such vertical alignment for the floating section-headlines
throughout my entire site, aligning the headline-text with the top edge
of the container the floating headline is pulled up from. Works
regardless of font-resizing and other variables, and is only disturbed
slightly by differences in how browsers map relative units to actual
screen-pixels.

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

[css-d] CSS simple question?

2007-12-23 Thread Ernie Finlay 

I can put a right angle triangle on the left side of the container with the 
diagonal facing right,I need a code to put the triangle on the right side of 
the container with the diagonal facing left.
Thanks,Ernie.
_
Don't get caught with egg on your face. Play Chicktionary!
http://club.live.com/chicktionary.aspx?icid=chick_wlhmtextlink1_dec
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Layout & Overflow issue

2007-12-23 Thread Jeroen 
On Dec 22, 2007 6:26 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:

> Either you had a margin-top in there, or the software you got that
> outline from is broken beyond repair.
>
> A more direct approach...
> 
> 
> ...shows clearly how the floats line up.

You are completely right. Apparently the FF web developer toolbar renders
the boundaries wrong. When using a custom background color you can see
it works.

> As you can see, the line-height is a fixed "12px" - inherited from
> #details-container, so with a font-size of 20px the text overshoots its
> own line and indeed the entire float.

Good point, fixed that to. Everything is working as expected now, thanks.

I did however stumble upon something else (for another part of the webpage);
It seems when you have a container and floats inside them, the container
does not stretch to the size of the floats. Is there a way to overcome
that problem without specifying the sizes explicitly?

Sample code: .

Thanks again!

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

Re: [css-d] IE7 & Opacity - Why don't it work?

2007-12-23 Thread Karl Bedingfield 
Hey, that did the trick. Thanks so much,

Karl

>
> The filter needs haslayout to work. The span is probably inline, you'll
> have to add zoom:1 or display:inline-block. And in any case, it will act
> like an inline-block. This may affect the design, although the snippet
> is too small to say.
>
> Ingo
>
> ps. wondering what will become my standard reply to this list once
> haslayout is history in IE 8.
>
> --
> http://www.satzansatz.de/css.html
>


-- 
Regards
Karl Bedingfield
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] need help on vertical alignement

2007-12-23 Thread David Hucklesby 
On Sat, 22 Dec 2007 06:03:27 +0100, Patrick Aljord wrote:
> Hi all,
> I need help for those two divs "details" and "body" in my container, they 
> don't have
> the same height and I would like them to have the same height. Any way to do 
> this with
> css?
>
> here is the page: http://p80.free.fr/testy/dropdown/test.html
>

Hello Pat,
Try one of the solutions listed on the Wiki -

  

Cordially,
David
--


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