Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 years ago.
Improve this question
I have a css code, "border-top" is not displaying correctly. I've done everything correctly but I just don't see the problem.
JSFiddle: http://jsfiddle.net/3vnWh/1/
Code:
div.topb {
border-top: 1px solid #dcdcdc;
}
you have and open { and selector:
fiddle
/* optional div height ,width, color */
{ /*this is missing*/
width:400px;
height:200px;
background-color:#ffffff;
font-size:28px;
color:#ffffff;
}
You should use
table.topb
instead of
div.topb
The section immediately before div.topb has no opening brackets or labels. If you comment this section out or give it the appropriate opening brackets, your border-top will display properly. Your section looks like this and can be fixed by adding a { before the width line:
/* optional div height ,width, color */
width:400px;
height:200px;
background-color:#ffffff;
font-size:28px;
color:#ffffff;
}
use any of the following
.topb
{
border-top: 1px solid #dcdcdc;
}
OR
table
{
border-top: 1px solid #dcdcdc;
}
OR
table.topb
{
border-top: 1px solid #dcdcdc;
}
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am trying to have two labels with corresponding inputs be on the same line with the same width, currently, the width is messing up when in a relatively small container.
Example of widths in small container:
Code:
#row {
display: flex;
flex-wrap: nowrap;
margin-top:4px;
}
#row label {
display:block;
width:25%;
height:30px;
line-height:30px;
text-align:center;
}
#row input {
width: 75%;
border: 1px solid rgb(116, 115, 115);
padding-left:3px;
}
<div id="row">
<label for="start">Start</label>
<input name="start" id="start" />
<label for="end">End</label>
<input name="end" id="endTime"/>
</div>
The difference is minimal, but noticeable. Any suggestions?
If you want to have same width input box then try using min-width property like:
#row input {
min-width: 250px;
border: 1px solid rgb(116, 115, 115);
padding-left:3px;
}
BTW they both look the same.
The widths are the same, my eyes were playing tricks on me.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I went through several links but I can't find a solution. Here is the demo code.
I want to remove the purple color and replace it with red, but I am unable to do that. Please help.
It is possible to overwrite class like this:
.mat-form-field.mat-focused {
.mat-form-field-ripple {
background-color: red;
}
}
The complete stackblitz example can be seen here
Try below styling:
autocomplete-filter-example {
input[type="text"] {
border-bottom: 1px solid black;
}
input[type="text"]:focus {
border-bottom: 1px solid red !important;
}
.mat-form-field-underline {
display: none;
}
}
Demo code
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 3 years ago.
Improve this question
Here is the code for this particular div:
.generated_text {
display: inline-block;
width: 50px;
font-family:'Gudea' !important;
text-align: left;
color:#000 !important;
background:#fff !important;
border: 30px !important;
border-color: #4b4b4b !important;
position: absolute;
top: 54%;
left: 38.5%;
margin: -150px 0 0 -150px;
width:560px;
height:170px;
}
Here is the result:
Note, I'm very new when it comes to web dev. Any help would be much appreciated and let me know if i'm missing anything in this post.
Try to add
border-style: solid
or
border: 30px solid #4b4b4b
For border to be shown, you need: width and style(dotted,solid etc). Maybe the color, but i'm not sure if the default one is black or you need to specify, too.
First of all, you must add border-style: solid; .
And you dont need !important , it is used only if you have more options for 1 propertie, f.e. you have
.generated_text{ color:#fff;} div.generated_text{ color:#000;}
and class .generated_text is in div, color will be #000, but if you add !important in .generated_text{ color:#fff !important;} it will be "more important"-
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I have two div elements and nav > nav_1. I am expecting to see 500x500 black color background and 50x50 blue color area on the top left but instead of showing me only 500x500 black area. how could i fix it?
.nav {
height: 500px;
width: 500px;
background-color: black;
}
.nav.nav1 {
height: 50px;
width: 50px;
background-color: blue;
}
<div class="nav">
<div class="nav_1">
</div>
</div>
First of all in your CSS, you were using .nav1 instead of .nav_1. Secondly put a space between .nav and .nav_1. Try this:
.nav .nav_1{
height:50px;
width:50px;
background-color:blue;
}
Here is a Fiddle for the same.
EDIT:
For getting a margin-top of 50px, try this:
.nav{
height:500px;
width:500px;
background-color:black;
position:fixed; /* fix position of .nav div */
}
.nav .nav_1{
height:50px;
width:50px;
background-color:blue;
margin-top: 50px ; /* put margin-top to 50px */
}
Here is the Updated Fiddle for the same.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Ive tried for hours to get a border at the top and bottom of my navbar.
http://www.rubricdesign.co.uk/ http://www.rubricdesign.co.uk/style.css
Your font-size is too big for the <nav>. That's what's happening. Plus all the unnecessary floats. Here's a link to get you back to the start and you can style from here: http://jsfiddle.net/disinfor/ypL8n/1/
use css:
#navi {
border-top: solid 1px black;
border-bottom: solid 1px black;
}
Use this:
CSS
border-top:1px solid #FFFFFF;
So it's border-top: ( thickness ) ( type of line ) ( color )
use css:
.navbar {
border-top: solid 1px black;
border-bottom: solid 1px black;
}
Also you have given it a set height remove that