I have a table that contains an image, but for some reason I cannot get certain images to center correctly. When I apply max-width:170px the image resizes correctly, but it does not center. In every other browser (even IE7) everything looks good, but IE8 chokes. Here is the FIDDLE http://jsfiddle.net/5VT7e/.
Note: I created the fiddle in Chrome, but went to view it in IE8 and I guess JSFIDDLE doesn't work in IE8. None-the-less you can view all the code ;)
Here's a screen shot of the problem:
Problem:
Desired:
First image looks okay
Second image is shifted to the right
Third image looks okay
Fourth image is shifted to the right
Fifth image is shifted to the right
Pretty much any image that max-width:170px effects is shifted to the right.
Thanks for having a look.
This answer provides two possible solutions:
Set width: auto on your images
Provide a width on the direct parent element of the images.
Related
This is one that absolutely confounds me. I have a site that uses a full-screen "splash screen", which the user then slides away to reveal the content beneath. In Chrome and Firefox, everything displays properly, but on Safari (both mobile and desktop), the div is split down the middle, the left half of the div is transparent (showing through to the content beneath) and only the right half is visible. All the content within it is still positioned as if it were full-screen, but it's all abruptly cut off halfway cross the screen, right down the middle of an image and a block of text. After several days rifling through the inspector I can't find any reason why Safari would be exhibiting this truly bizarre behavior—the split doesn't seem to follow any existing borders or boundaries of any elements, the inspector is acting as if the entire div is visible.
The only thing I can think of is: This issue seems to have appeared around the same time as I introduced some schmancy transform3d effects on the body, is Safari known for being unable to properly handle transform3d effects?
Since I have no idea which section of code could be causing this glitch, I'm not sure what code I would paste here, but the website is http://vanderstank.church. I apologize again for the broadness of this question, but I am unable to narrow it down any further. Thanks for any light you may be able to shed on this situation.
Solved this myself - it was related to the 3D rotation I added. Turns out I had applied the rotateY(6deg) effect not only to body but also to the #front div. I couldn't get that #front rotation to actually work right, so I'd given up on it... but forgotten to delete the line.
But because #front had a rotateY(6deg) on it while on the same plane/axis as body, it rendered as if the right half of it was "in front of" the body but the left half was "behind" the body. Still not sure why this only happened in Safari.
Remember to delete or comment out old code, guys!
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.
I have this bug that let some text appear a few pixels outside a div on the right side. The strange thing is that it only happens in Safari. I've never seen it before and it's just regular HTML/CSS what I have used. I've looked around on the internet but I can't find the exact same problem - only some problems with content floating out at the bottom, because of a fixed height.
In the next 2 screenshots you'll see the same page in Safari and Chrome. The div has a overlow:hidden to hide a possible third line of text. I added fixed widths when trying to solve the problem. I also tried to add/remove some margins, but I can't get rid of the extra pixels.
Here is a full link to this page. It happens in this section of the website only. In other sections - like this one - where I use the same format with little differences, but the same CSS idea (fixed width with overflow:hidden), there is no bug in Safari.
I hope you have some ideas!
Removing position:absolute from
div#branch-search-results-block div.search-result-right div.search-result-drvl-info-bottom .spacer::after
css style solves the issue. But I am not sure what else is affected by it. Please try this.
Take a look at http://jsfiddle.net/7zb6P/1/
Both the yellow box and the background image are centered in the scrolling div, although their center is slightly different. This seems to be due to the background being centered to the whole area (including scrollbar), but the div being centered to the content area (not including scrollbar) - see it centered correctly without the scrollbar http://jsfiddle.net/7zb6P/2/
Interestingly IE7 renders it "correctly", but IE8+ and other browsers render it as described above.
I have had a play around with background-origin (and -webkit-background-origin) but none of the properties seem to have any effect.
Any ideas on how to solve this?
EDIT: More information: The linked fiddle is just a minimal example of the problem, my actual problem is with whole sites where the is centered (with margin:0 auto) and has a background image centered (using background-position: center top). The solution needs to work on a large number of sites of which I cannot change the HTML, so it needs to be a CSS based (or possibly Javascript based) solution. Thanks.
The problem resides with your background image. You're trying to center an image that (for CSS's purposes) has no center.
The image is 321 pixels wide. Which means the center of the image is 161.5 pixels. As the browser is unable to render that position it gets a 1 pixel offset.
Can anyone help me troubleshoot my website?
http://www.andrewstonyer.co.uk/test/
My problem:
On IE8/7 if you click on a thumbnail (only 'Pulse' and 'Time Within The Hour' are wired in right now) an overlay appears with detail of that piece.
What should happen, and does in Gecko/Webkit, is that the overlay contains a table with a heading, a scaled, centered image, and a nav menu. There is a toggle for text, which pushes up the image cell and makes the image smaller, keeping proportion. I know the overlay looks like ass right now- those are just placeholder colours :)
On IE, the image doesn't fit perfectly in the table cell, which means that everything is pushed down outside the window. I can't see the nav menu. It appears to render the image at actual pixel size (in the CSS, the img class element is set to 100% height).
The text cell is toggled with jquery, when toggled on in IE, it doesn't appear to 'squeeze' the above cell, which is what I want to happen.
Could any experts help?
Regards,
Jon
Adding width:100% to the ov-image class in your CSS fixes this. I guess the other browsers honor display:block even for image scaling, but on IE, you have to declare the width for it to scale.
Additionally remove height:100% from the same class.