CSS Clashes

[Kemik]

Hello,

I'm trying to make these css bubbles for news comments in my app, however there are clashes and I'm not sure how to solve them. I'm a PHP coder, not a designer

My site | CSS bubbles

The bubble has been applied to the bottom comment. Any help would be appreciated.

Thanks.

 

[Augmented]

You need to include/upload all the relevant images e.g. tip.gif.

For example, the rule

#bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(tip.gif) no-repeat 20px 0;
	font-style: normal;
}

is looking for the tip.gif file that doesn't appear to exist on your site - is it pointing to the right directory?

 

[Kemik]

You need to include/upload all the relevant images e.g. tip.gif.

For example, the rule

#bubble cite {
	position: relative;
	margin: 0px;
	padding: 7px 0px 0px 15px;
	top: 6px;
	background: transparent url(tip.gif) no-repeat 20px 0;
	font-style: normal;
}

is looking for the tip.gif file that doesn't appear to exist on your site - is it pointing to the right directory?

Fixed, thanks.

The main problem is that the blockquote style for the rest of the site is being applied. I need to apply only the bubble blockquote style.

 

[simisker]

It's because <blockquote>, as a basic HTML element, has specificity over even divs with ID.

To be on the safe side, add a declaration in your CSS like so:

div#bubble blockquote {
background-image: none; /* ...and add other descriptors you may want to use/override /*
}

That should tip the specificity scales in your favour. Hope so, anyway - it's been a while, I'm a tad rusty

[EDIT: Don't leave out the 'div' before the ID declaration - it's needed to outweigh the <blockquote>!]

[EDIT 2: Ooh, look Ma - a designer AND a developer ]

 

[simisker]

Actually, it's a bit less to do with specificity than I thought - it's because there's simply no 'un-declaration' of the blockquote background image when it's cascaded from the bubble ID div

There's already a declaration for

#bubble blockquote

further down the CSS, so just add

background-image: none;

to that declaration [not the cite one], and that should sort it. Or specify an alternative image, whichever your intended design requires.