Re: [css-d] the problem of rule reuse

[Gunlaug Sørtun]

ray wrote:
> Yeah, that's a solution but not perfect. Because this rule-set is 
> comprised of two parts - the normal one and the IE-mac fix. You have 
> to remember to add the new selector to every part.

Tough :-)

Well, if your "easyclearing" works in IE7 in standards mode, you won't
need the second part since a 'hasLayout' trigger is already present.
That old and obsolete "IE6 and older win-versions but not IE/Mac" hack
doesn't work in IE7, so the 'hasLayout' trigger has to come from
somewhere else. Any 'hasLayout' trigger will do, and not all of them
disturb IE/Mac.

Think you should check latest "easyclearing" update...

...and also check all alternatives.


FWIW: I still prefer an "easyclearing" variant in many cases, but I
write it slightly different...

element:after {
content: ".";
display: block;
height: 0;
clear: both;
overflow: hidden;
}

...after having seen what IE8b1 did when served the original. Doesn't
make any difference in the good browsers, and probably won't in IE8
final either.

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] the problem of rule reuse

[ray]

Yeah, that's a solution but not perfect. Because this rule-set is comprised
of two parts - the normal one and the IE-mac fix. You have to remember to
add the new selector to every part.
Thanks for you reply.

On Fri, Oct 24, 2008 at 3:25 PM, Gunlaug Sørtun <[EMAIL PROTECTED]> wrote:

> ray wrote:
>
>  I want to apply this rule to all li elements under ul. Giving every li
>> element a class attribute is very tedious. Is there a solution for
>>  this situation?
>>
>
> The fix can be attached to any element the same ways as any other
> rule-set...
>
> ul li:after {
>  content: ".";
>  display: block;
>  height: 0;
>  clear: both;
>  visibility: hidden;
> }
>
> /* Hides from IE-mac \*/
> * html ul li {height: 1%;}
> /* End hide from IE-mac */
>
>
>
> Probably a good idea to give the ul (not the li) a class to prevent
> general addition of "clearfix" to every li on a site. Call it whatever
> you like, but don't use the '.clearfix' class-name unless you also want
> to "clearfix" the ul itself.
>
> 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 popup windows

[Bill Brown]

>> If you go to http://www.thepuppyplace.org/page53.html and click on
>> a link (Alabama for example) popups up a window with text inside.
>> Can someone suggest a website that I can learn this technique? Or
>> any other comments? Thank you.

This is better handled through JavaScript than CSS.

That being said, I tend to use Prototype  in 
all my projects making something like this possible (and simple):

http://www.w3.org/TR/html4/strict.dtd";>


Simple New Window
http://www.google.com/jsapi";>



Alabama


Hope it helps.
Bill

-- 
~~~
Bill Brown, MacNimble.com :: "From dot concept to dot com since 1999"
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
"The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
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 popup windows

[Majestic]

Cute dogs on the side of the page.

On Fri, Oct 24, 2008 at 8:45 PM, Hayden's Harness Attachment
<[EMAIL PROTECTED]> wrote:
> If you go to http://www.thepuppyplace.org/page53.html and click on a link 
> (Alabama for example) popups up a window with text inside. Can someone 
> suggest a website that I can learn this technique? Or any other comments? 
> Thank you.
>
> Angus MacKinnon
> Infoforce Services
> http://www.infoforce-services.com
>
> "Faith is the strength by which a shattered world shall emerge into
> the light." - Helen Keller
>
>
> __
> 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-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 popup windows

[Hayden's Harness Attachment]

If you go to http://www.thepuppyplace.org/page53.html and click on a link 
(Alabama for example) popups up a window with text inside. Can someone suggest 
a website that I can learn this technique? Or any other comments? Thank you.

Angus MacKinnon
Infoforce Services
http://www.infoforce-services.com

"Faith is the strength by which a shattered world shall emerge into
the light." - Helen Keller


__
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] flyout menus + IE6 making progress, still need help

