4 replies [Last post]
tenor
Offline
newbie
Last seen: 16 years 43 weeks ago
Timezone: GMT-6
Joined: 2004-03-28
Posts: 3
Points: 0

I've been tweaking the layout of a set of sites I manage which all share the same stylesheet. There's a certain feature which seems to work in all browsers except IE 5.5/6, and I was hoping someone might have some insight into the source of the problem.

I can declare the following structure:

#topbar { several attributes of topbar }
     .home#topbar { additional, specific attributes of this topbar }
     .chip#topbar { additional, specific attributes of this topbar }
     etc....

and then use it on a page like this:

<div id="topbar" class="home"></div>

What this gives me is a standardized <div id="topbar"> which I can further customize (background image, color, etc.) by adding a class declaration of "home," "chip," etc. This works great in all browsers I've tested, but it does not work in IE 6. To work around the problem, I changed the class declarations to look like this:

.home {additional, specific attributes of this topbar }
.chip {additional, specific attributes of this topbar }

Note the abscence of the structure ".class#ID" in the declaration. Using this different class declaration, I can now call <div id="topbar" class="whatever"> and the desired topbar appears. This workaround is ok because the class names are unique throughout the stylesheet.

But this workaround is less desirable for the other part of the problem.

I've likewise set up a series of ID selectors for the purpose of column layouts throughout the site. Basically, I've developed a method of calling a two or three column layout depending on the usage of #column and #sidebar IDs in conjunction with classes. Here's the CSS:

#sidebar {
        width:160px;
        margin:0px; padding:0px;
        }

        .left#sidebar   { float: left }
        .right#sidebar  { float: right }

#column {  }

        .middle#column  { margin: 0px 175px }
        .left#column    { margin: 0px 175px 0px 15px }
        .right#column   { margin: 0px 15px 0px 175px }

Using this CSS, I can call a two column layout thusly:

<div id="sidebar" class="right">
Content for the sidebar.
</div>

<div id="column" class="left">
Content for the main column.
</div>

A three column layout looks like this:

<div id="sidebar" class="left">
Content for the left sidebar.
</div>

<div id="sidebar" class="right">
Content for the right sidebar.
</div>

<div id="column" class="middle">
Content for the main, middle column.
</div>

This works beautifully in all browsers except IE6. Of course, I am aware that I have two declarations for .left and .right, but I was thinking that I am using correct semantics such that there is a .left which applies to #sidebar, and it is completely different than .left for #column.

I don't remember where I picked up this technique, and of course, I don't know if it is actually correct CSS usage or not. I read through section 5 of the CSS spec at W3C.org and I could find no examples of calling a <div> with an ID selector AND a class selector.

My question is this: Is <div id="idselector" class="class selector"> valid? If so, what is wrong with my CSS rules using ".class#id?" Is there some other format for assigning class selectors so their rules only work within the context of a specific ID?

The site I'm working on is:
http://www.hubris.net/

The specific page where you can see the problem is:
http://www.hubris.net/about/company.html

Thanks.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 37 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

Using ID and Class Selectors in the Same Div

Have you tried using sequencing thing like

        #column .middle  { margin: 0px 175px }
        #column .left    { margin: 0px 175px 0px 15px }
        #column .right  { margin: 0px 15px 0px 175px }
you may find you get what you were looking for.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

tenor
Offline
newbie
Last seen: 16 years 43 weeks ago
Timezone: GMT-6
Joined: 2004-03-28
Posts: 3
Points: 0

Using ID and Class Selectors in the Same Div

DE,

Yes, I have tried that sequence but it doesn't solve the problem.

Thanks for taking a look, though.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 5 days 12 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Using ID and Class Selectors in the Same Div

Hi Tenor,
Firstly, id's should be unique on a document , classes can be reused.
So for your three column layout you could use

  
<div class="sidebar" id="left">  
Content for the left sidebar.  
</div>  
  
<div class="sidebar" id="right">  
Content for the right sidebar.  
</div>  
  
<div class="column" id="middle">  
Content for the main, middle column.  
</div>

Where you are using
Quote:
.left#sidebar { float: left }
which i don't remember seeing before, you are really specifying or targeting an element with an id of sidebar which is also of class left. So really if the id was unique which it should be the class is useless.

With a space between the values you are targeting an element of id sidebar within another element of class left. .left #sidebar { float: left }
If you want to target all elements of a class and a specific id, not necessarily inside that class you could separate the values with a comma
#left, .sidebar { float: left }

Hope that helps

tenor
Offline
newbie
Last seen: 16 years 43 weeks ago
Timezone: GMT-6
Joined: 2004-03-28
Posts: 3
Points: 0

The Solution: I Used Unique IDs

Sorry for the long delay in posting a reply. The solution I used was to develope unique IDs for the columns instead of shooting for the really deep abstraction I was going for. Now I have:

#sidebar-left
#sidebar-right
#column-left
#column-right
#column-middle

... and through combinations of these, I can always call up a 2 or 3 column layout: for example, a #sidebar-left and a #column-right make a 2 column layout with a small sidebar and large column. It works great, and the more I get used to it, the more "semantically correct" it feals.

Thanks again for the replys.