Re: [css-d] New PNG drop shadows method at PIE

[Big John]

> http://positioniseverything.net/articles/dropshadows.html

francky wrote:

> I see the idth-itches are repaired in the meantime. :-)

Somehow I forgot. So much testing...

> * The html-validator wants the " " (line 144) canceled...

That was added temporarily because IE was showing the bug where
absolute elements next to floats disappear. A flowed element 
between them will fix it. Oddly, when I when to check on it I
found that the bug had somehow gone away! I don't know what I 
did to fix it, but it's fixed so I took out the  

> Globally readed the first parts of the article: this was inspiring! At 
> work! At once!

Uh oh, competition!  :-0

> - The attracting thing in your png-solution is the universality of the css.

Yes, it must be something that can be applied dynamically, 
or it's really just a toy.

> Experimenting left and right, still didn't find a good solution matching 
> to all browsers. Stone on my path is the inherit behaviour of opacity 
> (in FF). And when applied to your method, also the inheritance of the 
> alpha-opacity in IE (I suspect it is something with the absolute 
> positioning for IE; - when tested normally it goes fine).

The IE alpha filter cannot be used here, 
because then the BG cannot be positioned.

> I still have to finish reading your article...
> ... so I can say some nice words... :-)

Well, so far we haven't been shot down, so I'm still smiling.  :)

Big John



-- 
Perennial student + Impractical joker + CSS junkie = Big John


__
Do You Yahoo!?
Tired of spam?  Yahoo! Mail has the best spam protection around 
http://mail.yahoo.com 
__
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] Tyson's Box (Is Broken!

[Tyson Tate]

I mentioned in another thread that I was going to try to whip up a  
custom border/custom corner box that uses only one div without  
JavaScript. I've succeeded, but only in Safari, as of yet. I was  
planning on using IE's "expression" CSS property to make up for the  
lack of :after and :before support.

You can see the box as it exists here:  (Valid CSS and HTML, one div, uses two images)

** Safari 2.0.3: Draws entire box (woo!)
** Opera 8.52: Draws box "correctly", according to spec (see note  
below).
** Firefox 1.5.0.2: Puts ".box:after" content inside of the padding  
instead of how Safari and Opera render it. Appears not to draw  
".box:after" content at all.

Technically, the right part of the border shouldn't display because  
I'm giving it "100%" height, which is (unfortunately) illegal when  
the containing block doesn't have a specified height[1]. So, Opera  
renders it to spec, even though the spec is kinda dumb in respects to  
"height: 100%". Three cheers for Safari! Two cheers for Opera! Half a  
cheer for Firefox! (And evil stares towards IE6...)

Does anyone have any suggestions as to how I can improve this?

Thanks,
Tyson

[1]  "The spec  
says: "If the height of the containing block is not specified  
explicitly (i.e., it depends on content height), the value is  
interpreted like 'auto'.""
__
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] Print style sheet?

[Cem Meric]

> I've never used a print style sheet before, but I'm wondering if I
> could use one now. I'd like each month to print out on a separate
> sheet of paper if someone tries to print it from the web. Any ideas:


Hi Erin, just add this to your css code.

.clmonth { page-break-after: always; }

Sadly, IE doesn't fully support this declaration :(


-- 
Cem Meric | http://www.kalkadoon.net/
Kalkadoon Corporate Solutions



__
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] Hover problem in Opera 8.5

[Bill Moseley]

I noticed a few people looked at this in my logs.  Did anyone see the
same behavior?  Any ideas about the problem?



On Mon, May 01, 2006 at 06:15:48AM -0700, Bill Moseley wrote:
> http://hank.org/demos/banner.html
> http://hank.org/demos/banner.css
> 
> In Opera 8.5/Linux when I mouse into the "login" link the entire
> navigation area changes.  It's not when I mouse right over the
> "login" link, but when I enter the dotted line around the login link.
> 
> Here's screen shots:
> 
> http://hank.org/demos/loginok.png
> 
> And after running the mouse over the "login" link:
> 
> http://hank.org/demos/loginbad.png
> 
> 
> Doesn't do it on Firefox.
> 
> 
> Two other questions:
> 
> In Opera the outer div (in red) is only the width of the inner width of
> the ul (outlined in green).  But on firefox the yellow login box is
> displayed full width of the page.  Why is that?
> 
> Firefox collapses the margins (so setting margin-top on #bannerLogout
> has no effect.  But on Opera the margin-top does show.  I expect the
> Firefox behavior.
> 
> But, Can I control when margins collapse or not?  For example, say I
> want to have more whitespace between the  and the .
> 
> 
> -- 
> Bill Moseley
> [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/
> 

-- 
Bill Moseley
[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] Design question

[Cem Meric]

> ?
> Cem,
> 
> It's related to CSS because I'm asking how designers use it to create site
> variation.  One of the responses earlier on in the thread was a CSS idea
> where BODY was given a CLASS name to vary the  page's width.
> As I said in the post, it's probably not an easy question to answer.  I
> realize there are no quick answers.  Just looking for some feedback.
> 
> Thank you,
> Mark
> 

Mark, I'm more than happy to provide feedback. Perhaps I didn't quite follow
where you were heading. 

>From a "designers perspective", I think there is no formula on creating
different layouts for various pages. Depending on project you can choose
whatever fancies you.

When it comes to coding though, in order to create various layouts I prefer
ID e.g. ,  and so on. CLASS may not be as
strong as ID depending on your declarations.

Also, if you are using dynamic content, it's handy to use a unique attribute
for BODY tag coming from your page data. It makes it easier for future
alterations on any particular page from CSS. Have a look at the BODY tag on
my site for an example.

Hope that helps,

-- 
Cem Meric | http://www.kalkadoon.net/ 
Kalkadoon Corporate Solutions


__
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] Odd Firefox Bugs

[bj]

>I've found some odd CSS bugs in Firefox that cause some rendering  
>differences between MacOS X and Windows XP. I've posted a simplified  
>test case here:
>
>
>
>Any comments/suggestions before I submit this to the Firefox's Bugzilla?
>
>-Tyson

FF 1.5.0.2 on Win2k has the same behavior as XP. What I found even more 
interesting was that upon resizing back to normal the rounded corners were 
*still* squished to one side. I had to look up at the top of the browser to 
make sure I wasn't looking at the dang thing in IE!!!

Cheers,
bj



---
avast! Antivirus: Outbound says I'm squeaky clean.
Virus Database (VPS): 0618-0, 05/02/2006
Tested on: 5/2/2006 11:02:57 PM


__
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] 5 column CSS box

[Cem Meric]

> I am looking for something like this:
> 
> 
>  Text 
>  Text  
>  Text  
>  Text  
>  Text  
> 
> _ _ _  _ _
> |__Box 1 _||__Box 2 _| |__Box 3 _| |__Box 4 _| |__Box 5 _|
> 

here are some quick fixes ;)

position: absolute;
http://kalkadoon.net/sandbox/5-column/absolute-boxes.html  

or 

float: left;
http://kalkadoon.net/sandbox/5-column/boxes.html 

and don't forget Daniels advice on 'clear: left;"

good luck,


-- 
Cem Meric | http://www.kalkadoon.net/ 
Kalkadoon Corporate Solutions


__
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] Print style sheet?

[Erin Spangler]

I've never used a print style sheet before, but I'm wondering if I  
could use one now. I'd like each month to print out on a separate  
sheet of paper if someone tries to print it from the web. Any ideas:

http://www.highland-bc.org/calendar.html

Thanks,


Erin Spangler





__
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] Odd Firefox Bugs

[Tyson Tate]

On May 2, 2006, at 7:21 PM, francky wrote:

[snip]

> btw: you know the Liquid Corner/Border method (without javascript)?  
> See Playgarden 8.a  liquidcorners/liquid-corners-playgarden-08a.htm>, and the new  
> examples Playgarden 9.a  liquidcorners/liquid-corners-playgarden-09a.htm> to 9.c.