[Jody Levinson]

It's not working for me 'out of the box' either. Unless I'm  
implementing it wrong. Do you have a sample of it working in a  
vertical menu to level 3 that I could look at to compare? Your page  
that you referred me to only goes to level 2.

Thanks!

On Oct 23, 2008, at 6:54 PM, Bob Meetin wrote:

> I'd take a look but I have another pressing project.  If the 3rd  
> level is not working, either I don't have the CSS or HTML correct or  
> didn't have the time with the examples.  Out of the box it works.
> I know that I use an if_ie construct to keep some pieces synced  
> between IE and Firefox.  Undoubtedly I can retrieve the vanilla EM  
> code if you want to take a look.  It's around.  And for the record,  
> the first couple times especially I took an extraordinary amount of  
> time to figure it out.
> -Bob
>
> Jody Levinson wrote:
>> OK, so I redid the menus using the code  Bob pointed me at and  
>> they  are working better and look promising for IE6. I'm still  
>> having some  issues that I can't quite track down.
>>
>> The new page is here: http://www.atlas-inspection.com/newsite/newnavtest.html
>> And the css for the menus is here: 
>> http://www.atlas-inspection.com/newsite/test1.css
>>
>> In FF, in the vertical menu, the third level isn't working at all  
>> and  the widths of the second level are a little screwy with the  
>> text  running over the right edge.
>>
>> In IE6, on the horizontal menu, when you hover, the block widens   
>> enough to pop the last item to the next line. I can't track down   
>> what's doing that.
>>
>> In the vertical menu, the third level also isn't working, the  
>> heights  of the items change on hover and the widths aren't working  
>> the same as  in FF.
>>
>> But I feel I'm making progress!
>>
>> Any help on these issues is very much appreciated.
>>
>> Thanks,
>>
>> Jody
>>
>>
>> On Oct 23, 2008, at 11:00 AM, Bob Meetin wrote:
>>
>>

> Jody Levinson wrote:
>
>> These menus work so well in IE7 and FF, but they are completely
>> unusable in IE6. Can anyone please help or point me toward some
>> resources to resolve it or work around it?
>>
>> Thank you.
>>
>> http://atlas-inspection.com/newsite/
>>
>> http://www.atlas-inspection.com/newsite/styles.css
>>
>> Thank you for any assistance!
>>
>> Jody
>>
> I have a number of menu examples of drop-down menus based on  
> the  Eric
> Meyer examples from 'More Eric Meyer on CSS' on this page.   
> They  use a
> csshover.htc file to make it work in IE6.
>
> http://www.dottedi.biz/codesamples/
>
> My question, what does fly-out menu actually mean?
>
> -- 
> Bob Meetin
> www.dottedi.biz
> 303-926-0167
>
> Hook up with me on Twitter, Facebook, LinkedIn, Plaxo Pulse and  
> Bebo
> or catch my blog at www.dottedi.biz/blog.php
>
> Standards - you gotta love em - there are so many to choose from!
>
> __
> 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/
>
 -- 
 TroutDream Graphics, Inc.
 Always fresh. Never canned.
 http://troutdream.com
 425-883-8277
 928-833-8277 fax



>>> -- 
>>> Bob Meetin
>>> www.dottedi.biz
>>> 303-926-0167
>>>
>>> Hook up with me on Twitter, Facebook, LinkedIn, Plaxo Pulse and Bebo
>>> or catch my blog at www.dottedi.biz/blog.php
>>>
>>> Standards - you gotta love em - there are so many to choose from!
>>>
>>>
>>
>> --
>> TroutDream Graphics, Inc.
>> Always fresh. Never canned.
>> http://troutdream.com
>> 425-883-8277
>> 928-833-8277 fax
>>
>> __
>> 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/
>>
>>
>>
>
>
> -- 
> Bob Meetin
> www.dottedi.biz
> 303-926-0167
>
> Hook up with me on Twitter, Facebook, LinkedIn, Plaxo Pulse and Bebo
> or catch my blog at www.dottedi.biz/blog.php
>
> Standards - you gotta love em - there are so many to choose from!
>

