I have a div with a width of 200px and overflow set to hidden. In Firefox, Safari & IE the select obeys the style rule and displays correctly. However in chrome the select element doesnt follow the rule set and flows over the div.
The site is at http://conaty.hailstormcommerce.com/index.php?route=product/category&path=20
this issue was with the background property of the select element.
I think you might have described the issue incorrectly in your question.
It looks like you're trying to create a custom drop down arrow for the select element. The select element is the correct width you set and the overflow is hidden by the div. However, in Chrome, the select has a white background that covers your custom arrow and is unaffected by your background: transparent !important; declaration.
To fix this so that your custom arrow shows through, you just need to add -webkit-appearance: none; as below:
.selectContainer select {
background: transparent !important;
cursor: pointer;
-webkit-appearance: none; /* add this */
}
In addition to Diodeus answer, you have min-width of 220px specified on this element.
Do this:
width:100%;
min-width:0;
SELECT is known to behave like this. It behaves more like a control in the OS than an element in HTML (as do radio buttons and checkboxes). All you can do is hard-code the width to prevent it from overflowing.
Related
Firefox is cutting off the border of dropdown select or making them look hideous in some cases(making left border grey and right border black).
Is there a fix for this in CSS?
I am using Bootstrap, UniformJS(removing this didn't change anything).
Its a firefox bug. You can check it here.
Best way would be to give width 99.99% instead of 100% in your css.
To complete the answer by Rhythm Patel, add the following to your CSS or element.
select {
width: 99% !important;
}
Yes.. It is a bug From Firefox web browser.
Set Width Of Your Select Box In CSS
select {
width: 99% !important;
}
or add class to select tag and set width
I have two buttons, one implemented as an input, the other as a span. They are put side by side with:
{ display:inline-block; }
The buttons are rendered from a customized tag and a class name is added dynamically in jsp. In css, there are some definition for shadow, for background gradient, for padding, and for font. They do use some CSS3 like border-radius.
But in Firefox, the height of the span button is 18 while the input 20. Interestingly, the height of them in IE 8 are both 25px, why?
Now I need them to be of the same height and aligned horizontally.
Update:
Now I have those two buttons in jsfiddle. Use height:22px; and vertical-align:top; won't help much.
http://jsfiddle.net/gBeCP/
Try setting the vertical-align:top on the input tag. I recommend specifically setting the dimensions in px as this will prevent the browser from applying defaults.
I think I have it done.
Answer in this page indicates that FF treats the padding differently in submit type of input and a span. CSS padding added to height/width for <input type='submit'>
My solution is to set a min-height of both input and span, then use vertical-align:middle; to have them aligned. Finally play around the padding number to have the text on the buttons aligned.
The reason it's different is because each browser has its own default styles so they will vary... just like javascript varies dramatically.
Have you ever thought about actually setting some height on the elements that you want to be the same height?
maybe
span, input[type="button"] {
height: 25px;
}
Or more specifically if you like.
The easiest solution is the following two lines (vendor-prefixes removed for brevity):
.tranCoreButton {
/* I couldn't be bothered to read through the rest of the CSS, or the
in-line CSS; seriously: *minimal* reproductive demo, please... */
display: inline-block;
box-sizing: border-box;
}
JS Fiddle demo.
I'm working on building new site , i need a drop down menu to select the amount of something in my site . but this drop down menu has a style that i have to make it.
the style of this drop down menu is that the drop down box has no arrow - the arrow that appear on the right to click on it and open the drop down items-.
I have made many searches and I hove found this style property :"-webkit-appearance:none ", in the class of the drop down list ,I have put this property and the arrow has been disappeared using the google chrome browser.
but the "problem" is : this property is not working on the Firefox browser , the arrow has not been disappeared .
i will give you a simple view to see how this arrow has not been disappeared in the Firefox browser :
here is the chrome view as the drop down menu without the arrow:
my question is :
is there CSS style property to make a drop down menu without this arrow in the "Firefox" browser ?
-webkit prefixed properties are respected by Safari and Chrome only, for Firefox, you need to use -moz prefix. When you use -webkit, Firefox will just skip the property and will move ahead, thus it spoils your select design.
Though, you can achieve the above with a lil hack, wrap your select tag using a div, assign fix width to your div, and than use greater width for your select tag. Now use background-image for your select, and use overflow: hidden; for the wrapper
Demo
div {
width: 200px;
border: 1px solid #f00;
overflow: hidden;
}
div select {
width: 220px;
background-image: url(http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/256/Download-icon.png);
background-size: 13px 13px;
background-repeat: no-repeat;
background-position: 180px 5px;
}
This way, the above will give you better cross browser compatibility, and you don't have to use prefixes as well.
You can try your luck with:
-moz-appearance: none
But this is a non-standard property..
You can read more about it HERE
for example:
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
but ie still not cover(
Or may be you want to use plagin jquery https://select2.github.io/, but I think, is not very appropriate if you wont castomise only one select.
My site design requires a background image running across the top of the page. You can see what it is supposed to look like in this screenshot. Link to my site.
Unfortunately, I used Firefox to check my work while putting this together. I used FireFox, because it has Firebug. The site looks right in Firefox, but wrong in Safari, Chrome, and IE. In Safari, Chrome, and IE, the background body wrapper background image is below the menu. Example screenshot where background at top is wrong.
Is there an easy fix to the background image, so it will work in all browsers, or do I have to take a few steps backward to fix some basic problems in my markup?
The margin on #nav is collapsing (https://developer.mozilla.org/en-US/docs/Web/CSS/margin_collapsing) because its parent (#wrapper) has no top margin, padding, or border to contain it. A quick-and-dirty fix for your problem would be to add padding-top: 1px; to your #wrapper CSS.
Change the margin property of #nav and add padding to #wrapper equal to the height of your background image.
#nav {
margin: 0 auto;
}
#wrapper {
padding-top: 85px;
}
In both Safari and Chrome, the placeholder attribute seems to add invisible width, causing horizontal scroll-bars and a flicker-like rendering when the window is re-sized horizontally.
overflow: hidden; can be applied to the parent element to curb the issue. However, it clips my form field focus effects.
Is there a way to use certain vendor prefixes values to prevent this such as ::-webkit-input-placeholder {} or some other way?
When the attribute is added to the form input, a horizontal scroll-bar flickers when re-sized horizontally on a webkit browser. Specifically, what style is triggering this behavior? And how do I prevent or override this behavior!?
Many input elements have default padding. When you state width: 100%, it causes the element to be width 100% + padding. To prevent the padding from increasing the width simply use box-sizing: border-box;
I looked at your site in Chrome and Safari, but it doesn’t seem to be having the issue you mentioned. However, your top image is overflowing to the top because you sat the overflow to hidden and you didn’t set a top-margin for your header. So, I went ahead and created that margin:
#header img {
margin-top: 50px;
}
and that solved the problem. I wish I could post an image.