Re: [css-d] Need help with this [EMAIL PROTECTED] AP div problem I think

[Ingo Chao]

Kim Kruse wrote:
> If you go to this page 
> http://www.mouseriders.dk/til_michael/index_white.php (I'm not done with 
> the stylesheet for this page yet) and in the selectbox please choose 
> "Hvid/blå kontrast" and click the submit (skift). You should now see a 
> white page with the "A a" in the blue header (screenshot here 
> http://www.mouseriders.dk/til_michael/imagesBG/ss_1.gif ) ...at least in 
> FF/Opera. I just can't figure out why it won't show up in IE.

Disappearing absolutely positioned boxes are described by Bruno Fassino
   http://www.brunildo.org/test/IE_raf3.html
Workarounds included.

It took several minutes for me to grasp the fact that "Skift" is a 
button and not a misplaced box that is not connected to the problem. 
There is a mouse pointer change over GAWDS, but not on "Skift", and 
pressing return or changing my javascript settings or simple waiting did 
not submit anything. Might be a language problem, though. Re-reading 
your post did help. "[EMAIL PROTECTED]" seems to be multilingual.

Ingo

-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Opera 8.5 and MacIE positioning problem

[ImageSpinner]

Howdy,

Just ran across a strange bug, at least it appears to be one...

I have a left-nav div:

#navigation {
position: absolute;
width: 145px;
top: 77;
left: 0;
}   


that is within a body-container div:

#bodycontainer {
position: relative;
color: #000;
background: #fff;
width: 770px;
text-align: left;
margin: 10px auto auto auto;
padding: 0;
}   


with some various other divs mixed in, including a logo div:

#logo {
position: absolute;
left: -2px;
bottom: 45px;
}

that is within the body-container div as well.

Every browser displays this fine except for:

Opera 8.5   --  the navigation is pushed down the page a ways.  
staying in the column it's supposed to be in.  (Other Opera versions  
are fine)

Mac IE 5.2 (yeah, I know...)  -- the navigation appears fine, but,  
the logo div either jumps to the top, or, doesn't display at all.

I'm willing to forgo the logo in IE Mac,  but it would be nice to fix  
Opera 8.5

More so, I'd like to understand what is happening.

page is at:   http://www.imagespinner.com/CS/page-group-template-014- 
AP/index.html

thanks!

-- Karl



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 8.5 and MacIE positioning problem

[Philippe Wittenbergh]

On Feb 24, 2006, at 5:38 PM, ImageSpinner wrote:

> #navigation {
>   position: absolute;
>   width: 145px;
>   top: 77;
>   left: 0;
> } 

that 'top' is missing a unit: 77 what ? Cows, elephants ?


> with some various other divs mixed in, including a logo div:
>
> #logo {
>   position: absolute;
>   left: -2px;
>   bottom: 45px;
> }
>
> []
>
> Opera 8.5   --  the navigation is pushed down the page a ways.
> staying in the column it's supposed to be in.  (Other Opera versions
> are fine)

Fixing #navigation might help.
>
> Mac IE 5.2 (yeah, I know...)  -- the navigation appears fine, but,
> the logo div either jumps to the top, or, doesn't display at all.

That logo displays at the top because IE mac doesn't compute 'bottom'  
correctly when no height is specified to the parent block.

Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 8.5 and MacIE positioning problem

[ImageSpinner]

Thanks for the help!

One down, one to go...


On Feb 24, 2006, at 1:18 AM, Philippe Wittenbergh wrote:

>
> On Feb 24, 2006, at 5:38 PM, ImageSpinner wrote:
>
>> #navigation {
>>  position: absolute;
>>  width: 145px;
>>  top: 77;
>>  left: 0;
>> }
>
> that 'top' is missing a unit: 77 what ? Cows, elephants ?
>
>

That was it for Opera! working now...  thanks!


>> with some various other divs mixed in, including a logo div:
>>
>> #logo {
>>  position: absolute;
>>  left: -2px;
>>  bottom: 45px;
>> }
>>
>>
>> Mac IE 5.2 (yeah, I know...)  -- the navigation appears fine, but,
>> the logo div either jumps to the top, or, doesn't display at all.
>
> That logo displays at the top because IE mac doesn't compute  
> 'bottom' correctly when no height is specified to the parent block.
>

What do I apply to the parent block if it is variable?...   the  
containing div expands with the content. I have tried height:auto to  
no avail.


> Philippe
> ---
> Philippe Wittenbergh
> 
>
>
>
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 8.5 and MacIE positioning problem