--
TroutDream Graphics, Inc.
Always fresh. Never canned.
http://troutdream.com
425-883-8277
928-833-8277 fax

__
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] i thought styling some quote images around text can be quite simple but how wrong!

[Mark Henderson]

liketo findoutwhy wrote:
>
> This is the one:
> > From Ben Bacarisse
> >
> > How about: http://www.bsb.me.uk/testing/quotes.html (re-size window to
> > test the wrapping).
Groovy...

... however, that method has a problem and I noticed a similar one when 
tinkering with your examples. Have you seen what happens to the height 
of the last line when the quote wraps? Shrink the window so you have two 
lines of text. Then shrink it even further so you have 3 or 4. If the 
right quote  absolutely *has* to sit next to the end of the text (and I 
really don't know why - is this a management decision or your personal 
preference?) then I imagine this will be a problem for you - but maybe 
not. it certainly would be for me.

At any rate, it appears to be caused by having your image quotes inline 
as opposed to using background images, which I personally find to be the 
preferred option in cases where the image is purely decorative.


HTH
Mark
__
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] vertical-align - Parent Element

[Gunlaug Sørtun]

Doug Jolley wrote:
> What is the parent element?  For example, suppose that I had My 
> dog hasfleas.  I 
> would say that the paragraph element was the parent of the span 
> element.

Yes.

> I certainly don't intend to align the baseline of the word "has" with
>  the baseline of the paragraph block.

Not the block ... the paragraph line-boxes - one for each line in the
paragraph.

See:

...for more info, and...

...for example/test/illustration.

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] i thought styling some quote images around text can be quite simple but how wrong!

[liketo findoutwhy]

On Fri, Oct 24, 2008 at 6:28 AM, Mark Henderson <[EMAIL PROTECTED]> wrote:

> liketo findoutwhy wrote:
>
>>
>> oh thanks for your answer.  hm... is the last webpage above the same as my
>> Style 1b?   the requirement is that the ending quote image is right next to
>> the ending word, not at the far bottom right corner.  thanks again.
>>
>>
> Hello and you are most welcome. I only took a quick look at your code
> before hitting my CSS bookmark folder, since this was one of those things
> that, like you, I discovered first hand is slightly more complicated than it
> first appears (at least to get things working well cross-browser).



thanks Mark for your solution.  I will try later today.

Ben Bacarisse also just gave a super smart solution.  I don't fully
understand why the right quote image with the negative right margin won't be
in the normal flow and get pushed down to a line all by itself yet, but I
tried it in IE 6, 7, FF3, Chrome, Safari, and they all worked like magic.

This is the one:
> From Ben Bacarisse
>
> How about: http://www.bsb.me.uk/testing/quotes.html (re-size window to
> test the wrapping).
__
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] vertical-align - Parent Element

[Doug Jolley]

I must be missing something real obvious.  In discussing
"vertical-align" there is a proliferation of references to "parent
element".  For example, we might see a reference like, "baseline -
Aligns the baseline of the element with the baseline of the parent
element.".  What is the parent element?  For example, suppose that I
had My dog hasfleas.  I would say that the paragraph
element was the parent of the span element.; but, I certainly don't
intend to align the baseline of the word "has" with the baseline of
the paragraph block.  So, can someone please tell me what the word
"parent" means when used in this context?

Thanks for any input.

   ... doug
__
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 Ignoring Hover State

[Gunlaug Sørtun]

Chris Akins wrote:

> http://www.springfieldmo.gov/newsite/manager.html

> The left hand navigation list should show a white background on hover
>  for all link items.  It does just that except for the last item 
> (class="last") in IE7 only.  In that browser, the hover state is 
> ignored.