Unfortunately, those methods rely on seven(!) extra divs to do the  
work of a single box:


   
   
   
 
   
 content
   
 
   
   
   


As opposed to:


   content


I'm going to give a shot at using IE's "expression" and :after  
and :before to get the box working. I'll report to the list if I have  
any success.

Oh, for me to learn the home addresses of the IE6 dev team. *grumble  
grumble*.

I was also surprised to learn that Gecko absolutely can't do  
"display: inline-block", which even IE6 can do. And, supposedly, it  
wont until 3.0. So now Firefox is on my hit-list, too.

Long live Safari!

-Tyson
__
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] Odd Firefox Bugs

[francky]

Els wrote:

>Tyson Tate wrote:
>  
>
>>I've found some odd CSS bugs in Firefox that cause some
>>rendering differences between MacOS X and Windows XP. I've
>>posted a simplified test case here:
>>
>>
>>
>>Any comments/suggestions before I submit this to the Firefox's
>>Bugzilla?
>>
>>
>Yup. Make the test case really just a simple html and css test 
>case. This one still sends Opera into everlasting rendering, so 
>at least I'd get the JavaScript out first, and see if the problem 
>persists.
>  
>
Hi Tyson,
- Same things happen in FF1.07 on Win98SE.
- IE6 is making nothing of it at all: four 100% width blocks on top of 
each other, borders distorted.
- Opera is making diagonals from ceiling to cellar: needs a cinema screen!

I agree with Els: to be sure it is a FF css-bug, the javascript has te 
be put aside.
But I suspect the javascript (being not instructed to react on font-size 
enlargement in the browser), after a refresh it is going o.k

Greetings,
francky

btw: you know the Liquid Corner/Border method (without javascript)? See 
Playgarden 8.a 
,
 
and the new examples Playgarden 9.a 

 
to 9.c.



__
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] Design question

[Mark Fellowes]


Cem,

It's related to CSS because I'm asking how designers use it to create site 
variation.  One of the responses earlier on in the thread was a CSS idea where 
BODY was given a CLASS name to vary the  page's width.
As I said in the post, it's probably not an easy question to answer.  I realize 
there are no quick answers.  Just looking for some feedback.

Thank you,
Mark


-Original Message-
From: [EMAIL PROTECTED]
Sent: Tuesday, May 2, 2006 10:56 PM -07:00
To: 'Mark Fellowes' [EMAIL PROTECTED];'CSS  List' [EMAIL PROTECTED]
Subject: [css-d] Design question

> 
> ?I'm curious how people create page sets for their sites ? What I mean,
> is that most sites seem to have some variation from page to page.  Not
> variations in content but in layout.   It's a tough question to answer no
> doubt.  My thoughts are that perhaps one maintains certain color
> combinations / font styles.  Some pages seem to be wider or layed out very
> different then the "home page".
> From a designers perspective are there forumulas to follow ?  In the past
> I've looked at some of those "pre made" templates where 5 or more pages
> are provided to build a solid site.  Maybe I need to go back and look at
> those again.
> 
> I guess one thing that is puzzling is when I see a 800px fixed width home
> page and then the size seems to go wide or fluid.
> 




Hi Mark,

Is that a question or a statement? Even more, how is it related to CSS?



-- 
Cem Meric | http://www.kalkadoon.net/
Kalkadoon Corporate Solutions




__
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/

__
your personal webtop. @ http://www.goowy.com
__
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] 5 column CSS box

[Daniel Pape]

The best way to do this would be to "float" each div inside your container.
This will allow them to line up horizontally.  The CSS may look like this.

#Box1 {
float: left;
width: xxx;
}
#Box2 {
float: left;
width: xxx;
}
#Box3 {
float: left;
width: xxx;
}
#Box4 {
float: left;
width: xxx;
}
#Box5 {
float: left;
width: xxx;
}

Keep in mind that if you have any content appearing below your 5 divs you
will need to "clear" that content in order to display below them.  It would
look something like this.

#footer {
clear: left;
}

Hope this helps.
--
Daniel


On 5/3/06 9:18 AM, "Brian Jones" <[EMAIL PROTECTED]> wrote:

> Hi,
> 
> I am trying to create a small 5 column CSS box that will render
> correctly across browsers.
> Also I would like to be able to adjust the widths of each box accordingly
> 
> I am looking for something like this:
> 
> 
>  Text 
>  Text  
>  Text  
>  Text  
>  Text  
> 
> _ _ _  _ _
> |__Box 1 _||__Box 2 _| |__Box 3 _| |__Box 4 _| |__Box 5 _|
> 
> Any help would be greatly appreciated.
> 
> Thank you
> __
> 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] Reseting styles with the use of conditional comments

[Gunlaug Sørtun]

Ingo Chao wrote:

>> This is new to me, and I would appreciate some testing. 
>> http://www.satzansatz.de/cssd/drcc/drcc.html

> http://www.satzansatz.de/cssd/drcc/drcc2.html

Sure, it is working as intended. I use that CC construction on a few
pages, but not for stylesheet-links.

---

As long as we're dealing with what to feed, or not feed, to old and
outdated browsers, then there are a few other methods available.

My preferred method have the advantage of me not having to add anything
to the page-code - only to the main stylesheet(s), and it is using a
perfectly valid @import rule.

Described here:

...and taking effect on some 100 pages in that site-section, via 3
stylesheets. Haven't encountered any problems with this method so far.

Now, I don't use it to keep IE/win from seeing any styles, just to feed
IE/win its own corrections. That may change...

The usual warning to everyone: *avoid hacks if you can* - and use them
wisely if you must.

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] Opacity 1 in outerbox, and opacity .5 in innerbox?

[Philippe Wittenbergh]

On May 3, 2006, at 9:47 AM, francky wrote:

> Simple question: I have a box, and another box inside.
> The #outerbox must have an opacity for FF (css-3, yes), and the
> #innerbox has to stay straight. Is this possible, or is this  
> against the
> laws of css?
> Almost forgotten: this is the testpage
>  herited.htm>.

It is against the way it works in CSS 3.
Opacity affects the box as a whole, not only the background(-colour),  
but the whole box and its content + border/padding.
Any child of that box will also affected by the opacity-setting on  
its parent.

(Opacity is supported by Opera 9 beta, Safari since 1.0 and Gecko  
since a long time...).

If you want to 'fix' this, you'd have to move #innerbox out of  
#outerbox and use position absolute, somehow.

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/

[css-d] 5 column CSS box

[Brian Jones]

Hi,

I am trying to create a small 5 column CSS box that will render
correctly across browsers.
Also I would like to be able to adjust the widths of each box accordingly

I am looking for something like this:


 Text 
 Text  
 Text  
 Text  
 Text  

_ _ _  _ _
|__Box 1 _||__Box 2 _| |__Box 3 _| |__Box 4 _| |__Box 5 _|

Any help would be greatly appreciated.

Thank you
__
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] Opacity 1 in outerbox, and opacity .5 in innerbox?

[francky]

Hi all,
Simple question: I have a box, and another box inside.
The #outerbox must have an opacity for FF (css-3, yes), and the 
#innerbox has to stay straight. Is this possible, or is this against the 
laws of css?
Almost forgotten: this is the testpage 
.
 
:-)

TIA,
francky

ps: in my case the inner box is defining the dimensions of the outer 
box; it is not possible to screw down the inner box, and putting him 
apart as equivalent box, or floater, or AP-div, and so on.
__
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] problems with right-margin (ie 6)

[Els]

richard wrote:
> hello!

Hi :-)