[Gunlaug Sørtun]

ImageSpinner wrote:

> One down, one to go...

Well, maybe your font-sizing strategy should also get some attention,
before you put some real text in there.

What font-size in 'px' does in IE/win should be well known, and is not
much of an issue since it can be 'ignored'[1] by that browser.
Line-height in 'px' does however affect both Opera and IE/win
negatively, and may make text more or less unreadable if one needs to
resize it a little.


regards
Georg

[1]http://www.gunlaug.no/contents/wd_1_03_02.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Interesting Firefox bug? (first-letter pseudo selector)

[david]

Zoe M. Gillenwater wrote:

> If there are multiple characters before the first letter, 
> all of them should go along for the ride.  For instance:
> 
> "'I can't believe it's not butter' is what Zoe said," said the man.
> 
> In this case, "'I would be the drop cap.
> 
> Again, doesn't solve your problem, but hopefully makes it clear that 
> this is actually good that it works as it does.

That's also how drop caps in word processing and desktop publishing
work, although some of the programs (like WordPerfect) let you specify
how many letters to include in the drop.

That would be something nice for CSS drop caps to support.

-- 
David
[EMAIL PROTECTED]
authenticity, honesty, community

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 8.5 and MacIE positioning problem

[Philippe Wittenbergh]

On Feb 24, 2006, at 6:26 PM, ImageSpinner wrote:

>>> with some various other divs mixed in, including a logo div:
>>>
>>> #logo {
>>> position: absolute;
>>> left: -2px;
>>> bottom: 45px;
>>> }
>>>
>>>
>>> Mac IE 5.2 (yeah, I know...)  -- the navigation appears fine, but,
>>> the logo div either jumps to the top, or, doesn't display at all.
>>
>> That logo displays at the top because IE mac doesn't compute  
>> 'bottom' correctly when no height is specified to the parent block.
>>
>
> What do I apply to the parent block if it is variable?...   the  
> containing div expands with the content. I have tried height:auto  
> to no avail.

Without a height declared, it is very hard to do (and in your case,  
you can't declare a height).
You might want to try:
  * html>body #logo  {top: 100%; bottom:auto}

that serves it only to IE mac.


Philippe
---
Philippe Wittenbergh





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 8.5 and MacIE positioning problem

[Gunlaug Sørtun]

Philippe wrote:
> Without a height declared, it is very hard to do (and in your case, 
> you can't declare a height). You might want to try: 

* html>body #logo {top: 100%; bottom:auto}
> 
> that serves it only to IE mac.

In case you don't want to hack it into IE/Mac...

Never mind the height of that column. It'll always be "full height" the
way your layout works, so you can position from the bottom of the page.

You have a 'clearer' div near the very bottom of the source-code, so you
might as well use it to get a pretty cross-browser positioning-scheme
working.

Like so...



...which will make the logo land 120px above the 'clearer', at the
bottom of the left column.
Seems to work well in Opera 9tp2, Firefox 1.5.0.1, IE6, IE 5.2/Mac and
Safari. Just put those inline-styles I've used where they belong - in
the stylesheet.

regards
Georg

-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Header, Footer and 3 Columns

[Zoe M. Gillenwater]

death2all wrote:
> I have the following layout:
> http://www.d2all.org/css_test/1.html and I am trying
> to convert it to use only css for the layout and
> remove tables completelly. Up to now I have this:
> http://www.d2all.org/css_test/2.html but the footer
> gets mixed up with any of the left or right columns
> that get too far down. Problem is that I want the
> left, center and right box numbers to be completely
> dynamic and the footer to be placed right after any of
> them as seen in the first layout.
> Any help appreciated.
>   

Your left and right columns are absolutely positioned, and this is just 
not compatible with a footer. This is because absolutely positioned 
blocks are removed from the flow of the document; thus, the footer 
doesn't know they exist.  I suggest floating your left and right columns 
instead. There are several examples of this type of layout in the wiki:
http://css-discuss.incutio.com/?page=ThreeColumnLayouts

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Color Scheme Assistance

[David A. Ensor]

I've had no success in searching thru the archive for this...

I'm pretty sure I've just recently run across a really useful site for 
getting color schemes.  You enter one color and it offers several 
different options that it works with on the color wheel.

Any suggestions for best sites for this?  I'd like to roll with a color 
pulled from a photograph.

Thanks,

Dave
-- 
__

David A. Ensor
[EMAIL PROTECTED]
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Color Scheme Assistance

[Christy Collins]

http://wellstyled.com/tools/colorscheme2/index-en.html
http://www.colorschemer.com/online.html
http://www.morecrayons.com/
http://www.meyerweb.com/eric/tools/color-blend/

And there's probably more
-C


On Feb 24, 2006, at 10:45 AM, David A. Ensor wrote:

> I've had no success in searching thru the archive for this...
>
> I'm pretty sure I've just recently run across a really useful site for
> getting color schemes.  You enter one color and it offers several
> different options that it works with on the color wheel.
>
> Any suggestions for best sites for this?  I'd like to roll with a  
> color
> pulled from a photograph.
>
> Thanks,
>
> Dave
> -- 
> __
>
> David A. Ensor
> [EMAIL PROTECTED]
> __
> css-discuss [EMAIL PROTECTED]
> http://www.css-discuss.org/mailman/listinfo/css-d
> IE7b2 testing hub -- 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/
>

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Color Scheme Assistance

[Brett Leber]

David A. Ensor wrote:
> I've had no success in searching thru the archive for this...
> 
> I'm pretty sure I've just recently run across a really useful site for 
> getting color schemes.  You enter one color and it offers several 
> different options that it works with on the color wheel.
> 
> Any suggestions for best sites for this?  I'd like to roll with a color 
> pulled from a photograph.

A few good ones:

Colr.org provides a nifty image color sampler. It also has a social 
aspect to it.
http://colr.org/

http://wellstyled.com/tools/colorscheme2/index-en.html
http://wellstyled.com/tools/colorscheme/index-en.html

(Note that the last two are two different color scheme 
generators--versions 2 and 1.)

Brett

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] update on horzontal menu failing for Safari

[[EMAIL PROTECTED]]

Using  http://snugtech.com/en/safaritest  the dropdown menu looks good 
now.  If someone wants to doublesheck with Safari, much appreciated. The 
Eric Meyer menu works perfectly.

The site:  http://www.longmontleaders.com

What happened - the following line in CSS was getting mussed by an 
invalid comment.

div#hnav ul ul {
 position:  absolute;
 width: 11em;
 display: none;
}

