The IE 11 (11.0.9600.18350) seems to have some issues when using rounded borders. I made a minimal fiddle: https://jsfiddle.net/7phqrack/2/
html:
<div class="backgrounddiv">
<div class="outer">
<span id="span1">some content</span>
<div class="inner">
<span id="span2">more content in a nested div</span>
</div>
</div>
<div class="outer">
<span id="span1">some other content</span>
</div>
</div>
style:
.backgrounddiv{
background: black;
}
.outer{
border-radius: 4px 4px 0px 0px;
background: white;
}
.inner{
background: white;
}
At some zoomlevels (130% on my machine) the background is visible between the two divs (and also at the upper border). Other browsers do not render the black line between the divs.
Does anybody know how to solve this issue?
Try to use this and see if it's remove the borders in Internet Explorer:
.outer{
border-radius: 4px 4px 0px 0px;
background: white;
border:0;
outline:none;
}
This question was already asked:
Question 1
Question 2
It seems to be a bug in IE11.
Related
This CSS & HTML shows three text boxes that are completely wrapped in their borders when viewed in IE and Edge. When viewed in Chrome (or on my Android's browser) the right side of the border is clipped off.
I can make it work by adding a trailing " " to each span, but I'd rather learn whether I'm doing something wrong...
<html>
<body>
<style>
.link-bubble {
float:none;
white-space:nowrap;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
margin:2px;
}
</style>
<div style="float:right; width:30%; text-align:center; line-height:40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I'm not 100% sure why that specific behavior is happening and the discrepancies between browsers, but I would bet it has to do with white-space:nowrap and the parent elements width: 30% and some quirkyness with that.
Instead of trying to work around that quirk, a much easier way to do this is change the display of the .link-bubble's from inline to block. You can do this with the display: block on the class, or just change the elements from span to div or other block elements. Here's some good reading on the box model - I'd also recommend reading up on css flexbox and grid, much easier and more modern way of handling positioning of elements vs divs and floats.
Also, If you really need the white-space: nowrap, add that style to the inner element. See my example below.
<html>
<body>
<style>
.link-bubble {
overflow: hidden;
border: thin solid blue;
border-radius:10px;
background-color:antiquewhite;
padding:4px 6px 6px 6px;
display: block;
margin: 2px;
}
.link-bubble a { white-space: nowrap; }
</style>
<div style="float:right; text-align:center; width: 30%; line-height: 40px;">
<span class="link-bubble">
First service offered
</span>
<span class="link-bubble">
Second service offered
</span>
<span class="link-bubble">
Third service offered
</span>
</div>
</body>
</html>
I would like to ask for help with this task:
I would like to have a non-breaking-space between img and a piece of text. But the problem is, that sometimes the line between image and text breaks up even if the non-breaking-space appears.
Where am I wrong?
Here is the JsFiddle:
https://jsfiddle.net/cj7Lp1vy/9/
HTML
<div id="parent">
<div id="child">
<!-- some content -->
<div class="cl">
<img src="obrazky/plocha.png"> Plocha: 11 m<sup>2</sup>
<img src="obrazky/pocet_pokoju.png"> Pokoje: 2
<img src="obrazky/rekonstrukce.png"> Rekonstrukce: ne
<img src="obrazky/okna.png"> Okna: stará
<img src="obrazky/topeni.png"> Topení: dřevo
<img src="obrazky/typ_stavby.png"> Typ stavby: dřevo
</div>
</div>
</div>
CSS
#parent {
width:235px;
min-height:110px;
border:1px solid #CCCCCC;
padding:15px 10px 10px 10px;
margin:0px 12px 24px 12px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#child {
position:relative;
}
.cl {
clear:both;
}
img {
border:1px solid red;
width:16px;
}
You're going wrong because the Unicode specification for NBSP says that there shouldn't be a line break after the character. it doesn't stop there being one before the character.
To work around this, wrap the <img> and the in a span and give the span the styling white-space:nowrap;
Im really confused, it is strangest bug i have seen in my life.
Here is JSFiddle example: http://jsfiddle.net/c92mjkne/1/
As you can see, when our "comment" is hovered, #content get stange margins (but in CSS it have no margins). As i can know, it is ol's margins. But why they are outside of parent div?
Ok, that's strange. BUT! When we changing padding: 0; to padding: 1px; in #content's CSS, we see, that block have no margin! WTF? Help me please :D I really dont know how to google :D
Here is example:
#head, #foot, #content {
padding: 7px;`
}
#content {
padding: 0;
}
#comment:hover div {
background: #eee;
}
#comment {
border: 1px solid rgba(0, 0, 0, 0);
}
#comment:hover {
border: 1px solid gray;
}
ul {
margin: 7px;
}
<div id="comment">
<div id="head">
Efog <span style="color: gray">today, 10:10 pm</span>
</div>
<div id="content">
<ul>
<li>Hello</li>
<li>Stack</li>
<li>Overflow</li>
</ul>
</div>
<div id="foot">
answer
</div>
</div>
And here is code with padding: 1px:
#head, #foot, #content {
padding: 7px;`
}
#content {
padding: 1px;
}
#comment:hover div {
background: #eee;
}
#comment {
border: 1px solid rgba(0, 0, 0, 0);
}
#comment:hover {
border: 1px solid gray;
}
ul {
margin: 7px;
}
<div id="comment">
<div id="head">
Efog <span style="color: gray">today, 10:10 pm</span>
</div>
<div id="content">
<ul>
<li>Hello</li>
<li>Stack</li>
<li>Overflow</li>
</ul>
</div>
<div id="foot">
answer
</div>
</div>
Sorry for english, thanks.
As i can know, it is ol's margins. But why they are outside of parent div?
Because they are supposed to be (the are not “outside” the div, they have become margins of the div) – http://www.w3.org/TR/CSS21/box.html#collapsing-margins:
“In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.
Adjoining vertical margins collapse, […]”
So no bug at all, but specs followed to the point.
BUT! When we changing padding: 0; to padding: 1px; in #content's CSS, we see, that block have no margin!
Read on at the above point,
“Two margins are adjoining if and only if:
[…]
- no line boxes, no clearance, no padding and no border separate them
[…]”
http://jsfiddle.net/c92mjkne/2/
#comment:hover{
background: gray;
}
It is normal, you set every div inside your comment div a background but you set some a margin. If you don't want any blank area, just set the background color to the div containing them all.
It's not a bug.
http://jsfiddle.net/adamadam123/qv2yR/
Above is the code I'm currently working with. Below is an image of what I'm trying to achieve.
Its basically a chat box 'IM' and I have a blue & pink image and need to be able to get different amounts of text to sit within the image.
I also tried using the image as CSS background but found it didn't stretch to fit the text. Also tried floating and absolute positioning.
Any help would be greatly appreciated.
thx
<div class="chatMessengerBody">
<div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper">
<img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/>
<p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?
</p>
</div>
<div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper">
<img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/>
<p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p>
</div>
</div>
http://jsfiddle.net/qv2yR/10/
CSS
.blue {
background: #EBF7FF;
border: 1px solid #D4F1FD;
-webkit-border-radius: 5px;
border-radius: 5px;
color :#6B95B0;
margin-bottom: 5px;
padding: 5px;
width: 200px;
}
.pink {
background: #FFF8F2;
border: 1px solid #FFEEE4;
-webkit-border-radius: 5px;
border-radius: 5px;
color :#D386A8;
margin-bottom: 5px;
padding: 5px;
width: 200px;
}
HTML
<div class="blue">
this is the blue one
</div>
<div class="pink">
this is the pink one.
</div>
Instead of an image, why not use some CSS & CSS3 rounded corners:
.chatMessengerChatBubblePinkWrapper {
background:#fff8f2;
border:1px solid #ffeadb;
-webkit-border-radius: 5px;
border-radius:5px;
}
I have the following HTML structure:
<div id="ctr__Wrapper" class="wrapper">
<div id="ctr" class="control clickable">
<img src="logo.png">
</div>
</div>
And the following CSS for this:
.control
{
border: 1px solid #000;
background-color: #666;
padding: 20px;
}
.control:active
{
background-color: #bbb;
}
When I click on the element "ctr", I see the background color changing, but when I click on the image itself, it doesn't. This works fine in Firefox, but not in IE8. Is there something I can do to solve this in CSS.
The working example can be seen here:
http://jsfiddle.net/miljenko/DNMPd/
You could use a background image instead of a real image.
html:
<div id="ctr__Wrapper" class="wrapper">
<div id="ctr" class="control clickable">
</div>
</div>
css:
.control
{
border: 1px solid #000;
background-color: #666;
height: 40+height-of-logopx;
background-image:url(logo.png); background-repeat:no-repeat;
background-position:20px 20px;
}
.control:active
{
background-color: #bbb;
}
because < ie9 don't support :active on anything other than anchor elements. here's your fiddle, that should work in ie8 http://jsfiddle.net/jalbertbowdenii/DNMPd/12/