> i'm trying to make a layout where my left div is a fixed 160px
> width, and the main div will be sized with all the rest
> available width of the screen. in firefox 1.5 my css is
> allright, but when i test it on windows ie 6 it doesn't
> work...   
> this is the css:
> ---
> #esquerda
> {
>  width:160px;
>  height: 100px;
>  position: absolute;
>  left: 15px;
>  top: 15px;
> }
> 
> #direita
> {
>  position: absolute;
>  top: 15px;
>  right: 15px;
>  left: 177px;
> }
> --
> how can i make my div #direita be auto-sized to the right of
> the screen on ie? 


rewrite the above to:
#container{
margin:15px;
}
#esquerda{
float:left;
width:160px;
}
#direita{
margin-left:160px;
}

combined with html:








-- 
Els
http://locusmeus.com/
http://locusoptimus.com/


__
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] problems with right-margin (ie 6)

[Ed Seehouse]

On 5/2/06, richard <[EMAIL PROTECTED]> wrote:
> i'm trying to make a layout where my left div is a fixed 160px width, and the 
> main div will
> be sized with all the rest available width of the screen.
> in firefox 1.5 my css is allright, but when i test it on windows ie 6 it 
> doesn't work...

First, forget about the absolute positioning.  Just a cause of
heartache.  Second, put a float:left on your left column and make sure
it's markup comes before your right column content.  Set a width on
the left column to your 160px.

Don't float or position your right column in any way.  Merely give it
a left margin of just over 160px.

Voila.

--
Ed Seedhouse
__
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] Reseting styles with the use of conditional comments

[CSS-D List]

Ingo Chao wrote:
> Guillaume wrote:
>> I'm using an @import filter to fire my css... Now I would like to
>> reset those styles for Ie 5.0 for example, to make sure he only has
>> the text version and no styles at all... I thought throwing to this
>> browser an empty style sheet through conditional comments... But
>> apparently it doesn't work this way...
> 
> 
> Els and Georg already answered this.
> 
> Another attempt would use the invalid "Downlevel-revealed Conditional 
> Comments" [1]
> 
> Say we want to have text for IE in red, all the others should display it 
> in green -- and we cannot override it for some reasons.
> 
> ie.css
>p{color: red;}
> 
> others.css
>p{color: green;}
> 
> 
> Red in IE-Win, green for the others
> 
> 
> This could be done with a "normal" (downlevel-hidden) CC, followed by a 
> downlevel-revealed Conditional Comment.
> 
> 
> 
> 
> 
>
> 
> 
> 
> This works as desired, the other browsers see a normal HTML comment, 
> then they just skip two unknown tags ( and ) and 
> let the p render in green.
> 
> But the downlevel-revealed Conditional Comment does not validate.
> 
> 
> Now how to turn this into something ugly but valid.
> 
> It seems like IE does parse a downlevel-revealed nested in a 
> downlevel-hidden CC, meaning that this invalid intro and ending
> 
>  and 
> 
> could be nested, for validations sake, in a "normal" CC
> 
> 
> 
> 
> 
> 
> 
> 
> Both blocks are two simple comments for normal browsers, therefore, what 
> is in between can be seen by them.
> 
> IE, however, does interpret the first block as the beginning of a 
> downlevel-revealed Conditional Comment, and the second block as its end.
> 
> The following first block is only seen by IE, the second block is only 
> seen by the others.
> 
> 
> 
>
> 
> 
> 
> 
> 
> But it validates.
> 
> 
> This is new to me, and I would appreciate some testing.
> http://www.satzansatz.de/cssd/drcc/drcc.html
> 
> This one, at least, works for me in IE7, 6, 5.5
> and IE's parser seems to recover well from this.
> 
> 
> 
> Ingo
> 
> [1] 
> http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp
>

Ingo,

It was all new to me too, although I seem to recall reading about it at 
a time I didn't need it.  I tried your page, and it certainly works for 
me in FF 1.5.0.2, Opera 8.54, Mozilla 1.7.11, and IE6.

Tim

-- 
Tim Dawson,
Isle of Mull,
Scotland
__
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] Reseting styles with the use of conditional comments

[Ingo Chao]

Ingo Chao wrote:
> 
> This is new to me, and I would appreciate some testing.
> http://www.satzansatz.de/cssd/drcc/drcc.html
> 
> This one, at least, works for me in IE7, 6, 5.5
> and IE's parser seems to recover well from this.
> 

Actually the styles were not chosen carefully.

Here is another example with independent styles (background and 
text-decoration) which show that there is no need for overriding.

http://www.satzansatz.de/cssd/drcc/drcc2.html

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] problems with right-margin (ie 6)

[richard]

hello!
i'm trying to make a layout where my left div is a fixed 160px width, and the 
main div will be sized with all the rest available width of the screen.
in firefox 1.5 my css is allright, but when i test it on windows ie 6 it 
doesn't work...
this is the css:
---
#esquerda
{
  width:160px;
  height: 100px;
  position: absolute;
  left: 15px;
  top: 15px;
}

#direita
{
  position: absolute;
  top: 15px;
  right: 15px;
  left: 177px;
}
--
how can i make my div #direita be auto-sized to the right of the screen on ie?
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] Design question

[Cem Meric]

> 
> ?I'm curious how people create page sets for their sites ? What I mean,
> is that most sites seem to have some variation from page to page.  Not
> variations in content but in layout.   It's a tough question to answer no
> doubt.  My thoughts are that perhaps one maintains certain color
> combinations / font styles.  Some pages seem to be wider or layed out very
> different then the "home page".
> From a designers perspective are there forumulas to follow ?  In the past
> I've looked at some of those "pre made" templates where 5 or more pages
> are provided to build a solid site.  Maybe I need to go back and look at
> those again.
> 
> I guess one thing that is puzzling is when I see a 800px fixed width home
> page and then the size seems to go wide or fluid.
> 




Hi Mark,

Is that a question or a statement? Even more, how is it related to CSS?



-- 
Cem Meric | http://www.kalkadoon.net/
Kalkadoon Corporate Solutions




__
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] Reseting styles with the use of conditional comments

[Ingo Chao]

Guillaume wrote:
> I'm using an @import filter to fire my css... Now I would like to
> reset those styles for Ie 5.0 for example, to make sure he only has
> the text version and no styles at all... I thought throwing to this
> browser an empty style sheet through conditional comments... But
> apparently it doesn't work this way...


Els and Georg already answered this.

Another attempt would use the invalid "Downlevel-revealed Conditional 
Comments" [1]

Say we want to have text for IE in red, all the others should display it 
in green -- and we cannot override it for some reasons.

ie.css
   p{color: red;}

others.css
   p{color: green;}


Red in IE-Win, green for the others


This could be done with a "normal" (downlevel-hidden) CC, followed by a 
downlevel-revealed Conditional Comment.





   



This works as desired, the other browsers see a normal HTML comment, 
then they just skip two unknown tags ( and ) and 
let the p render in green.

But the downlevel-revealed Conditional Comment does not validate.


Now how to turn this into something ugly but valid.

It seems like IE does parse a downlevel-revealed nested in a 
downlevel-hidden CC, meaning that this invalid intro and ending

 and 

could be nested, for validations sake, in a "normal" CC








Both blocks are two simple comments for normal browsers, therefore, what 
is in between can be seen by them.

IE, however, does interpret the first block as the beginning of a 
downlevel-revealed Conditional Comment, and the second block as its end.

The following first block is only seen by IE, the second block is only 
seen by the others.



   





But it validates.


This is new to me, and I would appreciate some testing.
http://www.satzansatz.de/cssd/drcc/drcc.html

This one, at least, works for me in IE7, 6, 5.5
and IE's parser seems to recover well from this.



Ingo

[1] 
http://msdn.microsoft.com/workshop/author/dhtml/overview/ccomment_ovw.asp

-- 
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/

Re: [css-d] Question on mobiles again

[Cem Meric]