A couple lines earlier I had added a comment using //, such as:

background: whatever;  // this color affects whatever

When I changed the comment to:  

background: whatever; /* this color affect whatever */

it fixed the menu problem. I "thought" that using the 2 forward slashes 
was a proper way to comment CSS.

Scratching my head - Bob



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Min-Height

[Chris Ovenden]

This area is slightly problematic, because min-height is not yet
supported by IE7 (though we're promised it for the proper release). If
we assume it will be included, the neatest solution that works in all
browsers is:

#element { min-height:100px }
* html #element { height:100px }

Some people are against CSS hacks, but this is the only solution I
know of that is valid CSS and unlikely to have any adverse effects in
the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
not necessary, and in fact will make it break in IE5/mac.]

If by some madness IE7 doesn't support min-height this will at least
not harm matters, although an additional hack would probably be
needed. Let's hope not.

Chris

On 2/23/06, jeremy <[EMAIL PROTECTED]> wrote:
> hey there...
> I was able to get the min height property to work in IE, but it requires
> using a hack.
> a quick google search on min-height will give you MANY different hacks
> available. I eneded up going with one from Stew
> http://www.cssplay.co.uk/boxes/minheight.html
>
> the only problem with it is that it exploits a bug in IE. Most of the
> hacks for min-height do.
> simple amount off code, not complicated, but not the cleanest.
> -jeremy
>
>
> >> I am having trouble getting min-height working correctly in IE. Someone
> >> suggested that I use height instead, because it acts as min-height does
> >> when interpreted by IE. However the text just overflowed when it hit the
> >> bottom of the page. My site is: http://swilly.tk/~swilly/secondpres/
> >>
> >
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Gmail's CSS for expanding subject lines

[Carl Youngblood]

One caveat with this solution: it doesn't work in IE.

On 2/23/06, Carl Youngblood <[EMAIL PROTECTED]> wrote:
>
> Success!  I needed to use "white-space: nowrap"
>
> On 2/23/06, Carl Youngblood <[EMAIL PROTECTED] > wrote:
> >
> > Nice try, but that still seems to wrap.
> >
> > On 2/23/06, cj <[EMAIL PROTECTED]> wrote:
> > >
> > > overflow: hidden; perhaps?
> > >
> >
> >
>
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] ADMIN Re: Color Scheme Assistance

