CODEWITHSUNDEEP
jqueryhtmlcss
Marcin Cylke
Marcin Cylke

Reputation: 2066

Problems with interfering CSS

I've got a problem with some CSS on my site. What I'm trying to do is put some caption for images on my site. I've been trying jquery-capty plugin (http://www.wbotelhos.com/capty/) and some custom css styles for framed images (http://www.labnol.org/internet/design/add-text-captions-align-images-html-css/2309/). Both of this solutions work in my normal layout, but when I put them in inlined list each of them falls apart.

I've created a small example of the problem on this site:

http://auto-czesci.innovative-labs.com/test.html

The upper two images show the correct behaviour of those styles, however the lower ones are simply broken.

Could some one help me with this problem?

EDIT I'm using two approaches here.

One with css class picture:

<div class="picture" style="width: 127px;"><img class="popup" src="images/offer/g3_farecla.jpg"><br/>Pasta polerska</div>

And the other with jquery capty plugin:

<img class="imgc fix_promo" src="images/offer/g3_farecla.jpg" alt="Pasta polerska"/>

These lines are quite clear for me and I'd like to get one of those methods working.

All the additional code visible when opening the site with firebug may be added by jquery, etc. Be aware of that.

Upvotes: 0

Views: 1054

Answers (5)

clairesuzy
clairesuzy

Reputation: 27624

As you'd like to keep your code structure, the main thing you have to do is to not have your ul and li elements display as inline (inline elements can't take width or height) but instead make the li elements inline-blocks within a block level ul in my fiddle example (link below) I've taken your capty.css and your custom.css and changed the relevant bits (I've left your own CSS in my sheet at the bottom, commented out so you can compare)

I could've put the new capty elements CSS in the stylesheet, but as some of it is needed to override some parts generated by capty.js I did it via the jQuery, also added the position: relative; fix for IE7.

The main thing, after the "inline problem" was fixed, was that the generated width and height for the capty-wrapper was 125px but in order to allow for your paddings and borders it needs to be slightly different to get the 127px you have on your div.picture example

I then made the capty-wrapper CSS match your div.picture CSS

the changes to capty-caption are to make the caption fill the wrapper and also have enough height to incorporate the longer captions, I'm not sure how capty actually works so am not sure how complex it is to get the text vertically centered when different length captions are involved.. for another question perhaps ;)

but hopefully this example might go some way to helping with the alignment

Example : HERE

Upvotes: 1

ryanmarc
ryanmarc

Reputation: 1680

Making the following changes to your css corrected the layout issues on my local testing.

first, remove the following declaration:

#car-parts-container ul li div {
  display:inline;
}

Second, add:

width: 127px;

to .picture in your stylesheet.

Upvotes: 0

robx
robx

Reputation: 3123

I've been reading and understand you'd like to keep your code the way you have it, but also as everyone has pointed out that your html is very difficult to follow. Perhaps you may as @Thomas Shields said, "scratch the plugin" and do something much simpler as per http://jsfiddle.net/robx/uMBEn/ Just something to think about. Might well be much simpler than using that plugin.

Upvotes: 0

Thomas Shields
Thomas Shields

Reputation: 8942

Try wrapping the image and it's description thing into one div and styling accordinlyg:

<div>
<img style="width:100px; position:relative;"/>
<div style="width:90px; padding:5px; background-color:blue; position:relative; top: -

34px;">Description</div>
</div>

(and of course you can tweak to fit)

Upvotes: 0

Heath
Heath

Reputation: 408

I think your problem is more of an HTML issue and not a CSS one. The items you have above have the following markup:

<div style="width: 127px;" class="picture">
  <img src="images/offer/g3_farecla.jpg" class="popup">
  <br>
  Pasta polerska
</div>

Whereas the ones below have this code:

<li>
  <div class="capty-wrapper" style="overflow: hidden; height: 125px; width: 125px;">
  <div class="capty-image">
    <a href="#">
      <img alt="Pasta polerska" src="images/offer/g3_farecla.jpg" class="imgc fix_promo">
    </a>
   </div>
   <div class="capty-caption" style="height: 40px; opacity: 0.7; position: relative; top: -40px;">Pasta polerska</div>
 </div>
</li>

My advice is to unify the markup and get rid of all of those inline styles you have. If the markup is the same then you should get the same look and feel from your other CSS styles.

Upvotes: 1

Related Questions