View Full Version : duplicate div id's


thiefwriter
09-15-2011, 07:45 PM
I should know this, but I'm so new at html and css. My eBook looks great in ePub and Mobi tests, but ePubCheck and ThreePress gave me lots of errors. Biggest seems to be duplicate div id's.

I guess that was my big mistake. I used one css div id for all images+caption, and another css div id for all sections I call "sidebar" so they have a certain look and rules at top and bottom.

There are many images and "sidebars" in each book chapter. How should I have handled the divs? I'm sure it's basic css…

I'll post the other error-type in a separate thread.

Thanks so much to anyone who can guide me…

JSWolf
09-15-2011, 07:49 PM
Are you sure you didn't mean to put these in class and not ID? All you have to do if your class is correct is add say an incrementing number to each div.

charleski
09-15-2011, 08:10 PM
Yes, while css styling can be directed to apply to a specific id, it's really designed to be used with class selectors. Ids have to be unique within each particular file and are best used as targets for anchor references. I suspect you could solve your problem simply by changing all id="sidebar" to class="sidebar" (and change #sidebar in the css to .sidebar).

thiefwriter
09-15-2011, 09:02 PM
Ugh, just lost my complicated reply with code. But I think maybe charleski's advice will help. I'll work on that and report back. Thanks so much!

thiefwriter
09-15-2011, 09:14 PM
Is it okay then to have multiple instances of "div class="sidebar" in one ebook chapter?

And shall I change the div.pic's to the same code, i.e. "div class="pic"?

A sample of my html:

<div id="sidebar">
<p class="sidebarmark">Aside&hellip;</p>
<p class="subhead">X-Ray Glasses</p>
blah, blah, blah…
</div>

Which should now become, if I understand correctly:

<div class="sidebar">
<p class="sidebarmark">Aside&hellip;</p>
<p class="subhead">X-Ray Glasses</p>
blah, blah, blah…
</div>

and

<div id="pic">

<p class="center"><img src="b.luciano.jpg" alt="luciano" /><br />
Luciano, a pickpocket who works on trams and buses.
</p>
</div>

…which should now become "div class="pic" ?

Just shows how badly a newby can screw it up. I needed to format an ebook, but I didn't know much about html and css. I'm learning, I hope…

Jellby
09-16-2011, 04:19 AM
And you should change your CSS file from div#sidebar to div.sidebar (# is for ids, . is for classes)

thiefwriter
09-17-2011, 11:00 AM
Thanks for the help everyone. That fixed me right up. I've got an error-free epub now!