So I was looking at the page for horizontal lines here and the horizontal line looked at bit weird at the beginning. I'm running windows with the chrome browser and I zoomed in to 500% view and I saw this:
Looking at the horizontal line you can make out a small dot at the beginning of the line that looks very annoying. Any ideas how to get rid of this?
By default, hr have inset borders:
The small dot you are seeing is the left border, which is as dark as the top border.
Then, you can just remove the left border.
hr {
border-left: none;
}
<hr />
Try changing the border style to something like border-style: solid
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 1px;
}
Related
I recently realised that padding property adds spacing between the content and the border of this content.
I was testing this property when I discovered an instance where padding doesn't add spacing.
I have a paragraph
<p>Some text</p>
and some styling
p {
background: red;
color: white;
border: dashed 2px blue;
margin-left: 44px
}
Result (JSFiddle)
Then I add padding: 49px to CSS. Logically, I shoud get something like it
but finally I obtain it (JSFiddle)
As we can see, the text moves, but the red spacing isn't added. Why?
PS : maybe I express myself badly, I'm sorry about it
You have a margin-left. Difference between Margins and Paddings.
Remove it:
CSS
p {
background: red;
color: white;
border: dashed 2px blue;
padding-left: 49px
}
In this fiddle
No more space :)
The red is the background-color which is also by default painted into the padding area, and not the margin. The behavior you are seeing is correct.
If you don't want the background painted into the padding area, you can set:
background-clip: content-box;
However I think that only works in IE9 and up, so if you need to support IE8, then you can't use that.
The result you get is correct.
Margin - adds space outside your box
Border - adds a border around your box
Padding - adds space between content and border
Look up "css box model" on google for more.
K
I have not understand what you are trying to do but i guess you want this
<html>
<head>
<style>
p
{
background: red;
color: white;
border: dashed 2px blue;
/* display: inline-block; */
padding-left: 49px
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
In the site I'm making I'm adding a feature that adds bulletins, little staff notices, at the top of the home page. My idea was that I have a profile section floated to the left, a little dateline at the top showing (of course) the date, and some tags.
The problem arises with the dateline section. The dateline is to the right of the profile at the top of the bulletin. There is a border-bottom for the dateline, and this border stretches all the way across the bulletin, being drawn over the floated div.
I made an example fiddle here, you can see the problem. For some background info, all bulletins will be inside the div.bulletin_frame, the "main div" if you will. Within that there will be div.bulletin s. I have it configured so that they all have a solid border at the top except for the first one, so that there's a border between them all. (see the stylesheet)
Thanks!
CSS:
div.bulletin_profile
{
padding: 5px;
margin-right: 5px;
text-align: center;
float: left;
border-bottom: 1px gray solid;
border-right: 1px gray solid;
border-bottom-right-radius: 5px;
}
div.bulletin_dateline
{
padding: 5px;
font-family: monospace;
border-bottom: 1px gray solid;
}
div.bulletin_body
{
padding: 5px;
}
The borders aren't drawn over the div, they're behind it. The divider simply has no background.
To change this, simply add a background to .bulletin_profile:
div.bulletin_profile {
background:rgb(240,240,240);
}
I've looked around for a while now and can't find a solution that solves this particular problem. I have an image (<img...>)on a webpage and when the image loads it has a 1px solid white (or very light grey) outline/border on the outside edge of the image. It's not around the image but on the outermost pixels.
The associated CSS is as follows:
cursor: pointer;
display: inline-block;
float: left
I've tried using
border: none
border: 0
outline: none
outline: 0
-webkit-border-before: 0px solid #fff
-webkit-border-after: 0px solid #fff
and am stumped, the only way I've gotten part of the white line to disappear is by increasing the border radius to cut off the corners of the image. I've verified and re-verified that this outline is not on the image.
The original image:
The div containing this image (and other similar images without the same problem) has css as follows (if this helps):
text-align: center;
height: 60px;
display: inline-block;
position: absolute;
width: 270px;
bottom: 0px;
left: 0px;
padding: 0px 20px;
Finally found the solution!
I originally had it as an img containing a class that referenced the image in our sprite sheet. By changing the img tags to a div and keeping the original reference, the borders were removed and the sprite correctly displays.
You could try this:
border-width: 0px;
The following code is setup in the template to show each time a new sidebar widget is inserted. (It shows around each new widget)
<div class="sidebox-top"></div>
<div class="sidebox">
<div class="widgets">
<div class="textwidget">
[WIDGET CONTENT]
</div>
</div>
</div>
The above displays the following CSS:
.sidebox-top {
background-image: url("/images/top-border-side.gif");
background-position: center top;
background-repeat: no-repeat;
height: 4px;
}
.sidebox {
border-bottom: 1px solid #D9D9D9;
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
margin-bottom: 14px;
padding: 10px 18px 5px;
}
The result is this:
This works great for most all widgets used. However, I want the above images to show in the sidebar without the sidebox-top blue line or border. I know there is a way to use certain CSS symbols to identify before or after by using the > symbol, I'm just not sure how to use that here or if it will even work.
Any help is always appreciated. Thank you!
Replicating the issue
Okay, I've attempted to replicate your image in this JSFiddle demo. In case JSFiddle is down, here is what this looks like:
For this instead of using a background-image and 4px height on .sidebox-top, I've simply used a 4px border-top. Whilst not an identical replication, this achieves the same basic effect.
Hiding the .sidebox-top element
Step 1
To begin with, we need to target the very first child contained within the .textwidget divider, only if it's an img. We do not want to apply this styling to any other img elements after that, nor do we want to apply the styling if the img isn't the first element within the container. To do this, we can use:
.textwidget img:first-child { ... }
Step 2
The next step is to give our image top padding and negative top margin equal to the sum of the top padding of .sidebox and the height of .sidebox-top. We then want to give our image a background which is the same colour as the background of your widget:*
.textwidget img:first-child {
background: #fff;
padding-top:14px;
margin-top: -14px;
}
* Note: This assumes that your widget's background is the same as your widget's container's background and that the background is a solid colour. If it isn't, you'll need to play around with background-position to align your patterned background with the widget's background.
From this, we end up with our image overlapping the top border whilst remaining in the same position that it started in:
Step 3
The third step is to cover the entire .sidebox-top. To do this we're going to need to give our selected img left and right padding and negative left and right margin equal to the sum of the left and right padding of the .sidebox and its border-width:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 18px;
padding-right: 18px;
margin-left: -19px;
margin-right: -19px;
}
Step 4
Step 3 has certainly covered the entire .sidebox-top, but it's also covered the borders of .sidebox. For this we need to add identical borders to our selected img and reduce the left and right padding on our img to allow for this:
.textwidget img:first-child {
... /* Styling from Step 2 */
padding-left: 17px;
padding-right: 17px;
... /* Margins from Step 3 */
border-left: 1px solid #D9D9D9;
border-right: 1px solid #D9D9D9;
}
Final Step
The final step is to add a top border to our img to complete the border of the widget. As with Step 4, for this we'll need to reduce the size of the top padding to allow for this border:
.textwidget img:first-child {
... /* Styling from previous steps */
padding-top: 13px;
border-top: 1px solid #D9D9D9;
}
Final JSFiddle demo.
I'm maintaining the Perl Beginners' Site and used a modified template from Open Source Web Designs. Now, the problem is that I still have an undesired artifact: a gray line on the left side of the main frame, to the left of the navigation menu. Here's an image highlighting the undesired effect.
How can I fix the CSS to remedy this problem?
It's the background-image on the body showing through. Quick fix (edit style.css or add elsewhere):
#page-container
{
background-color: white;
}
That is an image. (see it here: http://perl-begin.org/images/background.gif) It's set in the BODY class of your stylesheet.
The grey line is supposed to be there. The reason why it looks odd is because the very top is hidden by the buffer element. Remove the background-color rule from this ruleset:
.buffer {
float: left; width: 160px; height: 20px; margin: 0px; padding: 0px; background-color: rgb(255,255,255);
}
I think it's this:
#page-container {
border-left: solid 1px rgb(150,150,150); border-right: solid 1px rgb(150,150,150);
}
However, I'm not seeing why the right border isn't showing up....
I found the problem.
The problem is that you need to set a white background on #page-container. As things stand, it has a transparent background, so the 5pt left margin on navbar-sidebanner is revealing the bg of the page_container ... so change that bg and you're cool.
I would do a quick fix on this to add the style:
border-left:2px solid #BDBDBD;
to the .buffer class
.buffer {style.css (line 328)
background-color:#FFFFFF;
border-left:2px solid #BDBDBD; /* Grey border */
float:left;
height:20px;
margin:0px;
padding:0px;
width:160px;
}
Thanks to all the people who answered. The problem was indeed the transparency of the #page-container and the background image of the body. I fixed them both in the stylesheet.