It looks like IE7 loses _all_ styles for background when
'background-image: none;' is declared, thus the link isn't re-rendered.
IE needs a reason to re-render links, or else it won't open up the
link-area properly and apply styles to it.

Add the style IE7 has lost along with the background-image for that
element/class, on :hover...

.navLocal a:hover {background-position: 0 100%;}

...to kick IE7 into gear by making it re-render and pick up remaining
and additional styles.

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] IE7 Ignoring Hover State

[Chris Akins]

Example page:

http://www.springfieldmo.gov/newsite/manager.html
http://www.springfieldmo.gov/newsite/reset.css
http://www.springfieldmo.gov/newsite/3col.css

The left hand navigation list should show a white background on hover
for all link items.  It does just that except for the last item
(class="last") in IE7 only.  In that browser, the hover state is
ignored.

I have traced the issue to this line in the reset.css:

.last a, .related .last a, .subNav {background-image:none;}

By saying I've traced it I simply mean that if I comment out that
line, the hover state re-appears.  Why would this be since that line
of code is only specifying background image?

Chris A.
__
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] IE6 question - a:hover img

[Gunlaug Sørtun]

Phillip Cavaco wrote:

> a:hover img{ border:solid 1px red; }

> I know that IE6 pseudo select only works with anchors by default. But
> this one ain't working.

Give IE6 something that forces it to re-render on :hover, on the anchor
itself, like...

a:hover {
  background-position: 0 0;
}

...and it will apply your "element-in-anchor" styles.

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] IE6 question - a:hover img

[Phillip Cavaco]

Hi everyone, *please help*...

I'm on fire with IE6 :)

As you can see by the email subject, I want to apply the following CSS rule:

a:hover img{
border:solid 1px red;
}

over the following html:



I know that IE6 pseudo select only works with anchors by default. But this
one ain't working.
What am I missing here? Need to trigger haslayout? I already tried thousands
of different manners.

NOTE: I have no other CSS besides the above one.
NOTE: Valid xHTML
NOTE: don't have a public URL
__
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] What is the offtopic address?

[Keith DiSarno]

Thanks for the clarification Jim.


Keith
__
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] What is the offtopic address?

[Jim Nannery]

Keith

You wrote


  So is there, or is there not, an '[EMAIL PROTECTED]' address where people can 
just shoot the breeze? I know that Majestic has asked this twice before and 
both times was directed to that static page of links to more lists.

  I believe I may be missing a key link in the chain...LOL.



  There is no place on CSS-D that I'm aware of where you can *shoot the Breeze* 
with other list members about *off-topic* discussions.
  You can of course always email list members *off-list* for *off-topic* 
discussions.

  This thread should probably end here if you have addtional questions feel 
free to email *off-list*.

  HTH

  Jim Nannery

__
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] What is the offtopic address?

[Keith DiSarno]

So is there, or is there not, an '[EMAIL PROTECTED]' address where people can
just shoot the breeze? I know that Majestic has asked this twice before and
both times was directed to that static page of links to more lists.

I believe I may be missing a key link in the chain...LOL.
__
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] What is the offtopic address?

[Jim Nannery]

Christopher

You wrote;


> What is the offtopic email address?


At the bottom of every email sent by the list you'll find a link to the 
CSS-D Wiki. [1]

It's there that you'll find a link to the off topic list.[2]

Regards

Jim Nannery

[1] List wiki/FAQ -- http://css-discuss.incutio.com/
[2] http://css-discuss.incutio.com/?page=OffTopic 

__
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] negative background position for sprite

[Richmond]

How about something like:

.mountain {
  color: #9b422d;
  background: url (images/h1-mountain-arrow.png) 0px no-repeat;
  margin-left: -15px;
  text-indent: 30px;
}

Cheers
Richmond
__
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] negative background position for sprite

[Marty Martin]

This accomplished what I needed, thanks for the suggestions from everyone!

Marty


