Inheriting CSS properties

Flip Order - Newest First | Show Avatars

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Tue 21/01/03 at 17:42

Webmaster

Regular

Posts: 787

Currently on my Web Site, I have a few

's to represent boxes for each link. Each box has the same properties, bar the top: px; one.

Therefor, I have one,

called a set number of times, with it calling the properties from the Style Sheet file and just add the top: px; to the actual

in the page, eg:

#Link-Box {
position: absolute;
left: 10px;
width: 140px;
height: 22px;
padding-top: 2px;
padding-left: 4px;
border-style: solid;
border-width: 3px;
border-color: #FF00FF;
background-color: transparent;
color: blue;
overflow: hidden;
}

Now, it appears I am unable to do this, as calling a div with a name already in use isn't correct (so only one can be reffered to as Link-Box). So, I'm going to have to create an id for each box, and style properties for each.

In the style sheet, is there a whay where I can have all the properties for "Link-BoxA", and for the rest, 'Link-BoxB, 'Link-BoxC' etc, have them inherit the propertis from the first definition, to save me writting the came properties again and again and again???

Something along these lines:

#Link-BoxA {
position: absolute;
left: 10px;
top: 100;
width: 140px;
height: 22px;
padding-top: 2px;
padding-left: 4px;
border-style: solid;
border-width: 3px;
border-color: #FF00FF;
background-color: transparent;
color: blue;
overflow: hidden;
}

#Link-BoxB {
inherit #Link-BoxA;
top: 135;
}
#Link-BoxC {
inherit #Link-BoxA;
top: 170;
}
#Link-BoxD {
inherit #Link-BoxA;
top: 205;
}

Link 1

Link 2

Link 3

Link 4

Thank you for any help on the matter.

Page:

Page:

Thu 23/01/03 at 15:51

Insane Bartender

Regular

"Darkness, always"

Posts: 9,603

Given that Internet Explorer has an option where you can view any page you look at with your own, pre-defined stylesheet, it may be wise not to become overly reliant on CSS.

That said, I have no idea what IE wil do when you go to a page with a stylesheet of its own. Never used such a nonsense idea...

Report

Wed 22/01/03 at 18:53

cjh

Regular

"It goes so quickly"

Posts: 4,083

Cheers for the reply, but I've just figured it out.

All I had to do was add the names into the first set of properties, seperating them with a comma:

#Link-BoxA, #Link-BoxB, #Link-BoxC, #Link-BoxD, {
position: absolute;
left: 10px;
top: 100;
width: 140px;
height: 22px;
padding-top: 2px;
padding-left: 4px;
border-style: solid;
border-width: 3px;
border-color: #FF00FF;
background-color: transparent;
color: blue;
overflow: hidden;
}

and the add the "top:px;" style for each style in the style sheet, or in the actuall

code.

Thanks again for taking a look into it though :).

Report

Wed 22/01/03 at 16:55

Posts: 0

Do you have an example URL which shows the rendering problem you are experiencing?

Is this a problem with a specific browser, and/or version?

When I tried the following :

It appears to work as expected in both IE5.5 and NN6.2, I don't have access to any other browsers at work to test it on.

You aren't nesting Link-Dox DIV's by any chance are you?

Rgrds,
Dave

Report

Tue 21/01/03 at 17:42

cjh

Regular

"It goes so quickly"

Posts: 4,083

Currently on my Web Site, I have a few

's to represent boxes for each link. Each box has the same properties, bar the top: px; one.

Therefor, I have one,

called a set number of times, with it calling the properties from the Style Sheet file and just add the top: px; to the actual