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:
Related
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.
This web page div displays correctly in Firefox and Chrome
But looks ugly in Internet Explorer and Opera
My HTML Code is:
<div class="newAd">
<span id="newAdButton">
Create a new advert for FREE!
</span>
</div>
And the CSS is:
.newAd {
margin: 0 auto;
margin-bottom: 25px;
margin-top: 20px;
width: 500px;
}
#newAdButton {
margin: 10px 30px 10px 30px;
padding: 10px 40px 10px 40px;
background-color: #88FF88;
color: #000000;
font-size: 27px;
border-radius: 20px;
border: 5px solid #00FF00;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
-o-border-radius: 20px;
cursor: pointer;
word-spacing: 0px;
}
Please how can I make it work for IE and Opera? Thanks.
You can use button tag instead of span and apply id to button tag.
Hopefully it'll display properly.
The problem is the border you are using for that container. Firefox and chrome have it outer while apparently IE and safari have it inner (as a test you can remove the border and see what happens). Try using box-sizing:border-box; for your #newAdButton.
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 want to display a part of image in circle div. I have a code, but it doesn't work in Opera.
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
}
img {
margin-left: -75px;
width: 350px;
height: 90px;
}
HTML:
<div>
<img src="http://diskuse.jakpsatweb.cz/img/logo.png">
</div>
http://jsfiddle.net/vpfEY/6/
How can I fix it?
Check border-radius support hear also check this
Looking at you code it seems working i have tested it on chrome, firefox and opera. and its working.
If you are using the older version try using
-webkit-border-radius: 45px;
-moz-border-radius: 45px;
border-radius: 45px;
NOTE But this is not required for morden browsers
I am unsure why an image would not respect the border-radius property. However I was able to get it to work using a background image.
HTML
<div></div>
CSS:
body {
background-color: silver;
}
div {
width: 90px;
height: 90px;
border: 1px solid;
overflow: hidden;
border-radius: 45px;
background:url(http://diskuse.jakpsatweb.cz/img/logo.png) -115px 0 no-repeat;
}
http://jsfiddle.net/vpfEY/18/
I have a simple layout which works fine in Chrome, Safari even Opera too (OS X). The surprise for me here is Firefox. (IE and Win not tested yet).
The problem is fieldset.ownerbox isn't floating in Firefox. (The two semi-transparent fieldset below the pie-chart)
CSS rules applied here:
#owners {
position: relative;
width: 940px;
left: 0px;
margin-left: 0px;
z-index: 1;
top: -240px;
font-size: 16px;
}
.ownerbox {
width: 310px;
height: 150px;
padding: 10px;
margin-right: 20px;
float: left;
background: rgba(255,255,255,0.5);
color: #000;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.ownerbox.large {
width: 500px;
padding: 0px 10px 20px 10px;
}
Please help, what's wrong with my approach?
Readjust your widths so it takes padding into account. You can overflow-x:hidden; on #owners to see how it looks "contained".
Alternatively adjust the width on #owners.
Edit: Seems you just need to clear:both on #owners.