On Fri, Oct 24, 2008 at 11:56 AM, Richmond <[EMAIL PROTECTED]> wrote:
> How about something like:
>
> .mountain {
>   color: #9b422d;
>   background: url (images/h1-mountain-arrow.png) 0px no-repeat;
>   margin-left: -15px;
>   text-indent: 30px;
> }
>
> Cheers
> Richmond
>
__
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] Fwd: negative background position for sprite

[Cristian Palmas]

I forgot to add css-discuss to the address...

-- Forwarded message --
From: Cristian Palmas <[EMAIL PROTECTED]>
Date: 2008/10/24
Subject: Re: [css-d] negative background position for sprite
To: Marty Martin <[EMAIL PROTECTED]>


2008/10/24 Marty Martin <[EMAIL PROTECTED]>

> Greetz everyone,
>
> So I have this H1 tag and I have a little graphic sprite I want to
> negatively position to the left of the H1 but when I do, the sprite
> gets cut off at the box border of the H1.  Is there a way around that
> so I can negatively position the sprite without it getting cut off?
>
> Here's what I have (spaces added for emailing purposes)--
>
> < h1 class="mountain" >Front-Porch Living Is Alive and Well in the South<
> /h1 >
>
> CSS--
>
> h1 {
>font: 1.4em Georgia, "Times New Roman", Times, serif;
> }
>
> .mountain {
>color: #9b422d;
>background: url(images/h1-mountain-arrow.png) -15px 0px no-repeat;
> }
>
>
> All help appreciated!
>
> Marty Martin


Hi,

If you put the sprite in the background of the h1 tag, it is obvious that it
is cut off by the box of the tag.
I don't know what kind of code you have but in theory this snippet would
work:


h1 {
   font: 1.4em Georgia, "Times New Roman", Times, serif;
   margin-left: 15px; /*<-- add to push on the right the text of the h1
tag */
}

.mountain {
   color: #9b422d;
   background: url(images/h1-mountain-arrow.png) 0px 0px no-repeat;
/*<-- change -15px into 0px and see the result  */
}

Hope this helps.

-- 
~ Cristian Palmas ~
http://www.cristianpalmas.it



-- 
~ Cristian Palmas ~
http://www.cristianpalmas.it
__
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] float problem: not being contained or something else?

[Luc]

Good afternoon Gunlaug, 

It was foretold that on 24/10/2008 @ 17:18:28 GMT+0200 (which was
13:18:28 where I live) Gunlaug Sørtun would write:

> You're right: web design isn't magic - just code :-)

Yup and code is already difficult enough for me, let alone magic ;-)

> FWIW: my expression takes height for font resizing. That's the whole
> idea behind extracting the browser's own font-size and using it to
> calculate dimensional trigger-points.

I see ... it starts to fall into place now!

> And, yes, ideally we should take all those variants and options at the
> user-end into account while designing. Someone may actually use them.
> Pity those who create hardware and software don't always agree on how to
> make all those variants and options interact, as that would have made it
> much easier for us.

> As more and more browsers come around to support mediaqueries, we can
> start doing something useful for end-users with other set-ups and
> preferences than our own. Still need some leveling on the hardware and
> software front for it to work consistently though.

Couldn't agree more.

 
-- 
Best regards,
 Luc
_


Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"A democracy is a government in the hands of men of low birth, no
property, and vulgar employments." - Aristotle, Rhetoric,
Independency. 


__
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] negative background position for sprite

[Marty Martin]

Greetz everyone,

So I have this H1 tag and I have a little graphic sprite I want to
negatively position to the left of the H1 but when I do, the sprite
gets cut off at the box border of the H1.  Is there a way around that
so I can negatively position the sprite without it getting cut off?

Here's what I have (spaces added for emailing purposes)--

< h1 class="mountain" >Front-Porch Living Is Alive and Well in the South< /h1 >

CSS--

h1 {
font: 1.4em Georgia, "Times New Roman", Times, serif;
}

