The right corner borders are cutting by a textarea that has a scrollbar. It only happens in IE11, other browsers are working fine.
This is the CSS:
textarea {
border: 1px solid black;
border-radius: 4px;
height: 100px;
}
See this Fiddle and this
I would have thought that some padding would fix it. Something like:
textarea{
border: 1px solid black;
border-radius: 4px;
height: 100px;
padding: 10px;
}
It looks fine to me in Chrome. I would test it in IE, but I'm on a Macbook.
Related
In my mvc application I have added a div with height:270px.
<style type="text/css">
.table-div {
height: 270px;
margin-top: -20px;
border-top: 2px solid #DDD;
border-bottom: 2px solid #DDD;
margin-right: 10px;
margin-left: 10px;
background-color: white;
}
</style>
Its working fine in firefox. But if I open it in Chrome, then its height will looks like more than 270px. Why it is happening like this? How to solve this?
May be it is the element height.border-top and border-bottom should be added with the 270.
I have such code:
HTML:
<div class="round">some text</div>
CSS:
.round {
width: 300px;
border: 2px solid #000;
border-right-width: 40px;
border-radius: 20px;
padding: 20px;
margin: 20px;
}
The problem occures in only the opera browser on the right side of div, which has truncated corner in the border.
Example:
http://jsfiddle.net/HddwE/1/
have you tried the o-border-radius setting? maybe you are working with an old opera version?
I have the following HTML:
<div class="body-content">
<fieldset class="EntryFieldSet">
<legend id="ScreeningTitle"> Screening:</legend>
<br/><br/>
</fieldset>
</div>
And the following CSS:
.body-content {
width: 300px;
border: 1px solid black;
background-color: #F5F5F5 /*whitesmoke*/;
}
.EntryFieldSet {
width: 250px;
padding-left: 15px;
overflow: hidden;
}
jsFiddle
In Internet Explorer, the right side is jagged
But it appears just fine in Chrome
How can I fix it for all browsers / internet explorer?
EDIT - This issue is happening for me in IE 9 64-bit edition
I think the best way would be to override the default css. Here is what worked for me
.EntryFieldSet {
border-radius: 0px;
-moz-border-radius: 0px;
border: solid 1px darkgray;
}
This way, it displays uniformly and with the same color across all the browsers
jsFiddle
I have improve the bug just a little bit..
.EntryFieldSet {
width: 250px;
padding-left: 15px;
overflow: hidden;
border-top-right-radius: 3px;
-webkit-top-right-radius: 3px;
-moz-border-top-right-radius: 3px;
border-top-right-radius: 0px\9;
border-top-right-radius: 0px\0/;
}
By applying a zero border-radius to the fieldset, I was able to get it to stop trying to apply one by browser default, so now it renders properly
.EntryFieldSet {
/* other properties */
-moz-border-radius: 0px;
border-radius: 0px;
}
jsFiddle
Example:
I am experiencing x-browser issues with the styling of a <hr> within a <span>. On FF the line is 2px high as expected and as declared in the CSS. However, when I look at it on Safari, Chrome or IE9 the line looks much thicker. Infact, when the <hr> is inspected with Safari's Firebug equivalent it sees it as 4px.
Is this an issue with the border-radius CSS attribute which is not apparent on Firefox? I want it to look like how I have built the markup and CSS and how it displays in Firefox, but i'm not sure what is wrong with the markup.
This is how it looks on Firefox:
This is how it looks on Safari (and IE9/Chrome):
My markup:
<span id="course_divider"><hr></span>
My CSS:
#course_divider {
left: 0;
padding-top: 40px;
position: absolute;
top: 27px;
width: 25px;
}
#course_divider hr {
background-color: #000000;
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
height: 2px;
}
Remove the height from
#course_divider hr {
background-color: #000000;
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
height: 2px;
}
you will get your solution :-)
demo http://jsfiddle.net/kMhEv/2/
It's simply an issue with your css in relation to the box model.
You have a height of 2px plus a border width of 1px.
So the box model is created with 1px at top/right/bottom/left.
So you 2px height plus 1px top+bottom for the border width = 4px height.
Remove the 2px height and it should be all good.
Your background color isn't required either.
#course_divider hr {
border: 1px solid black;
border-radius: 7px 7px 7px 7px;
}
the link: http://xanlz.com/test/test.html
the css:
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px;
padding: 1px;
}
the red part margin-top is larger in IE8 and ok under firefox,IE7. why? how to correct it?
Use css hacks:
IE7 and below can parse *property: value
.hot-version, .week-down, .total-down, .tag {
border: 1px solid #D4D4D4;
height: 286px;
margin-top: 10px; //for IE8
*margin-top: //another value for IE7;
padding: 1px;
}
EDIT:
These two links provide more hacks for IE6/7/8:
http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
http://www.webdevout.net/css-hacks#in_css