> Is it probable or reasonable to assume that elements that are marked
> with 'display:none;' in the css are NOT loaded by the browsers?
> 
> I've read - concerning css image preloaders - that today's browsers are
> smart enough to leave out content in the html if it it set to
> display:none; in the css.
>
> If that's true for browsers on mobile devices that would be a great
> feature as it cuts down bandwidth-usage - which is still not cheap at
> most mobile-phone-net-providers.
> 
> Does anyone know about those inner workings of CSS on mobile browsers?


Tricky one that is. To my knowledge, there isn't a universal rule covering
all mobile browsers when it comes to images with 'display:none;' statement. 

Until then, keep paying a bit extra unfortunately. 



-- 
Cem Meric | http://www.kalkadoon.net/
Kalkadoon Corporate Solutions



__
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] Aligning checkboxes with labels & creating vertical space IE v FF

[Peter]

Hi,

I have a page that is causing me a little grief and hope that you can help
me. I have HTML generated by php and styled by CSS. I have extracted an
example of the HTML which may be found at
www.kuroi.co.uk/testing/index.html.

Basically, it works but the styling is slightly off in FF. In particular, I
would like to align the baseline of the labels next to each checkbox with
the bottom of the checkbox. IE does this without my intervention. Is there a
way of styling this in CSS to persuade FF to fall in line?

Also, try as I might I can't persuade FF to put some space after each group
of checkboxes. I have tried setting margin-top and padding-top for the divs
containing the headers (i.e. menuHeaderOn and menuHeaderOff) and also using
padding-bottom or margin-bottom for checboxBlock. IE adds whitespace exactly
as expected. FF appears to do nothing until I put in big numbers when spaces
open up that suggest that they are being calculated from the top of the div
rather than the bottom.

Finally, I'm curious as to why if I leave out the height definitions for
menuHeaderOn and menuHeaderOff. Their coloured backgrounds disappear
suggesting that their height has gone to zero, even though they stil contain
elements with non-zero height.

My gut tells me (rightly or wrongly) that there is a single explanation for
the last two points. I'd be very grateful if somebody out there could help
me to find it.

Many thanks

Peter

__
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] Centered Thumbnails With Custom Borders

[David Hucklesby]

> On May 1, 2006, at 10:27 PM, Els wrote:
> ...
>> Here's a set I made recently, but it wasn't tested in Safari or  
>> Opera on Mac.
>> http://locusmeus.com/test/thumbswithcaptionslistcentered.html
> ...
>> http://locusmeus.com/test/thumbswithcaptionscentered.html

~~~

On Mon, 1 May 2006 23:19:37 -0700, Tyson Tate responded:

> Unfortunately, your first example isn't flexible enough to expand to  
> hold any size image (one of my requirements). I'd like not to have to  
> hard-code image sizes in. ...

~

Hi Tyson,
Depending on exactly what you mean by "any size image" you may or may not 
find one of Bruno Fassino's experiments useful. See under the heading 
"Centering, Shrink wrapping, Images" on this page:

 

Cordially,
David
-- 
David Hucklesby, on 5/2/2006

--



__
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] Odd Firefox Bugs

[Els]

Tyson Tate wrote:
> I've found some odd CSS bugs in Firefox that cause some
> rendering differences between MacOS X and Windows XP. I've
> posted a simplified test case here:
>
> 
>
> Any comments/suggestions before I submit this to the Firefox's
> Bugzilla?

Yup. Make the test case really just a simple html and css test 
case. This one still sends Opera into everlasting rendering, so 
at least I'd get the JavaScript out first, and see if the problem 
persists.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
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] Reseting styles with the use of conditional comments

[Guillaume]

Els

 > To make it work, you need to counter the styles from the previous 
stylesheets in lte50.css.

You mean every single style has to be the same in lte50.css ?
Can't I just then do a global reset from this last style sheet and kill 
all previous styles ?

Something like:

*{border:none; float:none; background-color:transparent; clear:none etc, etc...}



How would I throw a stylesheet only for Ie 5.0 and make sure he doesn't see
the previous @import styles ?

Is that a way to go ? Is it possible to reset all styles ?

Guillaume.


> Guillaume wrote:
>
>> Hi everyone,
>>
>> I'm using an @import filter to fire my css...
>> Now I would like to reset those styles for Ie 5.0 for example,
>> to make sure he only has the text version and no styles at
>> all...
>> I thought throwing to this browser an empty style sheet through
>> conditional comments...
>>
>> But apparently it doesn't work this way...
>> Any clues...
>>
>> @import
>> 'layoutLcie.css'; > title="Structure">@import 'colorsLcie.css'; > type="text/css" title="Structure">@import
>> 'fontsLcie.css';
>>
>> 
>
>
> You mean lte50.css is really just an empty sheet? No, that won't work.
> IE5 first picks up the other three stylesheets, and then an empty one 
> extra, which doesn't tell it anything. To make it work, you need to 
> counter the styles from the previous stylesheets in lte50.css.
>

__
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] Reseting styles with the use of conditional comments

[Gunlaug Sørtun]

Guillaume wrote:
> Now I would like to reset those styles for Ie 5.0 for example, to
> make sure he only has the text version and no styles at all... I
> thought throwing to this browser an empty style sheet through 
> conditional comments... But apparently it doesn't work this way...

An empty stylesheet does exactly "nothing".

If you want to reset styles in IE5.0, then you will have to override
each declaration with a new one - similar to default - for that browser
only.
Such a stylesheet must then be served last, like your example shows or
with an ordinary stylesheet-link...



I don't think it is worth the extra work.

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/

[css-d] Odd Firefox Bugs

[Tyson Tate]

I've found some odd CSS bugs in Firefox that cause some rendering  
differences between MacOS X and Windows XP. I've posted a simplified  
test case here:



Any comments/suggestions before I submit this to the Firefox's Bugzilla?

-Tyson
__
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] Reseting styles with the use of conditional comments

[Els]

Guillaume wrote:
> Hi everyone,
>
> I'm using an @import filter to fire my css...
> Now I would like to reset those styles for Ie 5.0 for example,
> to make sure he only has the text version and no styles at
> all...
> I thought throwing to this browser an empty style sheet through
> conditional comments...
>
> But apparently it doesn't work this way...
> Any clues...
>
> @import
> 'layoutLcie.css';  title="Structure">@import 'colorsLcie.css';  type="text/css" title="Structure">@import
> 'fontsLcie.css';
>
> 

You mean lte50.css is really just an empty sheet? No, that won't 
work.
IE5 first picks up the other three stylesheets, and then an empty 
one extra, which doesn't tell it anything. To make it work, you 
need to counter the styles from the previous stylesheets in 
lte50.css.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
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] Reseting styles with the use of conditional comments

[Dave Goodchild]

Is that lte a typo in the actual code? You mention le above...

On 02/05/06, Guillaume <[EMAIL PROTECTED]> wrote:
>
> Hi everyone,
>
> I'm using an @import filter to fire my css...
> Now I would like to reset those styles for Ie 5.0 for example, to make
> sure he only has the text version and no styles at all...
> I thought throwing to this browser an empty style sheet through
> conditional comments...
> But apparently it doesn't work this way...
> Any clues...
>
> @import 'layoutLcie.css';
> @import 'colorsLcie.css';
> @import 'fontsLcie.css';
>
> 
>
> Guillaume.
>
>
>
> __
> 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/
>



--
http://www.web-buddha.co.uk

dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css)

look out for project karma, our new venture, coming soon!
__
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] Reseting styles with the use of conditional comments

[Guillaume]

Hi everyone,

I'm using an @import filter to fire my css...
Now I would like to reset those styles for Ie 5.0 for example, to make 
sure he only has the text version and no styles at all...
I thought throwing to this browser an empty style sheet through 
conditional comments...
But apparently it doesn't work this way...
Any clues...

@import 'layoutLcie.css';
@import 'colorsLcie.css';
@import 'fontsLcie.css';



