I'm looking for any working solution in IE8 for this little issue I'm having. For some reason css pie isn't working great on this server we are working on so we are having to use images for IE8 specific stylesheets to sort some quirks out.
On the right hand side there is a facebook panel that needs rounded corners, so far I have an image on the top of the panel to give it a rounded corner, but ideally we want rounded ones on the bottom too, but I just can't figure out how. Could anyone shed some light? Quick dirty fixes are welcome!
Image attached - see how it is in webkit compared to IE8:
http://i.imgur.com/0A9Ns2v.jpg
Thanks guys!
Edit: My solution was to add an extra div inside the parent. Thanks #Pete.
if you add an extra div inside your #block-facebook-pull-facebook-pull-default and then flip your /images/fb_top.jpg to create a bottom image, you can add the following style to the new div:
#block-facebook-pull-facebook-pull-default > div
{
background:url(../images/fb_bottom.jpg) left bottom no-repeat;
}
you then want to take all the padding off the parent div and put it onto the new div
Related
I am currently using bootstrap and have a 3x3 grid of images. They are 200x200 images and I have looked EVERYWHERE to try and find a way to get an overlay to work on them. I only recently started writing code.
Serenbe.com has exactly what I am looking for about halfway down the page (also a 3x3 grid). The photo brightens, and a logo appears over it when you run your cursor over it. However, I would settle for text/links if a photo is not possible or too complicated. Right now absolutely nothing is working.
My images are arranged in a div within a container. The div takes up 6 columns. And the only styling I have applied is removing the padding so that it touches the edge of the page.
Any suggestions? I am 100% lost here, anything helps.
Thanks!
Have you heard of using hover with your css? :) it's pretty cool and I think that's what the site is using for its images.
An easy way to do what you want for beginners is I would have two pictures. One being the original and the second one with the effect you want. For serenbe it seems like they just added the logo on top using photoshop, then changed the opacity of the photo.
I would then wrap your img in a div and then do something like this in your css:
.customdiv{
height:200px;
width:200px;
background-image:url("imagelinkhere");
}
.customdiv:hover{
background-image:url("newimagehere");
opacity:.5;
}
What this does is change the content in your div to the new picture when you hover over the div, then apply the opacity on the image.
These are just a few tips to help you get started! Good luck
I'm struggling with this website I made using webflow.io
It displays perfectly on desktop, but on mobile I get a white margin or padding on the right side that completely damages the site. I've tried to debug the code but can't find the culprit.
Any help would be appreciated.
The problem seems to be coming from the "Describe your app" section image sliding in from the right.
Adding overflow:hidden to the parent element should fix this or work on making the image absolute.
I am trying to figure out what keeps throwing off the positioning of my navigation menu on a site I'm working on. I have added an image just below my menu to accentuate it, which displays perfectly in Chrome.... however the div expands and locates itself below the logo in Firefox and IE. I've tried and tried and just can't seem to figure it out. If I eliminate the image it works perfectly, but with it... not so much.
Example: http://espritduvin.ca/ (View in different browsers to witness my issue)
Give your floating containers a width, e.g. 320px for the left container, 633 for the right one.
Try giving the image float:right, at the moment it's not given any css at all.
Firefox is rendering a clear on the header-right-section. Change the style for both left (logo) and right sections (nav bar) of the header to display: inline-block.
And I would suggest using Bootstrap for CSS in the future.
try to put proper width to header-right-section, i think it will work. Right now there is only float value.
If you are using bootstrap, you can put this right and left in 2 columns.
Ok I am attempting to round my corners via CSS so I can drop a bunch of images from an older style template I am remastering for a client. The idea is use something that can fail gracefully. Which I think it would generally speaking. However in this case it appears the the top left corner of one of the elements is not rounding like the rest of the same element is on its other corners. I am using a class to pass this to elements and this class works on all the other elements flawlessly its just this one element..
content_wrap to be more specific. Its the element that all the other elements reside in.
Here is a jsfiddle version of it.
http://jsfiddle.net/8qZze/
anyone have any ideas/suggestions?
You can add overflow:hidden to the #content_wrap to stop anything from overlapping the corners from inside. Live example: http://jsfiddle.net/8qZze/1/
#content_wrap{
overflow: hidden
}
I removed the ".white" rule and it worked, the child "content_left" has a rectangular shape ant it goes over the rounded corner of "content_wrap", try to specify some margin to leave more space for the rounded corner and everything will be fine.
Or try tw16's advice with overflow (forgot about it :) )
I've designed this page to show a picture gallery with a description for each picture. I use a div with static position and minus left and top margins, so the description is shown on top of the bottom part of the image.
The problem is that if I open the page for the first time with Firefox, the Div displays only partially (only on top of the image part is shown). Only when I click any other album does the div displays correctly.
This is the bad display image
The description div should have been displayed until the bottom of the container div. Try clicking another thumbnail image at the test site page.
This is the test site, to open the page, click the gallery menu, the one on the left bottom with a dog picture.
Has anyone encounter the same problem? Hope someone could help me. Any advice will be welcomed gladly.
Thank you!
Ah, I think I found the answer. I just put '!important' on the height attribute. And then Firefox displays the div fully!
Thank you, I should've thought that.
Use "position: relative" with negative "top" and "left" values.
I guess I've managed to solve the problem. It seems that the div is shown partially to the end of the Image tag just before the div. so then, I wrap the image in another div setting the div's height the same height of the image. I've tried it, and it looks find in FF now.
Thank you.