For example, if I make a block of four images that are absolutely positioned with 50% width and 50% height, the result in Internet Explorer looks like this:
http://img716.imageshack.us/img716/8376/96774641.png
The images are placed right next to each-other, as would be expected.
But the same code in Chrome produces this:
http://img560.imageshack.us/img560/7976/chrome.png
The images are shrunken slightely to make room for the spacing in-between.
My styles already include:
border-style: none;
border-width: 0;
padding: 0;
margin: 0;
... so why is Chrome spacing my images apart from each-other, and how can I fix it without altering the display for other browsers that render correctly in the first place?
EDIT: <link removed>
Be aware that the actual page is much more complicated, with over 1,000 <img> elements.
It will load slowly in any browser that is not hardware accelerated.
I have confirmed that FireFox renders it identically to IE8, with the images next to each-other as they should be.
This could be a rounding issue: A width of 50% may well end up as 223.5px for example.
Seeing as you're using images with a fixed size, why not specify the positions in pixels as well?
Are you using a CSS reset? Browser default styles can cause irritating problems like paragraphs with differnt top margin heights or other quirks of layout. This particular case may not be fixed with a CSS reset, but it would eliminate the possibility.
Sadly, the CSS3 option to set a background image scale is not yet available in any reliable way, or you could set the image as a repeating background image scaled to 50%, which of course would have no gaps. That won't be an optin for quite some time, most likely.
Have you tried using the Inspector (right-click on the image, select Inspect element) to trace where that spacing is coming from?
Related
I have a really weird issue thats seen in Safari and Chrome. Somehow it works just fine in Firefox.
Look at this URL in one of the above browsers: https://musik.dk/therollingstones/videoer
If you scroll down, you'll notice a videothumb that floats very different than the rest. The "sinner" is the video starting with the name "Arrive in Japan" thats just a single pixel height than the rest.
I've looked into the inspector, but everything is exact as heigh and wide as all others (its the same template) and the image is 100% the same height and width. It could be a render issue, but its the same video all the time.
Can anyone figure that out?
Screenshot:
The floated article in question is "snagging" on the article to the left above it, which is slightly taller than the others. That's the problem with floating.
My advice would be to remove all of the float: left; declarations (there are two for desktop and various instances within media queries as well) and use display: inline-block instead, perhaps with a reduced right margin of, say, 0.5% (although these get a bit inaccurate).
Instead of right margins, you could apply text-align: justify to the container of all those articles. That will only mess up the last row if there aren't 4 articles, but that's fixable, too.
Or you could use flexbox, which is the modern way to do this, though not fully supported across the board yet.
The reason is due to that video having japanese characters in the name. For whatever reason, they render slightly larger, making the .ellipsis box 1px larger.
As mentioned by ralph.m I would make then display:inline-block; and remove the float, then set margin-right: 23.8%;
Recently we've had some customers complain about our website positioning being messed up and we've since found out that this problem only occurs when their browser is zoomed out to around the 75% mark. Most of our customers do not realise that their browsers are set to zoomed out mode, and we have been told to fix the problem so positioning is consistent regardless of the zoom level.
I have tried resizing elements using em and also tried in % but the positioning still messes up.
Here is a link to the website:
http://www.comms-express.com
The issue occurs on all pages - the 'Need Assistance' box at the top right of the page falls off at 75% zoom, and the main boxes on product pages do not fit in the container at 75% zoom.
Could anyone give me some pointers? I'm looking for some kind of CSS media query which would allow me to change CSS rules on specific zoom levels.
Thanks!
This seems to mainly be effecting your .product elements, change their width from its current setting of 190.5px; to 23% so they scale proportionately.
.product {
width: 23%;
}
This is likely more of a quick fix than anything else, but should solve the position issue until a more permanent solution is found.
I managed to solve this problem by modifying widths of elements to use percentages instead of pixels, and by re-tweaking how elements were spaced. Instead of using a margin, I placed a smaller inner container and gave this a padding which generally resolved most problems.
If you were to look at the following website in Chrome, you would see the printers in 2 rows. Which is how it is supposed to be. But in FireFox and Internet Explorer the 4th product is aligned on the right by itself.
I have tried everything I can think of, and scoured the web. I would really welcome any help anybody can give me regarding this issue.
http://www.thewideformatgroup.co.uk/Products/general-office-use
Change float: left to display: inline-block on the items (.shop-main li, to be exact).
If you float items to do this, then the height of the items needs to be exactly the same. In this case, the items are rendered in such a fashion that the 3rd item is slightly less high than the second. That is causing the fourth item to float next to the second as well.
If a bit exaggerated, it looks like this. Notice how 3 is slightly less high, causing 4 to be stuck behind 2 as well.
This might be caused by a weird scaling of the product image, for instance, or by any other rounding difference. Also, it might look good at first, but change as soon as a user starts zooming in or out, or messes with their font settings.
By using inline-block, you basically create a long text-line of items, that will wrap as soon as the line is full. It is a better approach when you want a wrapping list of items like this, because you won't at all be affected by the rounding problems I mentioned above.
Now, you might be tempted to solve this rounding issue so every block is the same size. And you might do that as well, because it might look a bit weird when the red line that appears on hover is shifted a pixel or so. But start by using inline-block, so you prevent incorrect wrapping, so even if some unpredictable rounding errors occur, they surface only in detail and won't mess up your entire page.
Have you tried to make the elements float or give them a relative positioning? The way i'm seeing it is that they inherit their positions from the parent div but on ie and firefox it's rendered differently.
I've had this problem and the solution for me was to make everything float left and give it margins and clearing as needed, the end-result was that it had a certain margin from the top so the elements always remained at a certain distance from the top and each other while maintaining their position
Try adding height to the .inner class:
.shop-product-small .inner {
border-bottom: 3px solid #FFFFFF;
height: 140px;
}
I know there are many questions about this and I have looked at all of them. I have a site where I need the left <td> to extend by 100%. I have all the containing blocks set to 100% and this works great in chrome and safari. However it does not extend to the base of the screen in IE or Firefox. I have a rough sketch of it here since the code is too long to paste. I have also included the css in the page to make it easier to view.
I used these two posts but neither has fixed my issue.
CSS 100% height in ie
Div 100% height works on Firefox but not in IE
Am I missing a container or is there a special way to make this happen in IE and Firefox? This is my first time messing with 100% height in css.
It's because of this line of css in td.left:
display:inline-block;
Remove it so it stays the default: display:table-cell. Then it works in IE.
I strongly encourage you not to use tables for this sort of layout though. Here's a good tutorial that will show you how to do this using divs+css: http://learnlayout.com/
The best way I can think of is wrapping both panels with a bigger absolute DIV and that way you can give the inner div a (working) style like this:
height: 100%;
I've made an example here:
Result - http://fiddle.jshell.net/E8SK6/1/show/
Code - http://jsfiddle.net/E8SK6/1/
I realize there are lots of rounded buttons questions, but my needs are fairly specific, and this hasn't been answered elsewhere.
Here's my requirements:
Works with absolutely positioned buttons
Client side only techniques ( can't change HTML on server side )
Works on input type=button and input type=submit (button element not needed)
Fixed height, liquid width
Supports IE7 or better
The absolute positioning + client side only makes most rounded corner techniques unusable in my opinion.
Images or no images does not matter (either way is fine). JavaScript is allowed.
EDIT: Changed question to reflect actual problem: the one HTML element I thought I needed wasn't really the requirement.
It's not possible for IE. That's why you can't find it anywhere else. The only thing you could do is use a static background image, but that will stretch for different widths.
I ended up using multiple backgrounds for the buttons.
CSS3 multiple backgrounds for browsers that could handle that, and in IE I used the DXTransform filter to add a second image (see here). The actual technique used was a pretty standard sliding door style setup, with some changes to account for the fact that you couldn't position the second image in IE other than at the top left.
For FF 3.5 and lower I used border-radius, since multiple backgrounds only came in 3.6.
Hover/active images worked fine, and it's all in CSS, which was a bonus.
Since javascript is allowed (based on one of your comments), I don't see how it would be a big performance hit to:
wrap the input elements with div
take the positioning properties of the input and copy them to the div wrapper
remove the positioning off the input using an inline position: static
add other elements or styles to get your rounded corners. Being fixed height, then for everything other than IE7, some css like this should work (assumes fixed height of 20px, rounded end images that are 10px wide by 20px high):
Css:
div.inputWrap:before,
div.inputWrap:after {content: ' '; display: inline-block; height: 20px; width: 10px; background: url(/yourRoundedLeftEndImg.png) top left no-repeat;}
div.inputWrap:after {background: url(yourRoundedRightEndImg.png);}
Assuming your javascript gives you this html:
<div class="inputWrap"><input /></div>
You will need to style the input to get rid of borders, and such (I also found that my test in Firefox required me to set vertical-align: top, but not sure if that is necessary. For IE6-7, you would actually have to add extra div's before and after the input since they do not recognize the :before and :after pseudo-classes.