ansaurus

Question

CSS Multiple ID with Same Name Work Around?

Answer 1

+1 A:

Can you attach a class around it ? Have a div or span some other element surround your code that does the generation and assign a class to it.

sjobe 2010-08-26 20:07:33

Answer 2

+1 A:

I'd say you have to use different style sheets on each page if you need different styles for the same ids, but this will be a pain to maintain as you make styling changes.

Alternatively you could you assign a class to one of the page's UL tags and then create a style for that class.

Abe Miessler 2010-08-26 20:07:59

Answer 3

+1 A:

First of all, the plugin is still not generating the correct ids because ids can't be numbers. To answer your question, try to figure out some parent element that might be different between the two pages probably in which case you can use CSS such as this:

#parent ul#1{
  /* styles here */
}

#parent2 ul#1{
  /* styles here */
}

page1:

<div id="parent">
  <ul id="1">
    ............

page2:

<div id="parent2">
  <ul id="1">
    ............

So you need to find out a some parent element of ul which is not common between the two pages. This is the only possibility that comes to my mind where you have no control over changing the ids or replacing them with classes since they are being generated by the plugin.

Sarfraz 2010-08-26 20:08:26

Answer 4

+1 A:

You need something to distinguish them if you want them styled separately. If you cannot modify those tag you could probably use some parent container like:

<div id="parent1">
    <ul id="id1" />
</div>

<div id="parent2">
    <ul id="id1" />
</div>

and then:

#parent1 ul {
    ...
}

#parent2 ul {
    ...
}

Also notice that an id cannot start with a number as in your case. You should probably consider switching/modifying this plugin.

Darin Dimitrov 2010-08-26 20:09:03

I believe this will work for me. It is just bad practice but I don't really have a choice. Thanks.

Xtian 2010-08-26 20:13:20

Answer 5

+1 A:

First, the unique ID suggestion is restricted to a page. It is perfectly fine to have multiple ID's on different pages. The best way to overcome this is to add a ID to the body.

Page1

<body id="Page1">
    <ul id="1">
        <li></li>
    </ul>
</body>

Page2

<body id="Page2">
    <ul id="1">
        <li></li>
    </ul>
</body>

CSS

#Page1 #1
{
    //Some style for page 1, ID 1
}


#Page2 #1
{
    //Some style for page 2, ID 1
}

Dustin Laine 2010-08-26 20:10:10

Thank you, makes perfect sense now.

Xtian 2010-08-26 20:22:24

Answer 6

A:

One thing I commonly do is attach a class to the body for each page. <body class="home_section"> and then you could style based on that class .home_section ul#1 {}.

Also, IDs must begin with a letter.

Jeff Adams 2010-08-26 20:12:17

ansaurus

tags:

views:

answers:

CSS Multiple ID with Same Name Work Around?

related questions