[Zoe M. Gillenwater]

David A. Ensor wrote:
> I've had no success in searching thru the archive for this...
>   

Maybe because it's not a CSS topic and thus not discussed on this list? :-)

> I'm pretty sure I've just recently run across a really useful site for 
> getting color schemes.  You enter one color and it offers several 
> different options that it works with on the color wheel.
>
> Any suggestions for best sites for this?  I'd like to roll with a color 
> pulled from a photograph.
>   

Since this doesn't have anything to do with CSS, please send links to 
Dave off-list.

Thanks,
Zoe Gillenwater
css-d list moderator
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Sequences of "float clear" divs

[Michal Cizmazia]

I want to have a text with floating divs (e.g. images) on both sides.
A sequence of "float clear" divs is followed by text (that is a sequence of 
paragraphs).

The example (and screenshots)
http://cim.szm.sk/float-clear-seq.html
illustrates the problem. 
(IE reneders it like I want, but FF an Opera leave unwated space on between the 
right side floats.)

How can I achieve it?

Enclosing all of the left floats into the left big one and the same with the 
right ones does not solve the problem, because the width of floating divs (e.g. 
images) can vary.

Thank you,
Michal Cizmazia

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Gmail's CSS for expanding subject lines

[Andrew Close]

On 2/23/06, Carl Youngblood <[EMAIL PROTECTED]> wrote:
> Success!  I needed to use "white-space: nowrap"
>

Carl, do you have an example that you could show us?
thanks!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Gmail's CSS for expanding subject lines

[Rob Mientjes]

On 24/02/06, Andrew Close <[EMAIL PROTECTED]> wrote:
> On 2/23/06, Carl Youngblood <[EMAIL PROTECTED]> wrote:
> > Success!  I needed to use "white-space: nowrap"
> >
>
> Carl, do you have an example that you could show us?
> thanks!

And while you're at it, try text-overflow:ellipsis; with that. It cuts
it off with an *gasp* ellipsis. IE and Safari support it, that's for
sure. Not official, but it looks nifty ;)

-Rob.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Min-Height

[Paul Novitski]

