PDA

View Full Version : CSS Conflict With Backgrounds


Crumpy1
01-14-2013, 05:36 PM
I have integrated 3 jQuery Mosaic Sliding Boxes plugins into my website, however there seems to be a conflict somewhere with my css.

I have assigned the mosaic.overlay rule with a background colour of #111, so that the text can be read over the top of the image, however when i look at it live it is completely transparent.

I have no idea where the conflict is, i have tried using the safari inspector but it shows no instance anywhere that the rule exists but is 100% in my css.

I would appreciate any help you guys can offer.

My webpage is here https://dl.dropbox.com/u/104598901/Website/index.html

The boxes are at the bottom of the page under popular services.

The plugin is suppose to look like these http://buildinternet.com/project/mosaic/1.0/

Thanks

Ricky55
01-14-2013, 09:20 PM
Your div with a class of details has this background background-color:
rgb(0, 0, 0);

i.e. transparent. Just set this to the colour you want.

If you can't see this add this to the bottom of your style sheet

div.details {
background: black !important;
}

Then when you can see it works remove this and add it where it belongs.

Ricky55
01-14-2013, 09:25 PM
I wouldn't get too hung up on these types of hover effects as they don't work on touch screen devices too well if at all.

They look kinda cool but for me they add quite a lot of bulk for not that much reward. You have to add a few extra bits to your HTML, CSS and then there's the script its self.

You'd be better looking at a CSS only implementation at least that way you don't have to load extra JS.

Crumpy1
01-15-2013, 10:43 AM
Your div with a class of details has this background background-color:
rgb(0, 0, 0);

i.e. transparent. Just set this to the colour you want.

If you can't see this add this to the bottom of your style sheet

div.details {
background: black !important;
}


Thanks for the help, worked a treat!

I will look into a more permanent solution for my slideboxes as i agree they are not great on my ipad, however these are the best i could find that serves this purpose.

Do you mind having a look at my first slide on my text slider (Above the slidebox plugins)

On all browers except ios mobile the text displays @ 75% size. However the first slide only displays @ 100% on ios mobile

I have definded the rule for the whole slider and individually for the specific slide, but i cannot get it to 75% on my ipad & iphone.


#slideDeck p {
margin-top: 5px;
font-size: 75%;
}

.skin-slidedeck dl.slidedeck dd.slide_1 p{
font-size: 75%;
}



Also i noticed you are using the same cookie controller that i am using. How did you stop the controller from displaying every time someone clicks a page? I accept the terms but asks me again on every page?

Thanks for the help!!

Ricky55
01-16-2013, 02:16 PM
Looks okay to me. Are you referring to the text slider immediately above our most popular services?

Why are you using % to set your type anyway?

This is just a fixed width design so may as well just use pixels to set your type. Some argue that some browsers text doesn't scale when set in pixels but modern browsers scale the whole page.

If you want to use a relative unit you'd be better using em's.

Crumpy1
01-25-2013, 09:50 AM
Looks okay to me. Are you referring to the text slider immediately above our most popular services?

Why are you using % to set your type anyway?

This is just a fixed width design so may as well just use pixels to set your type. Some argue that some browsers text doesn't scale when set in pixels but modern browsers scale the whole page.

If you want to use a relative unit you'd be better using em's.

Tbh i use % as this is how i was taught, and until now it has never caused me any issue.

Yes i was refering to the text slider above the image slide boxes, but even when changing the 75% font size to 0.75em it is not changing the first slides text size.

I cannot find any css confliction using safari inspection tool.

It is only affecting ios mobile using an iphone. It work perfectly on an ipad (both using latest ios version)

Any ideas?