What is the rule against this?

bobbyballgame

unread,

Jul 23, 2003, 4:03:08 PM7/23/03

to

Given the html + css below, why is the css not taking effect? ( It will take
effect if I change the first stylesheet rule from
#testdiv.cd{
to
#testdiv.c{ [or if I simply comment it out]

What is the spec on this?- am I allowed to specify the style for an id with
multiple styles for different classes?

Thanks,
BB

<html>
<head>
<title>What the ?</title>
<style type="text/css">
#testdiv.cd{
position: absolute;
left: 0%;
width: 50%;
border: 4px dashed dimgray;
background-color: orange;
}
#testdiv.c{
position: absolute;
left: 0%;
width: 50%;
border: 4px dashed dimgray;
background-color: aliceblue;
}
</style>

</head>
<body>
<div id="testdiv" class="c">stuff</div>
</body>
</html>

Jens Duttke

unread,

Jul 24, 2003, 5:21:55 AM7/24/03

to

hi!

"bobbyballgame" <som...@microsoft.com> schrieb im Newsbeitrag
news:eEQiyVVU...@TK2MSFTNGP09.phx.gbl...

> Given the html + css below, why is the css not taking effect?

> #testdiv.c{
> ...

> <div id="testdiv" class="c">stuff</div>

Why don't you simply use, just the ID ? Since the ID must be unique in the
complete document, i don't see a reason for defining both, #testdiv and .c

Cu, Jens
--
http://www.emucheater.com

bobbyballgame

unread,

Jul 24, 2003, 10:15:38 AM7/24/03

to

Good question. I generally try to simplify the problem when posting here to
avoid clutter, but if you really want to know:

My html page is created by doing an xslt transformation of dynamic xml data.
I would love not to use tables, but there are some issues. This is rather
simplified, but assume that i have two sections on the page:

These sections are filled dynamically, so we can have both sections empty,
both full or either full. In the case that one is empty its style should be
"display:none;". If a section is full its style should be "width:100%" if
the other is empty, or "width:50%" if the other is full. So, I have created
the structure

#left{
position: absolute;
border: 1px solid black;
top: 100px;
}

#right{
position: absolute;
border: 1px solid black;
top: 100px;
}

and now I want to position them according to different dynamic classes

#left.rightonly{
display: none;
}

and so on.

Additionally, after I posted, I looked at the spec, and I should be able to
use a more generic format:

#left[class~="rightonly"]{
display:none;
}

but IE6 [the only browser my clients will use with this web application]
does not support the standard.

So, I have to figure out another way of doing all of this. One way is to do
it in the XSLT, but I hate that idea, and it seems to miss the whole point
of css.

I could also write some script that runs onload and recalculate the sizes
and set them from jscript, but I do not really like this idea either and it
seems to be very much at the whim of particular browser settings (what
happens when their companies admin applies a new security lock down tool
that prevents unsigned script from running, etc.)

Probably I will end up making a lot of different unique classes that look
like:

class=idleftclassrightonly ~ I might make the naming scheme a little more
tolerable, but you get the idea
class=idleftclassleftright
class=idleftclassleftonly

Horrible, of course, but preferable to the other options.( The actual rather
than simplified case is much more horrible as there are 5 'sections')

And also, probably, there is amuch better way that I have not though of.
Microsoft expressions are very interesting, although my quick look at them
leaves me thinking they are not quite what I need. Actually, I am going to
test that out right now...any pointers are always welcome.

"Jens Duttke" <nospa...@emucheater.com> wrote in message
news:bfo8ig$oih$03$1...@news.t-online.com...

Jens Duttke

unread,

Jul 24, 2003, 11:46:37 AM7/24/03

to

hi!

"bobbyballgame" <som...@microsoft.com> schrieb im Newsbeitrag

news:uLWQS4eU...@TK2MSFTNGP11.phx.gbl...

I am not really sure, if I understand your problem, because my english isn't
the best.

But what i understand is :

You've defined 2 containers in XML, one is called <left> and one is called
<right>
If both contain data, both will have width:50%, and <right> will have
left:50%
If <left> or <right> (not both together) contains data, this container will
have width:100%, and the other display:none.

Is that correct ?

I am a newbie in XSL, so maybe this is not the best way, but :

I've defined this XML file :

and this XSL file :

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="left">
<div id="leftDiv">
<xsl:choose>
<xsl:when test="not(string-length())">
<xsl:attribute name="style">display:none</xsl:attribute>
.
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="not(string-length(../right))">
<xsl:attribute
name="style">width:100%;</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute
name="style">width:50%;</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:value-of select="." />
</xsl:otherwise>
</xsl:choose>
</div>
</xsl:template>

<xsl:template match="right">
<div id="rightDiv">
<xsl:choose>
<xsl:when test="not(string-length())">
<xsl:attribute name="style">display:none</xsl:attribute>
.
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="not(string-length(../left))">
<xsl:attribute
name="style">width:100%;</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:attribute name="style">left:50%;
width:50%;</xsl:attribute>
</xsl:otherwise>
</xsl:choose>
<xsl:value-of select="." />
</xsl:otherwise>
</xsl:choose>
</div>
</xsl:template>
</xsl:stylesheet>

And this works, like I assume you want that it works.

In the HTML-File I've defined :

{
position:absolute;
border:1px solid black;
top:100px;
}

#rightDiv

{
position:absolute;
border:1px solid black;

top:120px;
}
</style>

Is that what you where looking for, or did i missunderstood you ?

Cu, Jens
--
http://www.pixelforge.de
http://www.emucheater.com