We have a hr line and there is a weird black pixel underneath it.
Screenshot: http://i52.tinypic.com/2vwxy78.jpg
Our code:
HTML:
<hr />
CSS:
hr {
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #AAAAAA;
clear: both;
height: 0;
margin: 12px 0 18px;
}
Browser:
Firefox
Why is this pixel appearing underneath the <hr />? How do we fix this?
You need to reset all the border properties for the <hr>. Particularly the left border in your case. So:
border: 0;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #AAAAAA;
....
Check it out - http://jsfiddle.net/uwed3/
You haven't removed the default style on the <hr> element.
Add this to your CSS:
border-left: 0;
And you should be fixed.
Related
I have css that adds a border around a list items, but when I add the padding, the list items' borders start crossing over each other. Here is my current css for the Li:
.display_times{padding: 5px 10px 5px 10px !important; font-size: 24px; border:1px solid black; display:inline; }
Here's a picture of what it looks like.
Is there any way to keep the padding but push the borders back so that they are more like this, but with padding:
It seems this css works:
.display_times {
padding: 5px 10px 5px 10px !important;
font-size: 24px;
border:1px solid black;
display: inline-block;
}
Not sure if this is what you are after but:
HTML
<ul>
<li>10:00</li>
<li>12:00</li>
<li>13:00</li>
</ul>
CSS
ul{
padding: 0;
list-style: none;
border:1px solid black;
}
li {
border-bottom: 1px solid black;
}
li:last-child{
border-bottom: 0;
}
Here's one way to do it.
div {
width: 50px;
text-align: center;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
.last {
border-bottom: 1px solid black;
}
<div>11:00</div>
<div>12:00</div>
<div>13:00</div>
<div class="last">14:00</div>
Don't Ever use display:Inline, if you want to give the elements a specified padding or height, because these properties doesn't apply to inline.
You Can Only Set left or right width using Inline, better always use for such situation inline-block.
On http://adasportsandrackets.com/wordpress, I am trying to add CSS to add a border under the h4 heading "Best Sellers." It's not working and it's not a caching issue as I've tried in the major browsers after deleting cache.
Here is the HTML:
<div class="wpb_text_column wpb_content_element best-sellers">
<div class="wpb_wrapper">
<h4>Best Sellers</h4>
And here is my CSS:
.best-sellers h4 {
border-bottom: 1px solid #eee;
padding: 7px 0px;
}
I also tried:
.best-sellers {
border-bottom: 1px solid #eee;
padding: 7px 0px;
}
This worked for me:
.page-template-template-home-default-php .wpb_wrapper h4 {
border-bottom: 5px solid #999;
}
Or try:
.best-sellers h4 {border-bottom: 5px solid #999;}
Try:
.wpb_wrapper h4 { border-bottom: 1px solid #eeeeee;}
Or try adding a class to h4 e.g.
<h4 class="borderh4">Lol</h4>
.borderh4 {border-bottom: 1px solid #eeeeee;}
Best to select based on it's parent div class:
.wpb_wrapper h4 {
border-bottom: 1px solid #eee;
padding: 7px 0px;
}
As the previous answer stated, if your parent div has multiple classes, you usually need to select both for it to grab the right element:
.wpb_wrapper.another_class h4 {}
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
I am working on a tabbing system for my website like in the image below.
Here is my mark-up and LESS code:
<div class="tabsWrapper">
<div class="tabbar">
<div class="tabbarButton current" id="tArticles">
<img class="icon" src="/res/img/articles_archive.png" alt=""/>
<span class="caption">Arhivă de articole</span>
</div>
<div class="tabbarButton" id="tFiles">
<img class="icon" src="/res/img/files_archive.png" alt=""/>
<span class="caption">Arhivă de fișiere</span>
</div>
</div>
<div class="tabsContent">
<div class="tab current" id="articles"></div>
<div class="tab" id="files"></div>
</div>
</div>
LESS (see full code here)
.tabbar {
display: block;
position: relative;
overflow: hidden;
> .tabbarButton {
height: 45px;
border-top: 1px solid #bfc2c2;
border-right: 1px solid #bfc2c2;
&:first-child { border-left: 1px solid #bfc2c2; }
&:hover {
box-shadow: inset 0 3px 0 #bfc2c2;
}
&.current {
box-shadow: 0 1px 0 #f5f8f8, inset 0 3px 0 #a7aaaa;
border-top: 1px solid #a7aaaa;
background-color: #f5f8f8;
}
}
}
> .tabsContent {
border-bottom: 1px solid #bfc2c2;
border-left: 1px solid #bfc2c2;
border-right: 1px solid #bfc2c2;
border-top: 1px solid #bfc2c2;
background-color: #f5f8f8;
}
How can I make the currently active tab button to stay in front of the others?
The first thing I would try is to add a :after or :before to the tab, with the same width and same background-color but on the forground.
To be sure, if tabbar is positonned relatively, you can positione your :after absolutely so that it's always ok !
I don't understand why your box-shadow-solution doesn't work..
.tabbarButton.current:after
Did you tried to pass your current tab on the forground ? (z-index, translateZ...)
I figured out myself how to achieve the effect I want: by faking the bottom border of the tabs-strip:
Modify the .tabsContent to not have border-top, then provide .tabbar class with a :after pseudo-element:
.tabbar {
// truncated code
&:after {
position: absolute;
display: block;
content: '';
width: 100%;
bottom: 0;
left: 0;
z-index: 1;
border-bottom: 1px solid #bfc2c2;
}
}
It is important to change the z-index of .tabbarButton to 2 (for example) so that it stays in front of the .tabbar:after.
I have the following code to create a border around all images as well as hover effects, but how do I disable this on selected images (ie. social buttons or logo)
img {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
you could add a class to the image that you want/dont want to have the borders, then style them differently by using their class in the css instead.
You should write in css the full path to the image,for example
div.hover-img ul li p a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999; }
This additional class .hover-img and the path to the image helps you identify only the images you need to be bordered in hover position.
add a seperate class
.noshadow{ border:none; box-shadow:none}
Add this class to the element where you don't required the box-shadow and border
use the css not selector
like this
html markup
<div>
<img src="http://images03.olx.in/ui/3/20/99/45761199_1.jpg" alt="not found"/>
<img src="http://i1-news.softpedia-static.com/images/news2/Facebook-Changes-Font-Size-Users-Grab-Their-Pitchforks-2.jpg" alt="not found" class="noborder"/>
</div>
css
img:not(.noborder) {
border: 2px solid red;
}
see the Documentation and use here
Demo Fiddle