In safari (both desktop and IOS), having a ::before pseudo element with generated content, changes the wrapping in the main element.
This question seems to be about something similar and refers to an issue that was fixed in Chrome: erratic line wrapping with after pseudo-element.
In my case I have an emsp between two no-wrap spans, and all seating in a div. Adding the ::before pseudo element to the div, causes Safari not to wrap. However adding a newline after the emsp, seems to fix the Safari issue. As all of this seems very erratic, I would like to better understand when and why such an issue may happen in Safari. Also, I was not able to find a webkit bug about this.
span {
white-space: nowrap;
}
.before::before {
content: '*';
}
<div>
<p>without before:</p>
<span>first long span that should not wrap</span> <span>second long span that should not wrap</span>
</div>
<br><br>
<p>with before:</p>
<div class="before">
<span>first long span that should not wrap</span> <span>second long span that should not wrap</span>
</div>
<br><br>
<p>with before and a newline after the emsp:</p>
<div class="before">
<span>first long span that should not wrap</span>
<span>second long span that should not wrap</span>
</div>
Firefox / chrome:
Safari:
Related
I have paragraphs overflowing from a div, I want the text to wrap normally.
I saw a tutorial saying that flex-wrap doesn't work with width: 100% on IE.
<div class="row bonASavoir rgpd">
<div>
<p>Paragraph </p>
<p>Other paragraph</p>
</div>
</div>
my css is global for a whole angular app, it says that the paragraphs should be width:100%.
It works on all browsers BUT IE.
The paragraphs expand on the whole screen!
If you know how I couls fix this!
Set the width of the parent div and then please try this code..
css
.bonASavoir {
width: 20px;
}
.bonASavoir p {
word-wrap: break-word;
}
A simple block element won't expand vertically unless its contents are of inline-block or block.
See fiddle: https://jsfiddle.net/4148xjvv/7/
Or see code:
HTML:
<div class='parent'>
<span class='padding'>Inline</span>
</div>
<br><br>
<div class='parent'>
<span class='inline-block padding'>Inline-block</span>
</div>
<br><br>
<div class='parent'>
<div class='padding'>Block</div>
</div>
CSS:
.parent {
background-color: red;
color: white;
}
.padding {
padding: 10px;
}
.inline-block {
display: inline-block;
}
Result:
The lateral padding works, but the vertical does not.
Chrome debugger shows that the padding is there, but bleeds out of the parent.
Obviously this isn't a huge issue, I can just change the children to inline-block if I need padding, so I want to know why this is happening.
I found this article to be very helpful in understanding what is happening: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/
Any vertical padding, border, or margin applied to an element will not push away elements above or below it.
Basically, as you can see from the image above, the padding is added, it just doesn't change the vertical position of the element.
you are adding the padding to a span element, which is an inline element, where vertical padding won't move the element - its baseline (and therefore the text) stays where it is, due to the inline property of the span element.
therefore the vertical padding can only work in conjuction with the inline-block setting in your second parent element - or in your third parent element where you add it to a div element.
I have a simple html layout that has 3 divs. The divs are separated by a border line. The middle div has long text. I am breaking the long text by applying the style word-wrap:break-word. The issue is on window resize ( when the window is smaller in size), the text is getting overlapped with the border line. This is happening only on IE (version 11) but works well with chrome and FF.
Please advise on how to resolve the window resize text alignment issue on IE.
Here's the html:
<html>
<body>
<div style="border-right-style: solid;border-width:1px;">
text goes here
</div>
<div style="border-right-style: solid;border-width:1px;">
<span style="word-wrap:break-word;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>
</div>
<div>
XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy
</div>
</body>
</html>
The issue is that the span is a inline element. Try using a div or making it display: block.
<html>
<body>
<div style="border-right-style: solid;border-width:1px;">
text goes here
</div>
<div style="border-right-style: solid;border-width:1px;">
<span style="word-wrap:break-word; display: block;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>
</div>
<div>
XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy
</div>
</body>
</html>
break-word is a non-standard addition that is implemented by WebKit browsers, but not by IE. See word-break | CSS-tricks
You can use any of the other word-break values, for instance:
word-break: break-all;
If you think break-word looks nicer, you can add them both, in the right order:
word-break: break-all;
word-break: break-word;
This should make WebKit browsers use break-word. IE doesn't support this, and should ignore that rule, falling back to break-all.
I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.
Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.
It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them
Here's the CSS
.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }
Here's the mark up
<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
<div class="footer wrapper">
<div class="corner left"></div>
<div class="corner right"></div>
<div class="button-wrapper" id="btnContents">
<a title="contents" id="sb-nav-button">
<span>Contents</span>
</a>
</div>
<div class="button-wrapper" id="txtContents">
<div id="sb-title">Lorem Ipsum </div>
</div>
<div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
<a title="Next"><span>Next</span></a>
</div>
<div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
<a title="Previous"><span>Previous</span></a>
</div>
</div>
</div>
Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.
Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.
http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.
If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
OK so what would happen if I have 2 divs (one containing text, the other an image). The image always has a static width but the text varies. hence making its containing div variable.
I can make it work for all other browsers (except IE6 and IE7) by using CSS display:table. IE6 and 7 don't have that so I can't find a workable solution to center them all.
... so you know what I'm talking about...
.container{text-align:center; width:100%}
.container .centered{display:table; margin:0 auto}
<div class="container">
<div class="centered">
<div id="text">varying length text</div>
<div id="image">IMAGE</div>
</div>
</div>
Quite apart from the lack of IE support, setting display: table as you have without its children using display: table-row/table-cell results in undefined behaviour. It doesn't make sense to put block elements directly inside a table element and the browser might do anything at all.
What you are trying to do is get shrink-to-fit width behaviour without using float, which is a normal way of getting shrink-width but requires that the block in question goes to the left or right not centre. Probably a better way of saying that would be to use an inline-block:
.centered { text-align: center; }
.centered span { display: inline-block; border: dotted red 1px; }
<div class="centered">
<span id="text">varying length text</span>
</div>
<div class="centered">
<span id="image">IMAGE</span>
</div>
(You have to use a naturally-inline element like span to make it work under IE<8; div would fail. There is also -moz-inline-box if you need to target Firefox 2.)
Are you using quirksmode or standards compliant mode? In other words have you included a DOCTYPE declaration at the top of your html page?
You shouldn't need to use display:table just margin:auto should do the trick provided you are using a standards mode.