I have text in spans which is wrapping strangely. Ive worked out that if I indent the html it fixed the issue.
This is fine:
<div class="value">
<span>56959 bqCYXFYS</span>
<span>MBIaLbJm</span>
<span>SW6 6PN</span>
</div>
This is not:
<div class="value"><span>56959 bqCYXFYS</span><span>MBIaLbJm</span><span>SW6 6PN</span></div>
This CSS is just for illustrative purposes:
.value {
background: grey;
}
span:first-of-type {
color: red;
}
span:nth-of-type(2) {
color: green;
}
span:nth-of-type(3) {
color: gold;
}
In the screenshots below ive manually shrunk div.value to make the text wrap. The top screenshots of the indented code is correct, and the 2nd screenshots of unindented code are wrapping in the strange way that I need to prevent.
How can I solve this with CSS only? I cant change the HTML structure at all.
Unindented code example: http://jsfiddle.net/67u7d/7/
Indented code example: http://jsfiddle.net/67u7d/6/
Wrapping occurs when there's whitspace, but since you do not have whitespace (even newline and tabs) between your spans, it's all one "word" that will not break.
As far as breaking, these are identical:
<div class="value"><span>56959 bqCYXFYS</span><span>MBIaLbJm</span><span>SW6 6PN</span></div>
<div class="value">56959 bqCYXFYSMBIaLbJmSW6 6PN</div>
To solve it and keep your spans as true inline elements, you can add a space after the spans using a :after pseudo element:
span:after {content:' ';}
Here's your new fiddle: http://jsfiddle.net/rgthree/67u7d/9/
If you add display: inline-block to your span tag, it will wrap correctly.
Related
I have a POC that I have to complete and I am only allowed to use CSS to update the styles of a product. I have replaced one of the images of the product with a logo by using the CSS content attribute.
I have to add a simple string with a phone number to be shown after this logo. I have tried to use the :after pseudo-element to do this. This works only if the content of the div is empty (logo is removed).
.demo {
content: url('http://placehold.it/350x150')
}
.demo:after {
content: 'test';
display: inline-block;
}
<div class="demo"></div>
I have tried changing the display to inline-block and hard coding the heightand width for both rules. Essentially everything I could find. Any help would be greatly appreciated.
JSFiddle here: https://jsfiddle.net/qykbjznm/
The content property replaces all content within the element. By adding content to a non-pseudo selector, that content will replace the ::before and ::after pseudo selector.
So try doing this using the content property within the ::before and ::after pseudo selectors only.
.demo:before {
content: url('http://placehold.it/350x150')
}
.demo:after {
content: 'some text';
display: block;
}
<div class="demo"></div>
You could replace the background from the CSS and put it as an image in the HTML:
.demo::after {
content: 'test';
display: inline-block;
}
<div class="demo">
<img src='http://placehold.it/350x150'/>
</div>
Or even do this:
.demo {
background: url('http://placehold.it/350x150');
height:150px;
width:350px;
}
.demo::after {
content: 'test';
}
<div class="demo"></div>
There are two different results.
Some browsers apply the content property to actual elements, despite it not being supported in CSS2. css-content-3 is expected to allow this, but until the level 3 spec becomes a standard, which realistically won't happen for another few years (especially considering it hasn't happened in the last 14 years), applying content to actual elements should be considered non-standard behavior.
When the value of the content property is an image, that image is inserted as replaced content. And when this is applied to an actual element, this prevents the element from having ::before and ::after pseudo-elements. This is why your ::after pseudo-element doesn't appear.
As mentioned, all you have to do is apply the image to the element's ::before pseudo-element, not the element itself.
I have messed around with your JSFiddle a bit and I found that the only real way of making the phone number display below the current div is by creating another div:
<div class="demo"></div>
<div class="demo2"></div>
<style>
.demo {
content: url('http://placehold.it/350x150');
height:150px;
width:350px;
}
.demo2:before {
content: "test";
}
</style>
I have following css and display is set to none if there are no records. However, it displays a red line at the top. You can verify it here http://jsfiddle.net/3agn58u4. Any idea what is causing this?
CSS:
<style>
body {
font-family:Calibri;
}
#customTaskNotification {
position:relative;
}
.TasksCount {
position:absolute;
top: -.1px;
right:-.1px;
padding:1px 2px 1px 2px;
background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
color:white;
font-weight:bold;
font-size:1.05em;
width:50%;
text-align: center;
border-radius:50%!important;
box-shadow:1px 1px 1px gray;
}
div.TasksCount:empty {
display: none;
}
</style>
The problem is that you're trying to set CSS styling on a property based on it being empty but that div is not actually empty.
You can see in the snippet provided that the :empty selector is not going to apply to a <div> element that isn't actually empty (even if you can't see its contents).
.testDiv {
background-color:#ff0000;
height: 30px;
width: 40px;
margin: 5px;
}
.testDiv:empty {
background-color: blue;
}
<div class="testDiv">
</div>
<div class="testDiv"></div>
<div class="testDiv">
</div>
You may need Javascript to check actual content of a div before applying styles if this case is going to be prevalent in your solution.
You can change the padding of your <div> and yes, that will hide it from your view when the contents of the div aren't visible, but you're also removing the padding from your <div> so it's likely going to look bad (or not as desired) when there are actual links inside the div.
The :empty pseudo selector will select elements that
contain nothing
or every element that has no children (including text nodes).
or matches element that is empty but has only html comments.
Example:
<p></p><!-- empty element -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><!-- test --></p><!-- empty element with comment -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><a></a></p><!-- element has no text,but has child nodes,hence not empty -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p> </p><!-- element has space ,hence not empty -->
please see the fiddle:EMPTY ELEMENT
This is the reason why your display none is not working.
According to w3school:
The :empty selector matches every element that has no children
(including text nodes).
TasksCount is not empty because it has a child(a element) so display:none; does not effect. By css, it is not possible to check the child where is empty or not and then select parent.
Solution: use Javascript or Jquery.
if($('.TasksCount').find('a').html() == ''){
//Or you can add class or add style $('.TasksCount').css('display','none');
$('.TasksCount').hide();
}
That's because TasksCount background color is set to red. You can set the padding:0 if you want to keep the same color. Or,
.TasksCount {
background-color: #fff;
box-shadow: none;
}
EDIT
This answer has been downvoted multiple times because it does not answer the real question :
Why the :empty property is not taking effect.
As others pointed out, this CSS property matches only elements that have no children. This is the correct answer to this question.
The OP asked
"However, it displays a red line at the top. You can verify it here
... Any idea what is causing this?"
I missed the point about the empty property and did suggested first to remove the padding which partially solves the 'red line' when the DIV and its children are empty. However, this will also strip the padding from the element when it has content.
If you think you have a more complete answer to this question , please leave a comment below and I will update it accordingly.
.item-list {
letter-spacing: -0.3em;
}
.item-list a {
letter-spacing: 0;
display: inline-block;
}
<div class="item-list">
a
a
a
a
</div>
only in win ie6,the gap between a is still exit ,the style letter-spacing:-0.3em will make effective when delete the style of a { letter-spacing:0 }
why? can i figure out this problem?
wow this one stumped me for a while...believe it or not here is your answer:
font-size:0; must be added to parent element
In the case of your example, I would define the font-size of the a tags separately, and add "font-size:0;" to the parent div element
In other words:
css:
.item-list{letter-spacing:-0.3em; font-size:0;}
.item-list a{letter-spacing:0;display:inline-block; font-size:SOMETHING HIGHER;}
(also your DOCTYPE declaration must be correct or display inline-block can have problems working in IE, at least I had trouble with it with IE7)
This should end any extra margin frustration you're experiencing from display:inline-block;
It has to do with how you're typing your HTML. Because you're formatting it nicely in your IDE, a la, with spaces and new lines, those spaces and newlines show up when displayed on the page. So instead of
<div class="item-list">
a
a
a
a
</div>
type it out as one line and they will go away:
<div class="item-list">aaaa</div>
You can add this CSS
a{float:left}
Gap will Remove
I always use:
line-height: 2.2; //or whatever value you want
I took from facebook layout and works amazing for me
This is HTML.
<div class="container">
<div> background of this i need in white </div>
<div> background of this i need in red </div>
<div> background of this i need in white </div>
<div> background of this i need in red </div>
</div>
I want to select alternate div without adding class or id .
Is it possible with CSS only (no Javascript) with IE 7 support
IE7 doesn't support the selector you would require, which is :nth-child().
Generally you would use
.container div:nth-child(even) {
background: red;
}
IE7 does not support it, unfortunately.
You will need to use JavaScript, or add a class to every odd or even row (perhaps using a server side language).
can't we select every second div inside <div class="container"> [with the CSS2 selectors introduced by IE7]?
Well kind of, with the adjacency selector:
.container div { background: white; }
.container div+div { background: red; }
.container div+div+div { background: white; }
.container div+div+div+div { background: red; }
But that means writing out a rule (of increasingly unwieldy length) for each child. The above covers the example markup with four children, so it's manageable for short, fixed-number-of-children elements, but impractical for elements with a large or unlimited number of children.
This cannot be done.
Use in-line style tags, like,
the following works in IE 7
not tested for others.
<div style="background-color:#ffff00" > Hello YOU div</div>
div:nth-child(odd) { background-color:#ffffff; }
div:nth-child(even) { background-color:#ff0000; }
but i don't know (and can't test) if this works in IE7 - if not, you'll have to use different classes for the divs.
Hopefully a picture is worth a thousand lines of code because I don't want to have to strip down all of the ASP.Net code, HTML, JavaScript, and CSS to provide an example (but I'll supply what I can upon request if someone doesn't say "Oh, I've seen that before! Try this...") [Actually, I did post some code and CSS - see bottom of question].
Here is a portion of a form page being displayed in Firefox:
The blue boxes are temporary stylings of a <label> tag and the orange lines are temporary border styles of the <div> tags (so I can see where they extend and break). The <label>'s are styled to float: left as are the <div's on the right. In addition, the descendant controls of the <div> are also float:left purely so they will line up on the top of the <div> (since there are some taller controls like multiline textboxes down below).
The radio buttons are generated by an ASP control, so they are wrapped in a <span> - also floated left since it is a descendant of the <div>.
Here is the same portion of the screen rendered in IE7:
There are a few minor rendering differences, but the big one that's driving me crazy is the extra white space beside the <input> controls! Note that the <span>'s around the radio buttons and checkboxes line up correctly.
Although they aren't shown, the same thing happens with drop-down lists and list boxes. I haven't tried wrapping the input controls in a <span>, but that might work. It's an ugly hack, though.
I've tried several of the IE7 workarounds for box issues and I've edited the CSS until I'm in pure voodoo mode (i.e., making random changes hoping something works). Like I said, I hope someone will look at this and say, "I've seen that before! Try this..."
Anyone?
Followup 1:
I'm using the XHTML 1.0 Transitional <DOCTYPE>, so I should be in standards mode.
Followup 2:
Here is a small snippet of the generated code for the above (the first control and the last control). Note that this code was generated by ASP.Net and then dynamically edited by JavaScript/jQuery.
<fieldset id="RequestInformation">
<legend>Request Information</legend>
<ol>
<li>
<label id="ctl00_ContentPlaceHolder1_txtRequestDate_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_txtRequestDate">Request Date:</label>
<div class="FormGroup">
<input id="ctl00_ContentPlaceHolder1_txtRequestDate" class="RSV DateTextBox hasDatepicker"
type="text" value="10/05/2004" name="ctl00$ContentPlaceHolder1$txtRequestDate"/>
<img class="ui-datepicker-trigger" src="/PROJECT/images/Calendar_scheduleHS.png" alt="..." title="..."/>
<span id="txtRequestDate_error"/>
</div>
</li>
--STUFF DELETED HERE--
<li>
<label id="ctl00_ContentPlaceHolder1_chkAppealed_L" class="stdLabel"
for="ctl00_ContentPlaceHolder1_chkAppealed"> Request Appealed?</label>
<div class="FormGroup">
<span class="stdCheckBox">
<input id="ctl00_ContentPlaceHolder1_chkAppealed" type="checkbox" name="ctl00$ContentPlaceHolder1$chkAppealed"/>
</span>
</div>
</li>
</ol>
</fieldset>
Here is the relevant portion of the CSS (I double checked to make sure this duplicates the problem):
div
{
border-style: solid;
border-width: thin;
border-color:Orange;
}
label
{
border-style: solid;
border-width: thin;
border-color:Blue;
}
.FormGroup
{
float:left;
margin-left: 1em;
clear: right;
width: 75em;
}
.FormGroup > *
{
float:left;
background-color: Yellow;
}
fieldset ol
{
list-style: none;
}
fieldset li
{
padding-bottom: 0.5em;
}
li > label:first-child
{
display: block;
float: left;
width: 10em;
clear: left;
margin-bottom: 0.5em;
}
em
{
color: Red;
font-weight: bold;
}
Solution!
Matthew pointed me to this page on IE/Win Inherited Margins on Form Elements and that was the problem. The input boxes were inheriting the left margins of all of their containing elements. The solution I chose was to wrap each <input> element in an unstyled <span>. I've been trying to keep the structure of the HTML as semantically sound as possible, so I solved it using a jQuery command in the $(document).ready() function:
//IE Margin fix:
// http://www.positioniseverything.net/explorer/inherited_margin.html
jQuery.each(jQuery.browser, function(i) {
if($.browser.msie){
$(":input").wrap("<span></span>");
}
});
Note that this will only add the stupid <span>'s on IE...
StackOverflow to the rescue again!
The input is inheriting the margins from the surrounding div and the ol. If you surround it with another tag like a span or a div, it should solve your problem.
Edit: You can find more information and workarounds at http://www.positioniseverything.net/explorer/inherited_margin.html