Guillaume.



__
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] Design question

[Dave Goodchild]

There are many methods, as there are to any approach in css. One good way to
have different layouts from the same stylesheet is to issue a class to the
body attribute and then style the layout ids differently

ie body.home #sidebar {
width: 200px;
}

body.normal sidebar {
width: 100px;
}

and so on.

On 02/05/06, Mark Fellowes <[EMAIL PROTECTED]> wrote:
>
> I'm curious how people create page sets for their sites ? What I mean,  is
> that most sites seem to have some variation from page to page.  Not
> variations in content but in layout.   It's a tough question to answer no
> doubt.  My thoughts are that perhaps one maintains certain color
> combinations / font styles.  Some pages seem to be wider or layed out very
> different then the "home page".
> From a designers perspective are there forumulas to follow ?  In the past
> I've looked at some of those "pre made" templates where 5 or more pages are
> provided to build a solid site.  Maybe I need to go back and look at those
> again.
>
> I guess one thing that is puzzling is when I see a 800px fixed width home
> page and then the size seems to go wide or fluid.
>
> TIA
> Mark
> __
> your personal webtop. @ http://www.goowy.com
> __
> 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/




--
http://www.web-buddha.co.uk

dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css)

look out for project karma, our new venture, coming soon!
__
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] ID Use

[Dave Goodchild]

Why? An id is used to identify a unique element on each page (ie layout
container) whereas a class is used to create an effect in many places. That
is what they are for.

On 02/05/06, Don Miller <[EMAIL PROTECTED]> wrote:
>
> Just a simple question.
> I use the same ID multiple times per page but the ID does the exact same
> thing in every case.  As an example, I use it to modify the look or size of
> a navigation link.  This appears to work in all browsers without any
> problems so is this a possible problem and should I find a way to convert
> these type IDs to a CLASS?
>
> The reason I do it is because I use a Class and an ID for most anchor
> tags.
>
>
> Don Miller
>
>
>
> No virus found in this outgoing message.
> Checked by AVG Free Edition.
> Version: 7.1.385 / Virus Database: 268.5.1/328 - Release Date: 5/1/2006
>
>
> __
> 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/
>
>


--
http://www.web-buddha.co.uk

dynamic web programming from Reigate, Surrey UK (php, mysql, xhtml, css)

look out for project karma, our new venture, coming soon!
__
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] Question on mobiles again

[Tobias Baldauf]

Hi!

First of all I'd like to thank the people who helped me getting started
with CSS on mobile devices on this list. Thanks for your answers!

Anyway, more questions came up:

Is it probable or reasonable to assume that elements that are marked
with 'display:none;' in the css are NOT loaded by the browsers?

I've read - concerning css image preloaders - that today's browsers are
smart enough to leave out content in the html if it it set to
display:none; in the css.

If that's true for browsers on mobile devices that would be a great
feature as it cuts down bandwidth-usage - which is still not cheap at
most mobile-phone-net-providers.

Does anyone know about those inner workings of CSS on mobile browsers?

Thanks a lot!

Greets,

Tobias

__
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] Design question

[Mark Fellowes]

I'm curious how people create page sets for their sites ? What I mean,  is 
that most sites seem to have some variation from page to page.  Not variations 
in content but in layout.   It's a tough question to answer no doubt.  My 
thoughts are that perhaps one maintains certain color combinations / font 
styles.  Some pages seem to be wider or layed out very different then the "home 
page". 
From a designers perspective are there forumulas to follow ?  In the past I've 
looked at some of those "pre made" templates where 5 or more pages are provided 
to build a solid site.  Maybe I need to go back and look at those again. 

I guess one thing that is puzzling is when I see a 800px fixed width home page 
and then the size seems to go wide or fluid.

TIA
Mark
__
your personal webtop. @ http://www.goowy.com
__
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] ID Use

[MarcLuzietti]

It's not standards compliant, but it will work . . . for now. You can have 
multiple classes in a class attribute, so go ahead and change your 
duplicate ids to classes. For example: 

class="right blue important" id="firstParagraph"

Where it will cause a problem now is if you use JavaScript and need to do 
a getElementByIds('blah').

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




"Don Miller" <[EMAIL PROTECTED]>


 
To: "CSS-D List" 
cc: 
Subject:[css-d] ID Use


Just a simple question.
I use the same ID multiple times per page but the ID does the exact same 
thing in every case.
__
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] ID Use

[Richard Anderson]

ID should only be really used once per page. It is for unique items.

There is more discussion on ID vs class on
http://www.w3.org/TR/REC-CSS2/selector.html
and
http://css-discuss.incutio.com/?page=ClassesVsIds

Cheers,
Richard


Don Miller wrote:
> Just a simple question. I use the same ID multiple times per page but
> the ID does the exact same thing in every case.  As an example, I use
> it to modify the look or size of a navigation link.  This appears to
> work in all browsers without any problems so is this a possible
> problem and should I find a way to convert these type IDs to a CLASS?
> 
> 
> The reason I do it is because I use a Class and an ID for most anchor
> tags.
> 
> 
> Don Miller

-- 
Richard Anderson
Project Manager
Katipo Communications
PO Box 12487
Wellington
Web:http://www.katipo.co.nz/

__
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] ID Use

[Don Miller]

Just a simple question.
I use the same ID multiple times per page but the ID does the exact same thing 
in every case.  As an example, I use it to modify the look or size of a 
navigation link.  This appears to work in all browsers without any problems so 
is this a possible problem and should I find a way to convert these type IDs to 
a CLASS?

The reason I do it is because I use a Class and an ID for most anchor tags.


Don Miller

No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.1.385 / Virus Database: 268.5.1/328 - Release Date: 5/1/2006
__
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] Simple (?) padding question

[Gunlaug Sørtun]

antmanbee wrote:
> How do I put space above the first piece of text when it's in a 
> container (layer)?
> 
> It seems a bit clumsy simply to put in a row of carriage returns 
> above

Of course.  should not be used as "spacer". Margins and paddings are
much more suitable for that.

In a normal scenario there's not much of a problem, as paddings on top
and bottom of containers don't create box-model problems - as long as
height is left at default (= 'auto'). However, I most often only set
vertical paddings on containers if there's a problem with 'collapsing
margins'[1], that can't be solved in other ways for a particular design.

Top (and bottom) margin on each content-element will create the space(s)
needed.

A typical styling (for me) is something like...

div p {margin: 6px 6px 0.5em 2%;}

...which to some degree adjust the spaces depending on the conditions;
like a margin-left that adjust to available width in a fluid-width
container, and the '.5em' margin-bottom that adjust vertical space
slightly if font-resizing is applied.
These values are design-decisions that (I think) suit my designs, and
are depending on a lot of factors. Controlling somewhat complex layouts
by utilizing element-margins can work quite well in a variable medium.

Example: 
...where margins are used to make the elements adjust to available
window-width from below 600 to above 1200. Elements will also adjust
their vertical positions - when needed, and I have pulled the headlines
over the edges with negative margins.
That page runs IE6 in Quirks mode, so you can compare between IE6 and
Firefox/Opera how well it is working in both modes and with both box-models.


You will of course have to figure out your own values and ways to make
your layouts/designs work. It is often best to learn these simple
methods in depth at an early stage, as there will always be new demands
for each design. Some like them 'tight', some like them 'airy', and some
are best left somewhere 'in between'. Choices... choices :-)

regards
Georg

[1]http://css-discuss.incutio.com/?page=CollapsingMargin
-- 
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] Classes and markup

[Mark Fellowes]

Just wanted to say thank you to all who answered.  The explanations and 
examples were very helpful.

Mark


-Original Message-
From: [EMAIL PROTECTED]
Sent: Tuesday, May 2, 2006 2:20 PM -07:00
To: css-d@lists.css-discuss.org
Cc: Mark Fellowes [EMAIL PROTECTED]
Subject: [css-d] Classes and markup


