开发者

CSS 1px jump i can't figure out for life of me

I'm using "Chosen" special input box for the "Project Type" input box on my form.

You can view here http://harvesthq.github.com/chosen/

Here's my page below. You'll notice name, email, phone etc are all standard input boxe开发者_JAVA百科s... but when you get to project type it all works perfectly but when you click ON one of the selections.. it still works fine. Look very closely when you click OFF the input box after you delete one of the options that you choose (off to the right of the page for instance to lose focus), and youll see everything below it including the footer.. input boxes below it.. submit button etc all shift 1px. Just play with it for a minute if that wasnt a good explanation and you'll see it shifting

I can't figure how what property this is.. the only thing I changed was padding: 5px to padding 6px on the input inside the div so it would match the rest of the input boxes..

http://eastcoastefx.vaesite.com/contact


I've tested this in chrome only.

your div id="sel1DT_chzn" grows by 1 pixel when something is selected.

set its height to 33px

<div id="sel1DT_chzn" class="chzn-container  chzn-container-multi" 
    style="width: 348px; height:  33px;"> ....


Here's a fix:

chosen.css, selector at line 172: line-height:12px


The problem is that ".chzn-container-active .chzn-choices .search-choice" aka the project item (Branding, Web Development etc..) has a height of 31px (including padding, margin and border) while it's container is only 30px in height. So it can be no higher than 29px, or else it would expand its container like it's doing now.

What I did to solve it in my browser is subtract 1px of the top margin and 1px of the bottom margin. But it's up to you how to do it.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