At 08:00 AM 2/24/2006, Chris Ovenden wrote:
>This area is slightly problematic, because min-height is not yet
>supported by IE7 (though we're promised it for the proper release). If
>we assume it will be included, the neatest solution that works in all
>browsers is:
>
>#element { min-height:100px }
>* html #element { height:100px }
>
>Some people are against CSS hacks, but this is the only solution I
>know of that is valid CSS and unlikely to have any adverse effects in
>the future. [AFAIK (I can't test it here), the /*\*/ hack Stu uses is
>not necessary, and in fact will make it break in IE5/mac.]


Internet Explorer conditional comments are validated by the W3C 
engine and allow one to differentiate IE from other browsers and to 
differentiate among IE versions.

see:

Microsoft:
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

CSS-D wiki:
http://css-discuss.incutio.com/?page=IE7
http://css-discuss.incutio.com/?page=GhostInTheBox

the world:
http://google.com/search?q=ie+conditional+comments

Regards,
Paul 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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 8.5 and MacIE positioning problem

[ImageSpinner]

>
> In case you don't want to hack it into IE/Mac...
>
> Never mind the height of that column. It'll always be "full height"  
> the
> way your layout works, so you can position from the bottom of the  
> page.
>
> You have a 'clearer' div near the very bottom of the source-code,  
> so you
> might as well use it to get a pretty cross-browser positioning-scheme
> working.
>
> Like so...
>
>  src="images/left-nav-bottom-logo.gif" width="140" height="94"
> alt="Cedars-Sinai Logo" style="position: absolute; top: -120px; left:
> 0;">
>
> which will make the logo land 120px above the 'clearer', at the
> bottom of the left column.
> Seems to work well in Opera 9tp2, Firefox 1.5.0.1, IE6, IE 5.2/Mac and
> Safari. Just put those inline-styles I've used where they belong - in
> the stylesheet.
>
> regards
>   Georg


WOW!  It had never occurred to me to place the logo in another  
structural part of the page! Thank you!

That worked fine.

(If you are ever over here, or I over there, I owe you a beverage of  
your choosing.   And Molly seems like a very nice cat!)

The bottom:xx; on the logo float WAS working UNTIL I had to  
position:absolute; the left-nave as well, to escape the IE 3-pixel  
bugs around floats, since the height:1% didn't work for my layout.

Now it's off to browsercam.com, to see if anything else broke!

Thanks again!!!

-- Karl
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Making Blog Column Appear Floating Above Background With Shadow

[Niels Olson]

Help! Just a newbie here. How do I make the content of my blog (
http://nielsolson.us/Haversian/) appear to float above the background like
this one (http://www.medrants.com/index.php)? I've looked at his style sheet
and others but I haven't figured it out yet.

Thanks,

Niels Olson
Tulane School of Medicine
Class of 2009
http://nielsolson.us/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Making Blog Column Appear Floating Above Background With Shadow

[MarcLuzietti]

It looks like a simple background image. Without actually opening the 
CSS, I'd imagine it's a simple three column layout with a background
set to repeat-x and left or right depending on the side. For example:

columnLeft {
background: url(/images/columnBackLeft.gif) top right repeat-x;
height:100%;
}
columnRight {
background: url(/images/columnBackRight.gif) top left repeat-x;
height:100%;
}

Use position:absolute (with the appropriate hacks) for IE6 and older and
position:fixed for everything else.

-- 
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624




"Niels Olson" <[EMAIL PROTECTED]>
Sent by: [EMAIL PROTECTED]
02/24/2006 03:08 PM

 
To: css-d@lists.css-discuss.org
cc: 
Subject:[css-d] Making Blog Column Appear Floating Above 
Background With Shadow


Help! Just a newbie here. How do I make the content of my blog (
http://nielsolson.us/Haversian/) appear to float above the background like
this one (http://www.medrants.com/index.php)? I've looked at his style sheet
and others but I haven't figured it out yet.

Thanks,

Niels Olson
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Making Blog Column Appear Floating Above Background With Shadow

[MarcLuzietti]

Niels,

Looking more closely, the method used is even simpler than in my 
previous e-mail. Personally, I'd use the one I wrote, since it allows
greater fluidity. He has a background gif for the main column (wrapper):

http://www.medrants.com/wp-content/themes/impact/img/wrapbg.gif

and a background color: #8A95B7 for the whole page. It's a fixed
width column at 760px.

It's basically the same principle, though, using a background image.

-- 
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624




"Niels Olson" <[EMAIL PROTECTED]>
Sent by: [EMAIL PROTECTED]
02/24/2006 03:08 PM

 
To: css-d@lists.css-discuss.org
cc: 
Subject:[css-d] Making Blog Column Appear Floating Above 
Background With Shadow


Help! Just a newbie here. How do I make the content of my blog (
http://nielsolson.us/Haversian/) appear to float above the background like
this one (http://www.medrants.com/index.php)? I've looked at his style sheet
and others but I haven't figured it out yet.

Thanks,

Niels Olson


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/

[css-d] Legend of the Fieldset

[MarcLuzietti]

Once upon a time a young HTML monkey was happily
banging out some code. The monkey god came to the
monkey and said, "These fields should be grouped 
together, and there should be signs indicating what the
grouping is."

The young monkey attempted to comply with the monkey
god, and set about creating a color and border, by which
the groupings would be more visible. Then he created the
signs, by which the groups would be known.

It was then the young monkey noticed a problem. The
signs pushed the color beyond the boundaries of the fields.
Try as he might, he could not figure out to push the color
back within the boundaries, at least not without erasing
the border.

Can you help the young monkey?

So I want it pink inside the border, but not outside the
border, but the addition of a legend pushes the 
background color up to the height of the legend text.
Only the legend has a white background. When I
added a width to the legend, it erased the top border.

It's for an internal app, so no linkies.

fieldset {
border:#8f2d3f solid 1px;
background:#fee;
display:inline;
margin:0 0 10px 25px;
width:750px;
}
legend {
background:#fff;
font:bold larger Verdana, Arial, Helvetica, sans-serif;
color:#900;
}

-- 
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Legend of the Fieldset

[Olly Hodgson]

On 24/02/06, [EMAIL PROTECTED]
<[EMAIL PROTECTED]> wrote:
> Once upon a time a young HTML monkey was happily
> banging out some code. The monkey god came to the
> monkey and said, "These fields should be grouped
> together, and there should be signs indicating what the
> grouping is."

EEEP! The young adventurer just ran into one of the most frustrating
challenges he will yet face! The legendary !

This should help to start you off:
http://thinkdrastic.net/journal/wp-content/fieldset_testing.html

It looks about right in IE6 and Firefox 1.5, though it doesn't look
right in Opera 9TP2. You might need to play with the "padding" on
fieldset and "top" on legend to make it work with your layout.

Cheers,


--
Olly
http://thinkdrastic.net/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Legend of the Fieldset

[Michael Hulse]

On Feb 24, 2006, at 2:13 PM, [EMAIL PROTECTED] wrote:
> Can you help the young monkey?

Lol, nice story.  :D

This is what I do... Prob best to put the hacks in separate IE-specific 
style sheets using condtional comments:

/*  You can use the underscore hack in order to not let this css affect 
firefox and opera. */
/* http://www.sitepoint.com/forums/showthread.php?t=169621 */
fieldset {
border: 0;
border-top: 1px solid #2874A5;
margin: 1em 0;
padding: 1em;
_position: relative; /* The underscore means only IE will see 
it. */
_padding-top: 20px;
_padding-bottom: 15px;
_display: block;
}
fieldset legend {
font-size: .9em;
font-weight: bold;
color: #2874A5;
text-transform: uppercase;
background: #fff;
padding: 0 10px 0 10px;
margin: 0 0 0 -20px;
_position: absolute;
_top: -10px;
}

Prob not exactly what you need, but maybe it will help/give you some 
ideas.

M

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Legend of the Fieldset

[Cem Meric]

> Once upon a time a young HTML monkey was happily
> banging out some code. The monkey god came to the
> monkey and said, "These fields should be grouped
> together, and there should be signs indicating what the
> grouping is."
> 
> The young monkey attempted to comply with the monkey
> god, and set about creating a color and border, by which
> the groupings would be more visible. Then he created the
> signs, by which the groups would be known.
> 
> It was then the young monkey noticed a problem. The
> signs pushed the color beyond the boundaries of the fields.
> Try as he might, he could not figure out to push the color
> back within the boundaries, at least not without erasing
> the border.
> 
> Can you help the young monkey?
> 
> So I want it pink inside the border, but not outside the
> border, but the addition of a legend pushes the
> background color up to the height of the legend text.
> Only the legend has a white background. When I
> added a width to the legend, it erased the top border.
> 
> It's for an internal app, so no linkies.
> 
> fieldset {
> border:#8f2d3f solid 1px;
> background:#fee;
> display:inline;
> margin:0 0 10px 25px;
> width:750px;
> }
> legend {
> background:#fff;
> font:bold larger Verdana, Arial, Helvetica, sans-serif;
> color:#900;
> }
> 



Nice one Marc, I like the way you've put it.

How about some monkey magic ;)

http://kalkadoon.net/sandbox/html-monkey/monkey.html 

http://kalkadoon.net/sandbox/html-monkey/primate.html 

Hope that helps.


Cem Meric

Kalkadoon
Corporate Solutions
www.kalkadoon.net 


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Color Scheme Assistance

[David Laakso]

David A. Ensor wrote:

>I've had no success in searching thru the archive for this...
>
>I'm pretty sure I've just recently run across a really useful site for 
>getting color schemes.  You enter one color and it offers several 
>different options that it works with on the color wheel.
>
>Any suggestions for best sites for this?  I'd like to roll with a color 
>pulled from a photograph.
>
>Thanks,
>
>Dave
>  
>
Probably the reason you did not find anything in the archive is because 
your question is off-topic(nothing to do with css).
You were born with the only tools you need for picking color schemes. 
There ain't no software that's gonna help. Training your color 
sensitivity will help. One way of doing that is to emulate others. Over 
time your taste will change, and your color will improve.
If you want to 'pull' a color from a site, try the FF 'color picker' 
extension.
Best,
~davidLaakso
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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] Horizontal alignment for Meyer photo gallery/ Win IE irregularity

[Doug Niven]

Hi Folks,

Have a look at the following link:

http://www.tuolsleng.com/photographs.php

I'm happy with how this page displays except that on Windows IE 6 often the
divs are not aligned horizontally--one will be down 20 pixels or so.

Here's a screen grab of the effect I'm talking about:

http://www.tuolsleng.com/grab.jpg

Any ideas? I'd love to use CSS instead of tables if possible, but let's be
realistic, the majority out there use Windows IE 6.

Best, Doug





D o u g l a sN i v e n
photo researcher/editor


http://www.anothervietnam.com

Another Vietnam: Pictures of the War from the Other Side
* from National Geographic Books *

Vietnam's Unseen War: Pictures from the Other Side (DVD)
* from National Geographic TV*

http://www.tuolsleng.com/

Killing Fields
€ from Twin Palms Press

Secrets of S-21
€ from the BBC





__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- 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/