ID and CLASS are in some ways inter-changeable.  However, you should 
only use ID once on a page, and you can use CLASS repeatedly.  Also you 
seem confused (like we all were once) between the way to mark up ID & 
CLASS and the way the CSS is written.

So you could have:-

blah blue text blah
text in the default colour
more blue text


and your CSS might look (in part) like:-

div#rightcol {float: right; margin: 0; padding: 0;}
p.ptext {color: #00F; back-ground-color: #ABCDEF;}

Whether you'd need to float you column right is NOT the issue here, I 
leave that to you !

Hope that helps

Tim
-- 
Tim Dawson,
Isle of Mull,
Scotland
__
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/

__
your personal webtop. @ http://www.goowy.com
__
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] Testing

[Terje Moe]

Testing

__
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] z-index and IE 6 - overlapping elements

[Bostjan Kern]

>
> Using your example, I cut out as many of the positioned elements as
> possible.  For example you have the following structure for your
> gallery :
>
> div.album <-- float:left and position:relative
>a.albumLink  

Re: [css-d] z-index and IE 6 - overlapping elements

[Sam Partington]

On 02/05/06, Bostjan Kern <[EMAIL PROTECTED]> wrote:

(snipped my first attempt at a fix)

>  I tried the above solution, but the bottom  element is still overlapping
> the top  and 
>
> Any other ideas folks?

Hmm odd!  I don't know what is causing this behaviour.  But before I
posted my earlier response I tried a much simpler mock up, and my
described fix worked for the simpler problem. So there is obviously
something else going on as well.

Using your example, I cut out as many of the positioned elements as
possible.  For example you have the following structure for your
gallery :

div.album <-- float:left and position:relative
   a.albumLink  

Re: [css-d] Firefox/IE problem with forum system

[David Rose]

Michiel van der Blonk wrote:
> If possible at all, the best suggestion you could possibly get is to not 
> use a phpBB forum. They are not very standards-friendly. If you want a 
> standards compliant forum, check out vanilla (http://www.getvanilla.com).
>
> I do realize that if you have existing discussions on the phpBB database 
> this might result in more work. :-(
>
>   

I appreciate the suggestion, but the choice of forum software was a
decision based on other factors and I was not part of the decision
process, so I am in a position where I am being asked to work with what
has been provided.  I did take a look at vanilla, and while I personally
find it interesting, it is missing some of the key
features/extensions/mods that the decision was largely based on.  So,
that not being an option for me at this point, I still need to try to
address the issues at present.  Thank you again though for the suggestion.

Anyone else have any ideas on what is going wrong?

Thanks,
David
__
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] Firefox/IE problem with forum system

[Michiel van der Blonk]

[..]Can anyone else see what is going wrong here?  The development site is
at http://winnetka.technicelixir.com/forums/index.php

If possible at all, the best suggestion you could possibly get is to not 
use a phpBB forum. They are not very standards-friendly. If you want a 
standards compliant forum, check out vanilla (http://www.getvanilla.com).

I do realize that if you have existing discussions on the phpBB database 
this might result in more work. :-(

Michiel


__
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] Simple (?) padding question

[antmanbee]

on 2/5/06 14:10, Gunlaug Sørtun at [EMAIL PROTECTED] wrote:


> 
> May I suggest that you don't put paddings on containers, but instead set
> 'full width' on them and add suitable margins to content - paragraphs
> and stuff.
> That way you'll only have the width of borders (if there are any) that
> may create minor differences between Strict- and Quirks mode
> browsers/versions. Rarely ever any need to 'hack the box' then.
> 
> I will also suggest that you avoid using pixels for 'font-size' and
> 'line-height', and avoid setting 'height' on containers, as it starts to
> get ugly once some font-resizing is applied in any of my browsers.



Just one query on your advice above

How do I put space above the first piece of text when it's in a container
(layer)?

It seems a bit clumsy simply to put in a row of carriage returns above



amb

__
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] Classes and markup

[CSS-D List]

Mark Fellowes wrote:
> I'm still having a hard time wrapping my mind around classes, in particular 
> how they relate to classes in markup.
> So, I understand I can create a class like:
> 
> .ptext{color: blue;}
> 
> Then in the markup I can styple  with that class. 
> 
> What I find confusing is the uses of classes as opposed to id's in the 
> markup.  For example, I have a div for a right column. Would creating a class 
> for the  section of that div in the markup make sense ?
> 
> 
> 
> I just don't get why I want to insert class into markup or better, when and 
> why ?
> 
> I've read a number of articles and chapters on this, most recently the 
> selecttutorial at "listamatic".
> Aint' helping ;)
> 
> TIA
> Mark

ID and CLASS are in some ways inter-changeable.  However, you should 
only use ID once on a page, and you can use CLASS repeatedly.  Also you 
seem confused (like we all were once) between the way to mark up ID & 
CLASS and the way the CSS is written.

So you could have:-

blah blue text blah
text in the default colour
more blue text


and your CSS might look (in part) like:-

div#rightcol {float: right; margin: 0; padding: 0;}
p.ptext {color: #00F; back-ground-color: #ABCDEF;}

Whether you'd need to float you column right is NOT the issue here, I 
leave that to you !

Hope that helps

Tim
-- 
Tim Dawson,
Isle of Mull,
Scotland
__
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] IE drops center and right column content below left

[Daniel Pape]

On 05 2, 06, at 10:16 PM, bj wrote:

>> One more question, where is how to or tutorial on getting your  
>> mini site
>
>> logo to show up in the browser URL window?
>
> Are you talking about the favicon? If so, here's the url for  
> learning how to use them along with a cool tool for making them.
>
> 
>
> enjoy!
> bj
>

Here is another VERY powerful and cool favicon generator which also  
provides markup for inserting it in your HEAD.
http://www.chami.com/html-kit/services/favicon/
--
Daniel


__
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] Classes and markup

[Rob Freundlich]

On Tuesday, May 02, 2006 9:49 AM [GMT+0100=CET],Mark Fellowes
<[EMAIL PROTECTED]> wrote:
> What I find confusing is the uses of classes as opposed to id's in
> the markup.  For example, I have a div for a right column. Would
> creating a class for the  section of that div in the markup make
> sense ?

Think of an ID as equivalent to your Social Security Number (or national ID
number, if you're not in the US).  It uniquely identifies an element.  Use
it when you want to apply CSS to that element, and only that element.

Think of a class as equivalent to some role you play: father, brother,
developer, friend, bicyclist.  It gives a name to a set of attributes.  Use
it when you have a set of elements that play some role and should therefore
have similar attributes.

For example, suppose you have a site with three columns (left, center, and
right).  The left and right columns hold news items, and the center has some
content..  You might mark it up this way:


Item 1
Item 2
Item 3



Some content here



Item 1
Item 2
Item 3



You'd style it this way:

#left { stuff to put the element on the left side of the page }
#right {stuff to put the element on the right side of the page }
#center {stuff to put the elemnt in the center of the page }

.newsItemHolder { stuff that all holders of news items should have in
common }
.newsItem { stuff that all news items should have in common }


The DIV whose id is "left" will get attributes from #left and
.newsItemHolder.
The DIV whose id is "right" will get attributes from #right and
.newsItemHolder.
The DIV whose id is "center" will get attributes from #center.
All others will get attributes from .newsItem

Hope this helps!

Rob Freundlich
"Males are biologically driven to go out and hunt giraffes." - Newt Gingrich
"Some folks you don't have to satirize, you just quote 'em." - Tom Paxton


__
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] IE drops center and right column content below left column, again

[bj]

 >One more question, where is how to or tutorial on getting your mini site

>logo to show up in the browser URL window?

Are you talking about the favicon? If so, here's the url for learning how to 
use them along with a cool tool for making them.