.mountain {
color: #9b422d;
background: url(images/h1-mountain-arrow.png) -15px 0px no-repeat;
}


All help appreciated!

Marty Martin
__
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] float problem: not being contained or something else?

[Gunlaug Sørtun]

Luc wrote:

>> That expression do not work well on other screen-resolutions than 
>> 96dpi - the most widespread one that IE6 may be found on at the 
>> moment, and there's not much I can do about that since resolution 
>> can't be easily checked and used as a variable in expressions.
> 
> Oh well, for me it suffices ... i guess if we want to consider all 
> possible screen resolutions out there and users that change default 
> font size etc we'll be in the magic business :-)

You're right: web design isn't magic - just code :-)

FWIW: my expression takes height for font resizing. That's the whole
idea behind extracting the browser's own font-size and using it to
calculate dimensional trigger-points.

And, yes, ideally we should take all those variants and options at the
user-end into account while designing. Someone may actually use them.
Pity those who create hardware and software don't always agree on how to
make all those variants and options interact, as that would have made it
much easier for us.

As more and more browsers come around to support mediaqueries, we can
start doing something useful for end-users with other set-ups and
preferences than our own. Still need some leveling on the hardware and
software front for it to work consistently though.

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] float problem: not being contained or something else?

[Luc]

Good afternoon Mark, 

It was foretold that on 24/10/2008 @ 02:39:42 GMT+1300 (which was
11:39:42 where I live) Mark Henderson would write:



> I can hear the sound of frantic keyboard tapping.  

and banging head to table :-)
 
-- 
Best regards,
 Luc
_


Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Old age comes at a bad time." 


__
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] div+heading vs fieldset+legend

[Gunlaug Sørtun]

Emanuele Venezia wrote:

> I would like to insert a box with a tile in the middle the top
> border, like the default for the  of a . See 
> http://www.biblio.polito.it/boxtitle.html.

> Why IE is almost always the only browser behaving differently?

For some of the cases the answer is simple: IE has different
default-margins. You have to give all browsers the same vertical margins
before positioning them.


I normally organize the headline and bordered wrapper the other way
around - headline above wrapper, give them a uniform line-height, and
then pull up the bottom margin on the headline (in em) so the bordered
wrapper ends up covering a part of the headline.

Then I stack the headline above the bordered wrapper with 'position:
relative; z-index: 1;'.

IE6 in quirks mode needs a lightly different margin-bottom to compensate
for box-model differences, but otherwise IE7 and 6 do fine.

Working example: the right-side navigation in my pages...

...where the various ul contains the borders.

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] float problem: not being contained or something else?

[Mark Henderson]

Luc wrote:
> Oh well, for me it suffices ... i guess if we want to consider all
> possible screen resolutions out there and users that change default
> font size etc we'll be in the magic business :-)
>   
Ut oh! I can hear the sound of frantic keyboard tapping.
*cringes and heads to bed*
__
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] i thought styling some quote images around text can be quite simple but how wrong!

[Mark Henderson]

liketo findoutwhy wrote:
>
> oh thanks for your answer.  hm... is the last webpage above the same 
> as my Style 1b?   the requirement is that the ending quote image is 
> right next to the ending word, not at the far bottom right corner.  
> thanks again.
>

Hello and you are most welcome. I only took a quick look at your code 
before hitting my CSS bookmark folder, since this was one of those 
things that, like you, I discovered first hand is slightly more 
complicated than it first appears (at least to get things working well 
cross-browser).

I also apologise for not paying close enough attention to your 
requirements (was that originally there? It's late, or rather early here 
- as in after 2.30am - so maybe I'm losing my mind but I didn't see that 
first time around!).

The last example link I posted uses background images and appears to be 
closer to your 2b (but not the same),

Ok, so here is one solution, tested in FF3, Safari, Opera 9, and IE6. 
This is win2k I'm logged into right now, and I'll check on IE7 in the 
morning by booting to XP if nobody else has offered a better fix. But 
I'm pretty sure someone more knowledgeable than myself is likely to have 
done so before I wake.

