2

Here is my problem: JSFiddle

I have a table within a div, the div is 50% wide. The table should fill 100% of the width of the div.

<div> <table> <tr> <td>Resize and see Pixel to the right -></td> </tr> </table> </div>

The CSS:

div { width: 50%; background: red; } table { width: 100%; background: rgb(255,255,255); }

It basically works, but when you resize the browser, you sometimes can see the background of the div. It's because the div's width won't be rounded, but the table's width will.

For example: If the div is 315.5px wide (because of the 50% width), the table only inherits a width of 315px for its width. The browser then rounds up the div to 316px and causes the div to be 1px wider than the table. This bug only occurs to me in Chrome.

How can I fix this?

Improve this question
1
  • After some testing, this only appears to occur for tables. Can't reproduce with any other elements, but did reproduce with Chrome on Windows 7 (no other browsers). But honestly, this sounds more like a bug report you'd have to file with Chrome. I have no idea how you'd go about fixing it yourself. Commented Feb 22, 2013 at 19:17

1 Answer 1

Reset to default
0

This is an issue I've had with other design setups, it's hard to over come, and I haven't solved it yet. What is happening is how Mac and PC render the font are roughly 1px+ different.

http://www.smashingmagazine.com/2012/04/24/a-closer-look-at-font-rendering/

Update:

Given the conversation bellow I put together a JS file to resize the div when needed. I can't replicate the issue so I don't know if it'll work, but here it is. I'm curious to try this when I get home on my Mac and see the error.

function fixDiv() { var myDiv = document.getElementById("myDiv"); var currentWidth = myDiv.offsetWidth; if (currentWidth % 2 != 0) { var newWidth = parseInt(currentWidth) + 1; myDiv.setAttribute("style", "width: " + newWidth + "px"); } } window.onresize = function (event) { fixDiv(); } fixDiv();
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Please explain how the information in that article applies to this situation. There is a lot of information there, and at first glance it doesn't even appear to be relevant. Where's the beef?
@animuson It was the closest article I could find quickly, there are TONS of Stackoverflow questions on just this. When the font takes up pixel space (more or less) it effects the padding, which effects the margin, which effects the border (ie the whole box!) There for during a resize this can cause elements that aren't ment to be visiable (ie background layer color) to show through.
Also it could be argued that it's just math, but there will always be a 1px+ difference on Chrome Mac OS browsers then others, which is why I'm assuming he is specifying a problem with Chrome Mac and not a problem in general. Though on Windows 7 Chrome, and IE9 in Fiddle it works fine.
I still don't see how this has anything to do with fonts. The problem is that the division is getting the correct width as per its 50% (x.5), but the table is not getting the correct 100% width (only x). The browser then rounds up the division to x+1 and leave the table at x, causing the division to be 1px wider than the table. I'm seeing the same behavior on Chrome on my PC. It has nothing to do with Mac and everything to do with the math being wrong. FWIW this also only seems to happen on tables.
O'well it works fine in both browsers on my PC so it was the only thing I could think of. Good luck.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.