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
Related
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 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.
Here is my test case : http://jsfiddle.net/bpw98/15/
I have a div with overflow:auto, and a div inside it with a margin and a border. The inner div doesn't have its bottom margin in IE8, while it's displayed properly in Webkit and Firefox.
Opera renders it in a wrong way too:
The solution is in that browser: use padding in the outside box instead of using margin on the inside.
Here is the code
Unfortunately , it does not resolve the IE8 problem, I know. But it's a known bug , CSS 2.1 spec does not cover precisely how this testcase should be rendered.
Check this
Ok, I have a horrible hack for you:
div.outer:after {
content:"";
background-color: inherit;
}
This works for me but leaves a larger than 5px margin at the bottom of div.outer:
JSFiddle: http://jsfiddle.net/wwTnS/
To get past this you could target IE8 only (so not IE8 and below as IE7 works correctly for once) and set margin-bottom to about 1px...but then that is getting even more hacky. The code I have added above should not have any noticeable effect on any other browsers.
Extra Note
If you remove the background-color and check the code in IE9's IE8 compatability mode then it renders fine and the margin-bottom is 5px. However, in my emulator (which is usually quite accurate), the margin-bottom is back to 0 if you do not add background-color.
As commented by tildy, the problem is already documented. I think I found a working solution, but it requires extra markup: I added a div between outer and inner, with a 5px transparent border. See http://jsfiddle.net/bpw98/19/.
I tried to add padding to outer instead, but it didn't work either. The rationale between that is: "the scrollbar lets the user scroll content, and only content". So the scrollbar stops where content stops, even if there's padding or margin after that.
Instead of margin on div.inner maybe you could try setting padding: 5px on div.outer
Ironically jsfiddle doesn't seem to work in IE8, which is quite funny.
Anyway, I had the same problem just now and went down the route of using :after on the inner element to inject content where the bottom margin should be:
div.inner {
margin: 5px 5px 0;
}
div.inner:after {
content: " ";
display: block;
height: 5px;
}
jsfiddle here: http://jsfiddle.net/bpw98/41/
However, this only works if you don't need that red border. I'm not sure if it was there just for the purpose of showing the issue or you actually need it? If it is needed, I'm afraid this answer won't work.
I removed the height of the .outer div and it worked for me !
Propably it doesn't work because your inner div is higher than 100px;
code: http://jsfiddle.net/xVCrn/1/
(works best in chrome / webkit)
I'm trying to get the red part to have 1px of margin inside the dark buttony area. but I can't seem to change the height of the red part. =(
the goal:
If using display-inline you can set it's height. You will also want to set the line-height as well. For example I added line-height:17px; and it centered it pretty good.
Example: jsFiddle Example
Tip: For webkit browsers on elements with a border of 1px and border-radius. Use 1px double #color It'll help with the jagged lines. I believe this is mostly a problem in Chrome that hasn't been resolved.
Adding display: inline-block; to the red part lets you control its height.
Here's an example (with some padding added to make it look nice): http://jsfiddle.net/xVCrn/
I have a page like http://ratingscorner.com/mobiles
if u see the left hand side there is a + image displayed. it does not appear in IE 7. i tried all possible things ..but could not solve it. so seeking help here.. any help on this.
You need to explicitly state the width and height in your css declaration for .plus
span.plus {
width:12px;
height:12px;
}
It is a span, inline element.
Add display: block; and specify the height and width.
Also it behaves the same in IE8.
Your image has a height and width of 0, so it won't show up in IE7 at all. I did some quick debugging and found that if you set the height to 15px and display to block, then it shows up just fine. Adding a left float helped move it to the left of the button name.
So to your .Syb .plus CSS definition, add:
height:15px;
display:block;
float:left;
Then you should be fine.