- This topic is empty.
-
AuthorPosts
-
September 13, 2013 at 9:12 am #149979pallavi1811Participant
Hi
I have the below html code:
<a class="thumb active" href="#TI42"> <div class="img-wrapper"> <div class="image"> <img src="xyz.png" height="56" width="96" alt=""> </div> </div> <p class="tip-truncate">Receive</p> </a>
Now i am giving background color to class=”img-wrapper”. which comes fine in normal default zoom in chrome. But when i zoom in the border is inconsistent.
below is the css:
`body#tips .toggle-nav .thumb.active .img-wrapper {
cursor: default; background: #0090d8; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #65ccff), color-stop(100%, #0090d8)); background: -webkit-linear-gradient(top, #65ccff 0%, #0090d8 100%); background: -moz-linear-gradient(top, #65ccff 0%, #0090d8 100%); background: -o-linear-gradient(top, #65ccff 0%, #0090d8 100%); background: linear-gradient(top, #65ccff 0%, #0090d8 100%); } body#tips .toggle-nav .thumb .img-wrapper { margin-bottom: 6px; padding: 1px; -webkit-border-radius: 11px; -moz-border-radius: 11px; border-radius: 11px; }`
September 13, 2013 at 9:20 am #149982Paulie_DMemberNow i am giving background image to class=”img-wrapper”
Are you?
I can see that you are actually putting an image INSIDE the link…where is the bg image being applied?
I’m thinking a Codepen (with proper linked images) would help here.
It might also be useful to see what all this is supposed to look like.
September 13, 2013 at 9:30 am #149984pallavi1811ParticipantPlease see below:
http://codepen.io/pallavi1811/pen/loxEi
Sorry i meant background color. The background color should come as a border for the image. But it is varying on zooming in and out. when 100% zoom, it comes as a four sided blue border which is correct. but when i zoom in to 75% in chrome, either the right side border goes or upper or any of them. What is the solution for this.
September 13, 2013 at 10:08 am #149986Paulie_DMemberThe structure you have there seems odd…why do you have an image-wrapper and another div which, in fact, wraps the image with a class of .image?
In fact, why do you need an image wrapper and to to continue on, shouldn’t that image, in fact,** be** in the background?
September 13, 2013 at 10:10 am #149987pallavi1811Participantthe structure has to be like this only. This structure is ot created by me. Is there any solution?
September 15, 2013 at 10:18 pm #150171pallavi1811ParticipantHi
Thanks John but its still not working with this. when i zoom in more than 75% it goes out. i have multiple
<a>
like this with display:inline. like a gallery it is. So how should i go with this?Need Urgent help on this.
September 16, 2013 at 2:17 am #150181Paulie_DMemberwhen i zoom in more than 75% it goes out
Goes out where?
Perhaps you could provide us with a live link to we can see the actual problem because we’re obviously not seeing it in Codepen?
September 16, 2013 at 3:01 am #150185Paulie_DMemberPerhaps a little more like this: http://codepen.io/Paulie-D/pen/bqspv
September 16, 2013 at 5:33 am #150198Paulie_DMemberHere’s slightly different take on it with text inside the anchor
@ Jurotek…Looks nice but he can’t change the HTML structure he has.
My original version does have the text inside the anchor but I only applied the bg color to the image wrapper.
Updated: http://codepen.io/Paulie-D/pen/uALIG
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.