I have two classes, left and right, that float and clear things left and right (real crazy stuff).
But here's the problem.
.dashWrap h3 {
background-color: #666;
border: 2px solid #000;
/*border-radius: 0.5em 0.5em 0 0;*/
text-indent: 0.5em;
}
.dashWrap .dashContent {
/* max-height: 5em;*/
min-height:5em;
overflow-x: hidden;
overflow-y: auto;
border: 2px solid #000;
border-top-color: transparent;
}
.right //If I delete or comment this out, left no longer is applied to anything.
{
clear:right;
float:right;
width:35%;
}
.left
{
float:left;
clear:left;
}
.right //If I delete or comment out this, right no longer is applied to anything.
{
clear:right;
float:right;
width:35%;
}
That's the exact section I have in the file I am editing. the only difference in the actual source file when I load the website is that after the closing curly for .dashContent, there is this :
​
What could be causing this?
You have some invisible or corrupted characters in you file, so the first rule after the .dashContent will be broken and is ignored by the browser.
Try to delete everything between the rules to get rid of the invisible characters, and if that fails you can try copying the rules into a new file. If all else fails, you may have to retype part of the file.
Related
I am trying to make a paragraph to fit the width of a text however, I am getting this white space on line breaks. I am looking for any solution that wouldn't affect text and wouldn't require JavaScript (that could cause a reflow). Doesn't have to be inline-block.
* {
margin: 5px;
padding: 5px;
}
div {
background: gray;
}
p {
background:white;
border-bottom: 1px dotted black;
display: inline-block;
max-width: 130px;
}
<div id=container>
<p>technique and statement a landscape or discovery a injection or fic</p>
</div>
Demo Fiddle
Is there any way that I can make paragraph width match the width of the longest line?
Here is the expected and current result:
* {
margin: 5px;
padding: 5px;
}
div {
background: gray;
max-width: 130px; // you can ignore this if you dont need to be 130 px
}
p {
background:white;
border-bottom: 1px dotted black;
display: inline-block;
width:100%;
}
As #skyline3000 mentioned:
"match the longest line" - as #James said, there is only one line. You are artificially making line wraps with the max-width. You either need to put real line wraps into the text, or continue to adjust the max-width.
You need to manually specify line breaks which work for me - handling line breaks is rather an easy job for regular users.
body {
background: gray;
}
#container {
background: white;
display: inline-block;
}
span {
border-bottom: 1px dotted black;
max-width: 130px;
background: white;
}
<div id=container>
<span>technique and<br>statement alandscape<br> ordiscovery ainjectn or
fic i</span>
</div>
JsFiddle
Also, I have decided to move to the span element and wrap it into display: inline-block to achieve this result. I don't know if this result is satisfying to you, I'm not sure if I was trying to fight HTML/CSS spec here. Real line breaks are probably the only solution.
I have simple css and html code and i wondering why last vertical image not working. I mean it border and margin should be added to last element not first.
Is anyone knows why this not work?
See in https://jsfiddle.net/st2Lwrgj/
* {margin: 0; padding: 0;}
.wrap {width: 250px; border: 1px solid red;overflow:hidden;}
img {
display: block;
width: 100%;
height: auto;
margin-bottom: 10px;
}
img.vertical {
width: 45%;
float: left;
margin-right: 10px;
}
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
:nth-child(even) will apply to every second image (second, fourth and so on). When you insert a horizontal image without the .vertical class you will break this order.
The following is a bit of a workaround, but the logic is pretty simple.
First we select every second image using img.vertical:nth-child(even)
We then find images without the .vertical class using:not(.vertical)
We then use the general sibling selector to select the following images and revert the order using img.vertical:nth-child(odd) instead of even.
As we have now applied borders to both odd and even ocurances of img.vertical, we need to remove the styling from the images we selected at point 1. We do this with a selector as set in point 3, but with even instead of odd: img:not(.vertical) ~ img.vertical:nth-child(even)
TLDR; change this part:
img.vertical:nth-child(even) {
margin-right: 0px;
border: 2px solid blue;
}
Into the following:
img.vertical:nth-child(even),
img:not(.vertical) ~ img.vertical:nth-child(odd) {
margin-right: 0px;
border: 2px solid blue;
}
img:not(.vertical) ~ img.vertical:nth-child(even) {
margin-right: 10px;
border: 0;
}
You can see how this works in this fiddle.
I'm pretty inexperienced with CSS, but I know from past experimenting (and other threads on SE) that it's best practice to close the final line of a CSS block with a semicolon, although it's technically optional.
ie:
p {
font-family:helvetica;
font-size:16pt;
}
as opposed to:
p {
font-family:helvetica;
font-size:16pt
}
BUT on the site I'm designing now (a Wordpress template actually), when I add the semicolon to that final line, the browser refuses to acknowledge that instruction AT ALL. But if I leave off the semicolon, it works!
I'm going to assume I'm doing something wrong here, because it should work identically both ways. Any idea what's going on?
As requested, here's a sample of my actual code. It affects the whole stylesheet, so I just grabbed a few blocks at random...
.post p
{
margin-bottom: 2em
}
.footer
{
width:60%;
margin-top: 2em;
margin-left: auto;
margin-right: auto;
margin-bottom: 4em
}
#nav-below
{
background-color: #dde4ec;
width:100%;
height:3em;
padding-top:1em
}
#nav-container
{
background-color: #fff;
width:30%;
margin-right: auto;
margin-left: auto;
margin-top:1em;
margin-bottom:2em
}
Don't know if this will be any help, but thanks nonetheless.
today i've updated my app from meteor 0.7.0.1 to 0.7.1.1 and, i have a crash of my app because of my app.css file.
Here is the part that fail :
#media screen (min-width: 1200px) {
#BtnCollapseStatusFilterBar { /* IT'S HERE JUST BEFORE THE EMBRACE */
display: block;
}
}
And the message is :
=> Errors prevented startup:
App 21289 stdout:
App 21289 stdout: While building the application:
App 21289 stdout: app.css: property missing ':' near line 10:31
App 21289 stdout:
App 21289 stdout: => Your application has errors. Waiting for file change.
I don't really understand the problem because i'm not a CSS master.
Any idea ?
Here is the full CSS
#-webkit-viewport{width:device-width}
#-moz-viewport{width:device-width}
#-ms-viewport{width:device-width}
#-o-viewport{width:device-width}
#viewport{width:device-width}
#grid-float-breakpoint: #screen-desktop;
#media (min-width: 1200px) {
#BtnCollapseStatusFilterBar {
display: block;
}
#navbar-status-filterbar-collapse.collapse {
display: none !important;
}
}
/* CSS declarations go here */
#nprogress .bar {
z-index: 2000; /*bs3 navbar is on 1030*/
background: #A300FF;
}
body {
background-image: url(subtlenet2.png);
background-attachment: repeat;
/*line-height: 19px;*/
padding-top: 50px;
}
.blockAd {
padding-left: 10px;
min-height: 275px; /* don't work, only if inside style attribute directly in html */
border: none; /*1px solid grey;*/
border-radius: 10px 0 10px 0;
margin-bottom: 20px;
margin-right: 6px;
width:208px;
background: rgba(256, 256, 256, .7);
}
/* new ad */
.blockAd.newAd {
border-top: solid turquoise;
}
/* no more new */
.blockAd.viewedAd {
border-top: solid mediumseagreen;
}
/* detail open */
.blockAd.openedAd {
border-top: solid aquamarine;
}
/* no more interesting */
.blockAd.removedAd {
border-top: solid orange;
}
/* went to product */
.blockAd.visitedAd {
border-top: solid skyblue;
}
/* owner contacted */
.blockAd.starAd {
border-top: solid orangered;
}
.blockAd .btn-toolbar {
padding-top:5px;
}
.blockAnnonce .infos {
height: 110px;
margin-bottom: 3px;
}
.blockAd .infosHead {
color:black;
}
.blockAd .centerContentImage {
float:right;
width:100%;
padding-right:5px;
display:table-cell;
vertical-align:middle;
text-align:center;
margin-left:auto;
margin-right:auto;
}
.blockAd .centerContentImage img {
max-height: 110px;
max-width:140px;
}
.blockAd .centerContentImage button.OpenDetailAd {
height:105px;
margin-left:3px;
}
/* background of geo zone */
.navbar-collapse.navbar-location-collapse {
max-height: inherit;
}
/* title and buttons up / down non clickable */
.navbar-location-collapse ul {
margin-top: 50px;
}
/*
a.BtnConfiguration span {
width: 44px;
height: 34px;
}*/
Seems like version 0.7.1 throws errors where the syntax of your CSS is incorrect rather just ignoring the relevant rule, as was previously the case. There was probably always a problem there, it just wasn't raised before 0.7.1.
I'd put your entire CSS file in CSS Lint and see what it comes up with - it's possible that there's a problem on a different line to the one that Meteor is suggesting, or at least a problem somewhere.
UPDATE
Looking at the full code, you have at least one LESS variable in your file (#grid-float-breakpoint). I don't use LESS, but as far as I'm aware you need to give LESS files a .less filename extension to tell Meteor to compile them to CSS, otherwise the rules will fail. Try changing the filename from app.css to app.less and see if that works. Obviously, you need to have the LESS package added too, so meteor add less if you haven't done so already.
I had the same problem few hours back. I just missed some property value like this
padding-left:""
I forgot to give a value and after I gave it worked fine. Check for the same in your CSS.
I think in your app something in 10th line you forgot to give a value for the property like above.
I want to style a form in html using CSS. It's a really simple form, so I didn't expect to have any problems with accessing it with CSS selectors. But anyway, when I am trying to add something like:
#maincontent #left_side #comments{
margin: 100px;
}
or
#comments{
margin: 100px;
}
I see no visible effect.
Sorry, I think I am not very descriptive, but not sure how to describe the problem...
Maybe you could take a look at the demo url here:
http://chess-advices.com:8000/article/ololo/
And suggest how to fix my CSS, to pretify the form? (Well I actually just need to access it first)
Thanks in advance
You forgot to close this:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
change this to:
div.pagination span.disabled {
padding: 2px 5px 2px 5px;
margin-right: 2px;
border: 1px solid #f3f3f3;
color: #ccc;
display:none;
}
To find this: Line 267 in your style.css or you can use strg/cmd + f to find it...
But i think, if you add something like this:
form label { width: 100px; display: block; float: left; }
form p { padding: 5px 0px 0px 0px; }
your form would look nicer :)
I hope this is the answer of your question...
There is an error earlier in the css file that causes this. There is no closing bracket on the style div.pagination span.disabled style, that makes the browser skip the rest of the css file.
Note: as an id is unique in a page, you only need #comments to target the element. The only reason to use #maincontent #left_side #comments would be if you need to make it more specific to override some other style, or if you use the style sheet for several pages and there can be other elements with the id comments that you don't want to target.