Change the following rule under style 3 to:

.spanRightQuote {
  background: url("rightquote.gif") no-repeat right bottom;
  padding: 0 0 0 15px; /*only left padding needed as the span location 
has moved*/
  zoom: 1; /* hasLayout for IE6 */
}

and in your code:




hello world again hello world again hello world again hello world
 




Obviously that's quite bloated markup! Although I do see at least one of 
those divs is for the examples presentational purposes only.

You can if you want use the following to achieve the same result:



hello world again hello world again hello world again hello world
 



and add the margin from .quoteContainer2Inner rule to .divLeftQuote:

.divLeftQuote {
  background: url("leftquote.gif") no-repeat 0px 0px;
  padding: 0 0 0 20px;
  margin: 10px;
}

Good luck!

HTH
Mark
__
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] float problem: not being contained or something else?

[Luc]

Good morning Gunlaug, 

It was foretold that on 24/10/2008 @ 06:35:22 GMT+0200 (which was
02:35:22 where I live) Gunlaug Sørtun would write:



> Delete 'width: 18em' on #puller2 and let that float default to 'width:
> auto' and shrink-wrap. Delete 'margin-left: 1em' while you're at it.
> That will give you the most stable line-up, at the right edge of #main-top.

When trying to correct it myself yesterday, i indeed used the
'width:auto' but ofcourse forgot about the margin-left.

Works like a charm!!

>> I also have a float drop in IE: resizing drops the whole content 
>> beneath the nav. Have i messed up my math somewhere?

> Think so :-)

> It is the percentage (not 100%) that makes it a little harder to
> calculate trigger-points.
> A quick test gives me these values for near-flawless operation on 96dpi
> resolution screens...

> * html #container{ width:expression(
> (document.documentElement.offsetWidth) >(830/12)
> * parseInt(document.body.currentStyle.fontSize)?  "48.75em"
> : ((document.documentElement.offsetWidth) <(600/12)
> * parseInt(document.body.currentStyle.fontSize)? "34.75em" : "96%")); }

> I raised min-width to 34.75em because IE6 has a tendency to drop content
> too early on narrow windows.

Darn, i recalculated all my widths yesterday except for the
expression. Never thought that would be culprit. On the
hand it's the first time i used that technique so i hope i'll be
forgiven ;-)

Guess i need to read your excellent article again :-)

> That expression do not work well on other screen-resolutions than 96dpi
> - the most widespread one that IE6 may be found on at the moment, and
> there's not much I can do about that since resolution can't be easily
> checked and used as a variable in expressions.

Oh well, for me it suffices ... i guess if we want to consider all
possible screen resolutions out there and users that change default
font size etc we'll be in the magic business :-)

 
-- 
Best regards,
 Luc
_


Using the best e-mail client: The Bat! version 4.0.18 with Windows XP
(build 2600), version 5.1 Service Pack 2 and using the best browser:
Opera.

"Doctors automatically know what's wrong with you. They have a sick
sense." - Beau M., age 10. 


__
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] i thought styling some quote images around text can be quite simple but how wrong!

[Mark Henderson]

liketo findoutwhy wrote:
> to simply add two quote images around some text. seems quite simple at first
> but turns out all the obvious solutions are not as desirable as a perfect
> solution:
>
> please see
> http://www.0011.com/css/quote.html
>
> basically, Style 1 is just inlining the image, text, and image.
>
> Style 2 is using a table.
>
> Style 3 is using images as background.
>
> None of them actually is perfect... it seems so easy at first... anyone know
> a way to make it work at all? thanks

There seem to be a few options available (admittedly, I had one 
bookmarked). The last one uses images:

http://www.designmeme.com/articles/csscurlyquotes/
http://24ways.org/2005/swooshy-curly-quotes-without-images
http://simonwillison.net/2003/May/21/stylingBlockquotes/

