I can't for the life of me figure out why this nested sass is not working. Here's my html:
%h1 Office Listing
#office-holder
.listing-stats··
#address·
=#office_listing.address
.listing-stats-2
#rent
%span.special2 Rent:·
$#{#office_listing.rent}/month
#size
%span.special2 Space:·
#{#office_listing.size} sq. feet
This is all within a div that namespaces the html page, which has two ids -- #office_listing and #show. I'm using rails, so I'm using the namespaces to neatly separate the views for my css. Here's the CSS that isn't working:
#office_listing#show {
#address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white;
}
}
Yet the CSS for that isn't displaying. The CSS seems to be compiling fine, however. When I inspect the compiled stylesheets, they look like this:
#office_listings#show #address {
width: 100%;
font-size: 50px;
background-color: #A0183C;
height: 100px;
text-align: center;
margin: auto;
font-size: 30px;
padding-top: 35px;
color: white; }
Which seems like it should target the appropriate HTML element. What am I missing?
Can you have double ids? #office_listings#show implies that you have two ids on the same element. That's against convention and my guess is that it just won't match. Make show a class instead and have #office_listings.show #address instead
Related
I know that we can modify the design by making changes to botchat.css as per our requirement. Now, I want to know that can each button be of different color as shown in the image.
[button1] [button2] [button3]
All the buttons must be of different colors.
In your custom.css or whatever your custom CSS file name is you can address this by using CSS like this to account for the maximum amount of buttons you will produce on a card:
.wc-card button:nth-of-type(3) {
background-color: green;
color: #0078d7;
min-height: 32px;
width: 100%;
padding: 0 16px;
}
.wc-card button:nth-of-type(2) {
background-color: red;
color: #0078d7;
min-height: 32px;
width: 100%;
padding: 0 16px;
}
.wc-card button:nth-of-type(1) {
background-color: orange;
color: #0078d7;
min-height: 32px;
width: 100%;
padding: 0 16px;
}
...
This CSS will produce this result:
Using SCSS and have a nested element which I am trying to nest an nth-of-type() rule into but it hasn't worked anyway I type it. I want every odd el_header element to be white text and every even one to be black.
.el {
height: 500px;
width: 500px;
&_header {
height: 100%;
width: 10%;
background: #555;
display: inline-block;
line-height: 500px;
text-align: center;
&nth-of-type(odd) {
color: black;
}
&nth-of-type(even) {
color: white;
}
}
}
DEMO
You just forgot the : after &.
Use
&:nth-of-type(odd){...}
&:nth-of-type(even){...}
and it will work.
See updated fiddle
I'm working on a WP template. The style.css file loads successfully. But the styling is not applied to many of the elements. You can see it in http://madihaa.mv/v1/
Take a look at child <p> in <div class="home-second-row">.
In line 758 of style.css file the following can be found
.home-second-row p {
width: 225px;
height: 215px;
background: rgb(112, 184, 0);
border-radius: 8px;
margin-right: 10px;
text-align: left;
padding: 20px;
float: left;
color: #ffffff;
font-size: 1.3em;
line-height: 1.6em;
overflow: hidden;
}
But it is not applied to it.
There is an issue with your CSS file. Look at line 742, you haven't closed the declaration with }. This is stopping the other declarations afterwards from working.
EDIT
Your CSS currently:
.navigation-main .menu-item .sub-menu li{
padding: 5px 10px;
/* site-main */
.site-main{
margin-top: 60px;
}
^ That is the issue
I've used http://jigsaw.w3.org/css-validator/validator (for http://madihaa.mv/v1/wp-content/themes/madihaastyle/style.css?ver=3.5.1 ) to validate your CSS and there are a few errors with the comments, also found the unclosed decleration already mentioned.
Hope this helps
I've read about postion:absolute problems and tried almost every possible solution. Including positioning divs relatively, wrapping them in a relatively positioned parent etc etc, but it didn`t help.
I'm drawing a table and after that im putting divs in it in a specified place. Table (grid) prints fine but places where divs should be are printed in slightly different color and divs aren`t there. In chrome it prints ok. Has anyone managed to find a solution yet? Maybe I'm doing something else wrong?
My css:
body
{
margin: 0px;
padding: 0px;
font-family: Verdana;
-moz-user-select: none;
}
.grid
{
height: 100%;
border: 1px solid;
border-collapse: collapse;
}
.grid tr
{
text-align:center;
border-bottom: 1px dashed;
cursor: cursor;
}
.grid td.hourCell
{
width: 100px;
vertical-align:top;
font-size: 10px;
font-weight: 500;
height: 60px;
}
.grid th.hourCell
{
width: 100px;
}
.grid th
{
font-weight: bold;
height: 20px;
width: 200px;
font-size: 12px;
font-weight: 500;
font-family: Verdana;
border-right: 1px solid;
background-repeat: repeat;
cursor: cursor;
}
.grid td
{
height: 30px;
width: 200px;
vertical-align: top;
}
.div_which_doesnt_print
{
padding: 0px;
margin: 0px;
width: 200px;
font-size: 10px;
font-family: Verdana;
height: 0px;
position: absolute;
border-style: solid;
border-width: thin;
overflow: hidden;
opacity:0.7;
z-index: 3;
}
Every help would be greatly appreciated! Even reassuring me that solution is still unavaible.
EDIT: It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
It looks like it was an issue with opacity. Setting
#media print
{
.div_which_doesnt_print
{
opacity:1;
}
}
Fixed the issue with visibility. They still display sometimes in wrong places, but that`s a different issue.
If you are Inserting the Divisions Inside the Table Cells, then just give the Cell TD/TR position to relative and then give absolute positioning to the div inside it.
This was working fine for me in few projects.
I hope this helps.
My aim is have the text inside this div displaying in the middle of it's container cross-browser.
If I could achieve this it would enable me to use fewer images.
http://jsfiddle.net/tMFaD/
Notice how this example looks different in Chrome/Safari and Firefox. The issue seems obviously related to the type/line-height/similar (the '1' is higher up on firefox).
Can this be easily done?
UPDATE: This is the small difference that i'm trying to solve: http://cl.ly/2A2o371c2O2r3q0T0R2E
UPDATE 2: I have not found a definitive cross-browser solution but some of the answers in this thread should come close enough for most. The solution I used was to use a browser-targeted rule for this element. I could also have used images/sprites.
You could set line-height to match the height of the box and then remove the top and bottom padding. That will align it in the (vertical) middle of the box.
You can do it in a couple of ways:
.box {
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
display: table-cell;
vertical-align: middle;
text-align: center;
width: 80px;
height: 80px;
}
.box {
width: 80px;
height: 80px;
font-size: 44px;
line-height: 80px;
font-weight: bold;
color: white;
background: pink;
text-align: center;
}
Both will produce the same results:
http://jsfiddle.net/spacebeers/s9Urm/8/
EDIT: To get the level or cross browser/cross OS precision you're after I think you're going to have to use separate style rules for some of them or just use images.
OTHER suggestion, use line-height to control vertical middle instead of padding:
.box {
display:block;
font-size: 44px;
font-weight: bold;
color: white;
text-align: center;
background: pink;
float: left;
line-height:80px;
width:80px;
height:80px;
}