enjoy!
bj



---
avast! Antivirus: Outbound says I'm squeaky clean.
Virus Database (VPS): 0618-0, 05/02/2006
Tested on: 5/2/2006 10:16:20 AM


__
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] Classes and markup

[MarcLuzietti]

Mark,

CLASSes can be used on *multiple* elements, whereas an ID can only be used 
on one element per page. In addition, you can use multiple CLASSes on a 
single element, but only one ID.

I *think* that the advantage an ID has over a CLASS is that the ID has a 
higher priority, so that if you have a CLASS and an ID, if there are any 
conflicts, the ID will take precedence. Thus you can style some generic 
qualities but override them in specific cases.

Using them in combination can be very powerful, but it can also cause a 
major headache when something isn't working right and you're trying to 
debug your problem.

-- 
Marc Luzietti
__
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] Classes and markup

[Mark Fellowes]

I'm still having a hard time wrapping my mind around classes, in particular 
how they relate to classes in markup.
So, I understand I can create a class like:

.ptext{color: blue;}

Then in the markup I can styple  with that class. 

What I find confusing is the uses of classes as opposed to id's in the markup.  
For example, I have a div for a right column. Would creating a class for the 
 section of that div in the markup make sense ?



I just don't get why I want to insert class into markup or better, when and why 
?

I've read a number of articles and chapters on this, most recently the 
selecttutorial at "listamatic".
Aint' helping ;)

TIA
Mark
__
your personal webtop. @ http://www.goowy.com
__
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] Question:Background in IE[6]

[Mark Fellowes]


Now I'm embarassed.  Never thought to recheck the markup :)
Sorry and thank you!

Mark


-Original Message-
From: [EMAIL PROTECTED]
Sent: Tuesday, May 2, 2006 1:34 PM -07:00
To: Mark Fellowes [EMAIL PROTECTED]
Cc: CSS List [EMAIL PROTECTED]
Subject: [css-d] Question:Background in IE[6]

.

...where the lonely  will enclose both following  and the paragraph.
Browsers 'error-recovery' for 'text/html' creates the differences you see.

*Never trust html-browsers* :-)

Just get rid of that  start-tag and it will turn out fine.

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/

__
your personal webtop. @ http://www.goowy.com
__
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] Question:Background in IE[6]

[Gunlaug Sørtun]

Mark Fellowes wrote:
> In my experiments to learn layout I've run into this problem twice. 
> As you'll see in my code, in the right column I've set the H1 to have a white 
> background
> and the right column itself to have a purple.  
> In Firefox it displays almost correctly, in IE the purple doesn's show 
> through where the blocks of H1 are set.
> Here is the URL:
> 
> http://pamshop.com/Template1/exp6.html

Markup-flaw...



Main content header
Introduction
rambling


...where the lonely  will enclose both following  and the paragraph.
Browsers 'error-recovery' for 'text/html' creates the differences you see.

*Never trust html-browsers* :-)

Just get rid of that  start-tag and it will turn out fine.

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] z-index and IE 6 - overlapping elements

[Bostjan Kern]

>
> I shoud imagine its these two rules that is causing a bit of ambiguity :
>
> .album *
> {
> position: absolute;
> z-index: 0;
> }
>
> .albumSub
> {
>   z-index: 100;
> position: absolute;
> /* other stuff */
> }
>
> I am guessing that the first rule is given a higher specificity,
> however according to [1] the * should not give it any higher
> specificity, but it isn't absolutely clear about the subject.  I guess
> its a different interpretation of the standard.
>
> If I were you I'd not use the wildcard selector because its not
> immediately obvious. You can target the a element for that.  Then I'd
> override that with the second rule, using .album as an extra class
> name to increase its specificity :
>
> .album a
> {
> position: absolute;
> z-index: 0;
> }
>
> .album .albumSub a
> {
>   z-index: 100;
> position: absolute;
> /* other stuff */
> }
>
> HTH
>
> Sam
>
> [1] http://www.w3.org/TR/CSS21/cascade.html#specificity
>

Hi!

I tried the above solution, but the bottom  element is still overlapping
the top  and 

I overwrited the corrected version you suggested here:
http://neovizija.com/emanuel/

Any other ideas folks?
__
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] Simple (?) padding question

[Gunlaug Sørtun]

antmanbee wrote:

>> I have the following code put on a simple layer:
>> 
>> .box {
>> padding: 10px 30px 30px;
>> height: 500px;
>> width: 465px;
>> }
>> 
>> this keeps the inserted text at a consistent distance from the box on the
>> left hand side and the top (in Firefox etc).
>> 
>> but how do I, and where do I put in (I'm assuming) the 'box model hack', and
>> which version of it would be best to use?

> http://www.proctor.mistral.co.uk/css_test.htm

May I suggest that you don't put paddings on containers, but instead set 
'full width' on them and add suitable margins to content - paragraphs 
and stuff.
That way you'll only have the width of borders (if there are any) that 
may create minor differences between Strict- and Quirks mode 
browsers/versions. Rarely ever any need to 'hack the box' then.

I will also suggest that you avoid using pixels for 'font-size' and 
'line-height', and avoid setting 'height' on containers, as it starts to 
get ugly once some font-resizing is applied in any of my browsers.

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/

[css-d] Question:Background in IE[6]

[Mark Fellowes]

In my experiments to learn layout I've run into this problem twice. 
As you'll see in my code, in the right column I've set the H1 to have a white 
background
and the right column itself to have a purple.  
In Firefox it displays almost correctly, in IE the purple doesn's show through 
where the blocks of H1 are set.
Here is the URL:

http://pamshop.com/Template1/exp6.html

TIA
Mark
__
your personal webtop. @ http://www.goowy.com
__
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] z-index and IE 6 - overlapping elements

[Sam Partington]

I shoud imagine its these two rules that is causing a bit of ambiguity :

.album *
{
 position: absolute;
z-index: 0;
}

.albumSub
{
  z-index: 100;
 position: absolute;
 /* other stuff */
}

I am guessing that the first rule is given a higher specificity,
however according to [1] the * should not give it any higher
specificity, but it isn't absolutely clear about the subject.  I guess
its a different interpretation of the standard.

If I were you I'd not use the wildcard selector because its not
immediately obvious. You can target the a element for that.  Then I'd
override that with the second rule, using .album as an extra class
name to increase its specificity :

.album a
{
 position: absolute;
z-index: 0;
}

.album .albumSub a
{
  z-index: 100;
 position: absolute;
 /* other stuff */
}

HTH

Sam

[1] http://www.w3.org/TR/CSS21/cascade.html#specificity


On 02/05/06, Bostjan Kern <[EMAIL PROTECTED]> wrote:
> Hi!
>
> URL: http://neovizija.com/emanuel/
>
> Problem: The element with z-index: 0; is overlapping the element with
> z-index: 100.
>
> It works fine in Safari, Firefox and Opera though.
>
> Any ideas how to *fix* this?
>
> Cheers,
> Bostjan :)
> __
> 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] Assistance on site

[Zoe M. Gillenwater]

Dave Goodchild wrote:
> Hi all, hope you're well. I have just completed my business site using pure
> xhtml and css and am pleased with the results which can be seen at
> http://www.web-buddha.co.uk.
>   

Another suggestion to add to Georg's: get rid of the fixed height on the 
nav bar and footer so that they can expand as the text does.

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/

Re: [css-d] Placement changes slightly from page to page

[Zoe M. Gillenwater]

Tony Balazs wrote:
> I would be very grateful if you could help me fix a problem.  When  
> clicking between pages using the left nav bar some pages seem to move  
> right or left relative to each other and I can't see why.
>   

Because the vertical scrollbar comes and goes. My advice -- ignore it. 
Most people won't notice it, and I personally appreciate the fact that 
the vertical scrollbar isn't always present.

