As you can see on this image there is a top border (with a depth effect), that I need to remove (I just want to have the text written on the orange background, with no effect):
Here is the code:
<div class="form-group col-lg-3">
<div>
<label for="message"><br></label>
<div>
<span class="form-control hide" id="error-msg" style="color: red; background-color:#ED7D31;">different passwords</span>
</div>
</div>
</div>
I tried to add "border: none" or "border: 0px" in the span style attribute, but nothing change. Any idea ?
Thank you
The problem isn't the border. There is a box-shadow at the top of the span.
Below the code to remove it
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
Related
I know that borderless class removes the border between menu items, but I am interested in removing the bottom border on the whole menu.
I tried adding border-bottom: 0px none; in css to an id attached to the "ui menu" div but it has no effect.
Why doesn't this work? Thanks!
You need to include !important in that CSS rule. Also, add box-shadow: none.
.ui.menu {
border-bottom: 0 none !important;
box-shadow: none;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.3.3/dist/semantic.min.css">
<div id="menu" class="ui three item menu">
<a class="item active">Editorials</a>
<a class="item">Reviews</a>
<a class="item">Upcoming Events</a>
</div>
I'm experiencing an unwanted behavior with contenteditable elements.
When nesting a block element with contenteditable=false in a parent with contenteditable=true, I can't get edit the parent element at all.
.edit-box{
border: 1px solid black;
padding: 10px;
}
.tag{
display:block;
background-color: red;
color:white;
}
<div id="test" contenteditable="true" class="edit-box">
<span class="tag" contenteditable="false">TAG</span>
</div>
It is only possible to edit/get focus when there's more content, besides the block element.
Browser: Chrome
Any suggestions to prevent this behavior?
Add some content to edit within the parent element. It will be editable. I mean like below:
<div id="test" contenteditable="true" class="edit-box">
<span class="someclass">Content to be editable</span>
<br>
<span class="tag" contenteditable="false">TAG</span>
</div>
I'm trying to create a parent div inside a list element that contains two children div for the left and right. The left will contain an image and the right will contain two additional divs that contain some text and a timestamp.
I can't get the left and right divs to display without overlapping.
My HTML Looks like this:
<ul class="activity-comments">
<li>
<div style="border: solid 1px #ff0000;">
<div style="float:left;border: solid 1px #0000ff;">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
</div>
<div>
<small>Some sample text here 1</small>
</div>
<div>
<small>Posted 1 day ago</small>
</div>
</div>
</li>
<li>
<div style="border: solid 1px #ff0000;">
<div style="float:left;border: solid 1px #0000ff;">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small">
</div>
<div>
<small>Some sample text here 2</small>
</div>
<div>
<small>Posted 2 days ago</small>
</div>
</div>
</li>
</ul>
Take a look at this jsfiddle
What am I missing?
They are overlapping because you are floating a div, but aren't clearing the float.
Use the clearfix method to clear the float. Add a class container to your container divs and use this CSS:
http://jsfiddle.net/57PQm/7/
.container {
border: solid 1px #ff0000;
zoom: 1; /* IE6&7 */
}
.container:before,
.container:after {
content: "";
display: table;
}
.container:after {
clear: both;
}
You'll also notice that I've removed your inline CSS. This makes your code easier to maintain.
your thumbnail is setting the picture to a specific height of 41px. Either change the picture size, or change the div size or set the overflow of the outer div.
I have a number of images of items on a white background.. Some images are wider than others. I would like to add a border around the images, but want the border to be fixed width (say 100px)
Basically I want to have a variable amount of padding (between image and border) so that image width + padding (left and right) = 100px
Here is the code I'm working with:
<td style = "vertical-align: middle; border-left:">
<div style="border: 1px solid #DDDDDD; width:200px; text-align:center">
<img alt="blah" class="thumbnail" src="blah" style="vertical-align: middle; border:none; height:65x; text-align:center" />
</div>
</td>
First Please avoid inline style
see the demo
Use CSS as :
.imageBox {border: 1px solid #DDDDDD; width:200px; text-align:center}
.image {vertical-align: middle; border:none; height:65x; text-align:center}
and HTML as :
<td class="imageBox">
<div >
<img alt="blah" class="thumbnail" src="http://upload.wikimedia.org/wikipedia/commons/1/17/MetroLigeroMad_logo_1.png" />
</div>
</td>
Hi now define this css
img{vertical-align:top;}
Live demo
You can do it like this:
<div class="imageholder">
<img src="images/yourpic.jpg">
</div>
What you do next is to put the border on the div. The next thing you have to do is to make the div 100px wide.
I'm sure this will be ridiculously simple, but whatever... I'm trying to display a text area with a button to its right, similar to how StackOverflow displays a comment field with button when one clicks the 'Add Comment' link...the problem I'm experiencing is with the button alignment; it appears to align at the top right of its div (see image), I want to align it at the bottom left. I've tried using text-align, align, nothing works to move that pesky button, I used padding-top to move the button down, but padding-right appears to have no effect, but there's got to be a better way than padding. I need it to be cross-browser compatible as well.
Here is the html/css I'm using...
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input type='submit' value='Add Comment'/>
</div>
</div>
The reason why it is not adjacent to the textarea is because the div encompassing the text area is too large. If you inspect element on Chrome, you will notice where all the elements are.
I'd suggest you do not put them in separate divs if you want them stuck together.
<style>
.newComment {
position: relative;
width: 475px;
background-color: white;
}
</style>
<div class='newComment'>
<textarea style='border:1px solid #888; overflow:auto' rows='3' cols='40'>comments</textarea>
<input type='submit' value='Add Comment' />
</div>
You've set the widths of the container divs but you haven't specified the height, so your padding is not taking. I've provided a sample below so you can visually see what is happening...
http://jsfiddle.net/g6JSU/
Below is a possible solution with the button aligned to the vertical center:
http://jsfiddle.net/g6JSU/1/
try this
.newComment {
position: relative;
width:475px;
background-color:WHITE;
}
<div class='newComment'>
<div style='float:left;width:375px;'>
<textarea style='border:1px solid #888;overflow:auto' rows='3' cols='40'>comments </textarea>
</div>
<div style='float:left;width:75px;'>
<input style="float: left; margin-top: 20px;" type='submit' value='Add Comment'/>
</div>
</div>