Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"
Related
The first pseudo class in the styled.q isn't working. It will not appear on the screen. If I copy and paste it so that ::before is listed first it doesn't work. If I list the first pseudo class a second time it works.
const ResearchingRyan = styled.div`
height: 100vw;
width: 100vw;
background-image:url(${phonePic});
background-repeat: no-repeat;
background-position: left;
background-size: cover;
display:flex;
flex-direction:column;
justify-content: flex-end;
align-items: center;
#media screen and (min-width: 525px) {
background-image:url(${tabletPic});
height: 500px;
width: 500px;
}
#media screen and (min-width: 1100px) {
background-image:url(${desktopPic});
height: 500px;
width: 500px;
}
`
const QuoteP = styled.p `
background-color:${dark};
color:${bgAlt};
padding:1rem
`
const QuoteQ=styled.q`
quotes: "\201C", "\201D";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color:${bgAlt};
}
`;
In "QuoteQ" component you need to correct "quotes" property. You write is correct, but sometimes in styled components meet especially work with unicode in something properties, example is "quotes".
Because of this, styles were not applied to pseudo-elements. Because style processing stopped at the quotes property. Correct the quotes and everything will work.
Below represent code with correct "quotes" property. And link to codesandbox with demo with this code.
https://codesandbox.io/s/styled-components-forked-1r1qc5
Also link to github issue with like problem.
https://github.com/styled-components/styled-components/issues/3413
const QuoteQ = styled.q`
quotes: "\\201c" "\\201d";
&::after {
content: close-quote;
font-weight: bold;
font-size: 36px;
color: blue;
}
&::before {
content: open-quote;
font-weight: bold;
font-size: 36px;
color: red;
}
`;
I've installed the express-minify middleware but for some reason it seems to cause an error whilst loading the attached css file.
I have tried validating the CSS with an online service and it doesn't give me any error.
I have tried to debug by removing all elements leaving one at the time and when I hit .mainmenu tr td:hover:not(.mainmenu_item_selected) it fails.
So removing everything from .mainmenu tr td:hover:not(.mainmenu_item_selected) to the end of the file will make it work (Obviously without all the other required styles).
I have even tried to recreate the file and also name it differently without any success.
The express logs are showing me: GET /stylesheets/gctl.css 200 4.954 ms - - meaning that the file should be served correctly.
Its a standard installation as per npm website:
var minify = require('express-minify');
app.use(minify());
File (saved as gctl.css)
In main page (Using PUG): link(rel='stylesheet' href='/stylesheets/gctl.css')
CSS file:
html, body, * {
font-family: 'Raleway', sans-serif;
margin: 0;
}
.centered {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
.loginform {
text-align:center;
vertical-align:middle;
width: 30%;
height: 50%;
}
.closenewitem {
cursor: pointer;
}
/* Tooltip overide settings */
div.tooltip-inner {
max-width: 500px;
}
/* Remove outlines such as in chrome */
input:focus {
outline: 0;
}
/* all input text align center*/
input, textarea, label {
text-align: center;
cursor: pointer;
font-weight: 400;
}
/* Labels for help add help class to them */
label.help:hover {
color: red;
}
/* Logo CSS */
.logo {
position: absolute;
cursor: pointer;
top: 4px;
height: 40px;
}
/* menu css */
.mainmenu {
border-right-width: 1px;
border-right-style: solid;
border-right-color: lightgray;
margin-left: -15px;
height: 100%;
width: 100%;
}
.mainmenu tr td {
padding: 10px;
}
.mainmenu tr td:hover:not(.mainmenu_item_selected) {
border-right-color: red;
border-right-style: solid;
border-right-width: 3px;
color: black;
cursor: pointer;
background-color: #f0f0f0; /*#f9eafc*/
}
/* Selected menu item */
.mainmenu_item_selected {
border-right-color: black;
border-right-style: solid;
border-right-width: 3px;
background-color: lightgray; /*#f7faff*/
font-weight: 700;
color: black;
}
.mainmenu tr td span {
padding-left: 2px;
}
/* Footer div for additions to DB*/
.footer {
overflow: scroll;
position: absolute;
bottom: 0px;
height: auto;
min-height: 50%;
padding-bottom: 20px;
background-color: #f6f6f6;
border-top-color: lightgray;
border-top-style: solid;
border-top-width: 1px;
width: 100%;
}
.fixed-button {
position: absolute;
top: 4px;
right: 4px;
}
/* Error handling CSS */
.customerror {
border-color: red;
border-width: 2px;
background-color: #ffcccf;
font-weight: bold;
}
/* Shadow only for desktop icons panel as otherwise it would appear everywhere and it's annoying! */
.dsk-panel:hover {
-webkit-box-shadow: -1px 5px 15px 0px lightgray;
-moz-box-shadow: -1px 5-webkitpx 15px 0px lightgray;
box-shadow: -1px 5px 15px 0px lightgray;
}
.desktop-icon {
width: 60px;
opacity: 0.6;
}
I'm stuck and have no clue on what is causing the problem!
If you're sure that the default behavior breaks the Bootstrap layout and there is no issue posted about it yet then you should post an issue on GitHub where this project tracks things like that.
But "breaks layout" doesn't say anything really. Does it change margins? Does it remove borders? What exactly does it break and how? So you should prepare a minimal set of CSS that this module breaks in a predictable manner instead of saying vague claims like that if you want your issue to be taken seriously.
It's entirely possible that you found a bug in this module but it's really hard to tell after an overly general claims like this.
I'm finding MathJax a superior alternative to MathML. However, I'm having some trouble getting MathJax to render while using a :hover event in my CSS:
span.rollover span {
display: none;
position: absolute;
background-color: white;
padding-left: 7px;
padding-right: 7px;
border: 1px solid red;
color: navy;
font: 1em "Computer Modern", "Computer Modern Roman", "Latin Modern", "Cambria Math", serif;
text-decoration: none;
border-radius: 10px 10px 10px 0;
opacity: 0.9;
text-align: center;
vertical-align: middle;
white-space: nowrap;
line-height: 150%;
}
span.rollover:hover span {
display: initial;
top: -30px;
z-index: 50;
}
At the moment it's displaying garbage; a current draft of the page can be found here. Here's an example of the problem:
<span class="rollover">Initial angle<span>0.0 ≤ $\theta_0$ ≤ 1.6 rad</span></span>
Is there a way to force MathJax to render the markup for such an event?
Your CSS is too aggressive: it applies to every span within your rollover spans. Since MathJax uses spans to lay out the mathematics, it applies to those, and so you are forcing the position, border, top, etc. for every element used by MathJax. That means you are moving the math content out of place, and giving it borders, and so on (this account for some of the extra elements that appear above the ones you expect.
If you change
span.rollover span {
...
}
span.rollover:hover span {
...
}
to
span.rollover > span {
...
}
span.rollover:hover > span {
...
}
so that these styles only apply to the top-level child spans (rather than every span), that should do it for you.
I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.
ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.
You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>
After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/
I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/
Could someone explain me what's going on with this small piece of HTML ?
http://jsbin.com/akome5
On most of current browsers (FF4, Chrome10, IE9, IE8, Opera 11), the layout of the element looks like this :
Meh?! I don't understand why ?!
Why aren't the height and width as big as the visible box (orange+red spaces) ?
Adding a "display:inline-block;" to the element doesn't seems to really fix it.
How can I fix it ?
Thx!!
Setting a width and height on an A tag
Try adding the following styles.
a.button {
display: block;
float: left;
overflow: auto;
}
a.button span {
display: block;
float: left;
}
I'd propose a different approach involving no spans
html:
<a class="button2" href="#">Text Text Text</a>
css:
/* Button 2 */
.button2 {
background-color:red;
border:solid 10px orange;
border-top:0;
border-bottom:0;
display:inline-block;
color:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size:11px;
font-weight:bold;
line-height:30px;
text-decoration:none;
padding:0 3px;
}
old (top) new (bottom)
http://jsfiddle.net/pxfunc/vr7gJ/
For information I manage to do it without float:left, here is the whole CSS :
a.button{
display: inline-block; /* <- added */
text-decoration: none;
}
a.button span{
display: inline-block;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
font-weight: bold;
height: 30px;
line-height: 30px; /* <- added */
text-decoration: none;
}
a.button .left, a.button .right{
background-color: orange;
width: 10px;
}
a.button .text{
background-color: red;
color: white;
}
The line-height instruction was the key.