"But it's driving me crazy!" you say. Alright, if you insist:
http://www.communitymx.com/abstract.cfm?cid=528A0

> Also (sneaking in a supplementary here) I would like to place the  
> logo, currently in the middle under the title image to the left,  
> above the left nav bar and another small image (smaller than the  
> logo) to the right, above the right column, but I can't seem to do  
> this without messing other stuff up.  Can anyone help?
>   

Is there a reason why you can't just place each image in each of those 
divs forming those columns? Send us a link to the page that demonstrates 
the problem you are having.

> The site is http://www.snowflakeschool.org.uk/ and the css is http:// 
> www.snowflakeschool.org.uk/simple.css
>   

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/

Re: [css-d] This is driving me nuts (dont know what to call it)

[Zoe M. Gillenwater]

[EMAIL PROTECTED] wrote:
> Georg the two links below your name were very helpful.
>
> After reading through them, I dont understand why the right columns 
> padding needs to be set to 1px. I tried setting padding top to 0px but 
> It does not have the same result.
>
> I was wondering if this could be explained easily
>   

Brian,

In addition to what Georg has said, I recommend checking out our wiki 
page on collapsing margins:
http://css-discuss.incutio.com/?page=CollapsingMargin

Make sure to read the very first link on that page, an article by Eric 
Meyer. It describes why margin collapsing occurs (it's actually a good 
thing that happens all the time without you knowing it).

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/

Re: [css-d] Re Weird space in list with floats

[Zoe M. Gillenwater]

francky wrote:
> [1] While I couldn't RE from the original post, I'm afraid this reply 
> will not adjust in the proper place in the list.
>
>   

And this is why I just responded to Vinson as if no one else had 
responded -- I didn't see this reply. Just ignore me Vinson! Francky has 
already taken care of it (thanks Francky!).

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/

Re: [css-d] Weird space in list with floats

[Zoe M. Gillenwater]

Vinson Gracia (777) wrote:
> I have a hierarchical list that I would like to contain Divs with
> other floating divs for each list item.
>
> But I get some weird space after the div only if there are no textual
> elements in it. I'm just wondering why this is happening and is there
> a way to control this space. I have tried many things (clearing,
> padding, margins, heights) with no success.
>
> The wierd thing is that this effect does seem to happen outside of a list.
>
> Here is a visual example of what I am talking about:
>
> http://vinson.gracia.googlepages.com/home
>   

Hi,

I haven't seen any responses to this question, but I'm unsure of the 
details of your problem. Can you please post the actual page, instead of 
the screenshots and code? If you can't, can you please post the before 
and after code? I'm not sure where you added the nbsp; to get rid of the 
space. Also, is this only in IE?

Make sure to send any additional information to the list, not just to 
me, as someone else may be able to provide you with help sooner than I.

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] z-index and IE 6 - overlapping elements

[Bostjan Kern]

Hi!

URL: http://neovizija.com/emanuel/

Problem: The element with z-index: 0; is overlapping the element with
z-index: 100.

It works fine in Safari, Firefox and Opera though.

Any ideas how to *fix* this?

Cheers,
Bostjan :)
__
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] Jumping blocks in Ie

[Guillaume]

Hi everyone,

I'm experiencing a content jump in Ie ( all versions ) in a list using a 
simple a:hover {background-color: #000;}
This is a known bug since Ingo Chao has built a detailed description on 
Pie about: "Quirky Percentages in IE6's Visual Formatting Model".
I tryed to remove the floats, wrap my list in other containers... 
Without any success, I just can't find my way out this problem...
Here's the page:
http://www.louiscarre.fr/contact
In Ie if you mouse over the list on the right, the block just below will 
jump.

Any advice ? Any idea on how to fix this ?

Thanks.

Guillaume.

__
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] Problems rendering in IE6

[Raoul Snyman]

Hi,

http://saturnlabs.homelinux.net/treasure/catalog.html

On this page, if you browse using IE6 (and 5 too I presume), you'll see 
that the page is wide although there's nothing there. In Firefox, the 
design is perfect.

It seems that the width of the #listing div is wider than the page, but 
I can't seem to bring it in. Any ideas?

Thanks,

-- 
Raoul Snyman Saturn Laboratories
Cell: 082 550 3754   Mail: [EMAIL PROTECTED]
Web: www.saturnlaboratories.co.zaBlog: blog.saturnlaboratories.co.za
Truth about Microsoft: http://msversus.org/   Linux User #333298
__
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] Simple (?) padding question

[antmanbee]

on 2/5/06 9:40, [EMAIL PROTECTED] at [EMAIL PROTECTED] wrote:

> I dont' understand the problem. Paste in all the code and I will try and
> help.
> 


thanks ross

I've got a test page online that may/should clarify it for you

IE: top of main text box spacing incorrect

Firefox etc: top of main text box spacing correct



http://www.proctor.mistral.co.uk/css_test.htm




amb

__
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] Simple (?) padding question

[ross]

I dont' understand the problem. Paste in all the code and I will try and 
help.


Ross



- Original Message - 
From: "antmanbee" <[EMAIL PROTECTED]>
To: 
Sent: Tuesday, May 02, 2006 9:12 AM
Subject: [css-d] Simple (?) padding question




Hello list

First of all I'll come clean and admit that I'm far more used to dealing
with Flash than anything else ­ so don't start throwing things at me!

But I have to do this site in html and am trying to make use of CSS to make
the type look 'pretty'.

And I've encountered the problem with box padding and IE . . .

Everything looks fine in most other things but the padding *at the top* of a
CSS box just won't stay right in IE.

I have the following code put on a simple layer:

.box {
padding: 10px 30px 30px;
height: 500px;
width: 465px;
}

this keeps the inserted text at a consistent distance from the box on the
left hand side and the top (in Firefox etc).

but how do I, and where do I put in (I'm assuming) the 'box model hack', and
which version of it would be best to use?

I've done all the google searches but need a bit more hand-held help.

many thanks for your input



amb

__
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/

[css-d] Simple (?) padding question

[antmanbee]

Hello list

First of all I'll come clean and admit that I'm far more used to dealing
with Flash than anything else ­ so don't start throwing things at me!

But I have to do this site in html and am trying to make use of CSS to make
the type look 'pretty'.

And I've encountered the problem with box padding and IE . . .

Everything looks fine in most other things but the padding *at the top* of a
CSS box just won't stay right in IE.

I have the following code put on a simple layer:

.box {
padding: 10px 30px 30px;
height: 500px;
width: 465px;
}

this keeps the inserted text at a consistent distance from the box on the
left hand side and the top (in Firefox etc).

but how do I, and where do I put in (I'm assuming) the 'box model hack', and
which version of it would be best to use?

I've done all the google searches but need a bit more hand-held help.

many thanks for your input



amb

__
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] Centering a 2 column layout

[Els]

Mike Gillespie wrote:

> A 2 column left justified layout was easy enough to do, but
> this centered version is getting to me.
> I can get it to look right in FF/Win or IE6/Win, but not both.
> Looked for hacks, but so far, nothing that helps when page is
> centered (even though they work when not centered).
>
> http://www.striking.com/page.htm is the sample, look at it in
> IE6/Win and FF/Win and you will see.  Hopefully it is a simple
> error and I am suffering from "over the shoulder" syndrome, so
> if someone will look over my shoulder and say something like
> "Dummy, you just need to. . ." I would appreciate it. 

Take off the position:relative and its values from #pghead, 
#topbar, #content and #footer, and then give theme a margin-left 
of 125px.

Q for you: what are you gonna do when the content of the sidebar 
is gonna be higher than 450px? Or when the content area's text is 
higher than 300px? (Visitors do resize their fonts, especially 
when initially set as small as you did in this example)


-- 
Els
http://locusmeus.com/
http://locusoptimus.com/

__
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/