And remember, Google is your friend, especially if you do like to 
emulate that email address.

HTH
Mark
__
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] i thought styling some quote images around text can be quite simple but how wrong!

[liketo findoutwhy]

On Fri, Oct 24, 2008 at 1:40 AM, Michael Adams
<[EMAIL PROTECTED]>wrote:

>
>
> I think the trailing span will work in IE if you do it with
> "display: inline-block;". Untested as i am on my Linux box.



thanks for your reply.  i tried:

http://www.0011.com/css/quote3.html

it has the same effect as Style 2.  The ending quote is at the bottom right
of the block, not right next to the ending text.
__
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] div+heading vs fieldset+legend

[Emanuele Venezia]

Hi all,
I would like to insert a box with a tile in the middle the top border, 
like the default for the  of a . See 
http://www.biblio.polito.it/boxtitle.html.
I've tried different approaches and it's been quite easy for FF3, Opera 
9.60, Safari 3.1.2, Google Chrome and K-Meleon 1.5. But none of my 
attempts is OK for IE7. I've not tried to any of the previous versions, 
just for laziness and because I don't have them installed on my pc.
I know it would be easier if I used  with , but I 
would rather not use it, since there are no fields to be grouped in that 
box, just text (or some other boxes with text).

Why IE is almost always the only browser behaving 
differently??? angry

Emanuele
__
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] i thought styling some quote images around text can be quite simple but how wrong!

[Michael Adams]

On Fri, 24 Oct 2008 00:53:15 -0700
Came this utterance fomulated by liketo findoutwhy to my mailbox:

> to simply add two quote images around some text. seems quite simple at
> first but turns out all the obvious solutions are not as desirable as
> a perfect solution:
> 
> please see
> http://www.0011.com/css/quote.html
> 
> basically, Style 1 is just inlining the image, text, and image.
> 
> Style 2 is using a table.
> 
> Style 3 is using images as background.
> 
> None of them actually is perfect... it seems so easy at first...
> anyone know a way to make it work at all? thanks.

I think the trailing span will work in IE if you do it with
"display: inline-block;". Untested as i am on my Linux box.

-- 
Michael

All shall be well, and all shall be well, and all manner of things shall
be well

 - Julian of Norwich 1342 - 1416
__
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] i thought styling some quote images around text can be quite simple but how wrong!

[liketo findoutwhy]

to simply add two quote images around some text. seems quite simple at first
but turns out all the obvious solutions are not as desirable as a perfect
solution:

please see
http://www.0011.com/css/quote.html

basically, Style 1 is just inlining the image, text, and image.

Style 2 is using a table.

Style 3 is using images as background.

None of them actually is perfect... it seems so easy at first... anyone know
a way to make it work at all? thanks.
__
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] i thought styling some quote images around text can be quite simple but how wrong!

[liketo findoutwhy]

to simply add two quote images around some text. seems quite simple at first
but turns out all the obvious solutions are not as desirable as a perfect
solution:

please see
http://www.0011.com/css/quote.html

basically, Style 1 is just inlining the image, text, and image.

Style 2 is using a table.

Style 3 is using images as background.

None of them actually is perfect... it seems so easy at first... anyone know
a way to make it work at all? thanks.
__
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] the problem of rule reuse

[Gunlaug Sørtun]

ray wrote:

> I want to apply this rule to all li elements under ul. Giving every 
> li element a class attribute is very tedious. Is there a solution for
>  this situation?

The fix can be attached to any element the same ways as any other 
rule-set...

ul li:after {
   content: ".";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;
}

/* Hides from IE-mac \*/
* html ul li {height: 1%;}
/* End hide from IE-mac */



Probably a good idea to give the ul (not the li) a class to prevent
general addition of "clearfix" to every li on a site. Call it whatever
you like, but don't use the '.clearfix' class-name unless you also want
to "clearfix" the ul itself.

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/