Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
I have a thin white line between a black image and a div with a black background on a page with the body background set to white. I have tried setting border: 0 !importantamongst other things but I just can't get rid of it.
Is there anyway of removing this?
Naturally, try border: none; on both the div and the img. Also double check that it's not actually part of the image. It may also be a margin on the div. Finally, try stringing the div and img immediately next to each other with no whitespace.
<img><div>
instead of
<img>
<div>
Try to set the image to "display:block;" with CSS. If the Line is not in your image or in your DIV, it should fix the problem.
Try it:-
img{
vertical-align:middle;
}
Related
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 6 days ago.
Improve this question
I need help to remove space above the navbar
My HTML code:
https://pastecode.io/s/uia7zv3t
My CSS code:
https://pastecode.io/s/ba5qtpmp
Your .container class has 30px margin top and bottom, I believe that's what you meant.
Anyway, your body also has a margin you should reset, and you should use tag in body to load CSS, but it should be moved to instead.
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 5 years ago.
Improve this question
I have the following line of code, and having added the additional bit (font-colour="green") it doesn't in fact turn the h4 title green.
Can anyone suggest a fix for this?
I also tried added a highlight to the h4 tag, and it removed the left-align feature.
I think the issue may be that I do not understand how it is organised/structured and where I need to make my additions to the code. An explanation of this in any answer would be appreciated.
Code to turn H4 title green (not working)
<h4 style="text-align:left;width:50%;margin-top:30px;font color="green">Tracking</h4>
code to add highlight to H4 tag
<mark><h4 style="text-align:left;width:50%;margin-top:30px;">Tracking</h4></mark>
with the following in the css
<style>
mark {
background-color: black;
color: white;
}
</style>
Along the same lines of formatting for this h4 title text. I tried to add a black line underneath it using and it didn't show up - so whether it was white or transparent I don't know, as it did make a space, but showed no colour.
I then tried this:
<font color="black"><hr></font>
but of course, that didn't work either.
Could the whole problem - with all the examples I've described be something to do with my css? And if so, how do I manually for each individual tag override it to perform the functionality I've described?
You have a typo in your style. Instead of style="text-align:left;width:50%;margin-top:30px;font color="green" it should be style="text-align: left; width: 50%; margin-top: 30px; color: green"
Note the difference between the last parts of both styles.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
The website I'm working on has a div on the right showing code examples in the hero section of the homepage. We use a similar div on one of our landing pages (https://buttercms.com/l/ruby-blog-software/) but the bottom of the div doesnt have rounded borders.
I can't figure out why the landing page div doesnt have rounded borders but the homepage div does.
It only did it at certain breakpoints and only on one of my monitors.
The <pre> only showed up on the same breakpoints the border was wrong
The solution that worked for me was
body.landing_page .code-examples .code-container .code pre {
margin: 0;
border: none;
border-radius: 5px;
text-align: left;
min-height: 320px;
}
The original border radius was 0px
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
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.
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.
Improve this question
I have an element that has a fixed position to the bottom left corner of the browser window. I noticed that the text in footer layers above the fixed position element.
I traced this back to the Bootstrap style for columns that sets them to a relative position. If I remove or override that style, the layering appears as I desire. I don't, however, know why that style is there. I am concerned over unintended side-effects.
Why does Bootstrap use position: relative in their column class?
I'm also open to other ways of accomplishing my desired layering without changing core Bootstrap styles.
EDIT
When creating a minimal example, I found that the issue was not present. I then looked to my own CSS for the problem. I found that it was z-index: 0 on the element containing the fixed position element that was the culprit. Changing it to z-index: 1 fixed the problem.
Add a class to the element that you want to change then overwrite the Bootstrap styles with the new class.
It is difficult to guess without a code example, but something like:
<footer><p class="override-bootstrap">Some text</p></footer>
CSS
.override-bootstrap {
// here reset the styles
}
Make sure that the stylesheet for your new class is included after the bootstrap css.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 8 years ago.
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.
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.
Improve this question
I am working on a webpage with an embedded javascript web app and the styling on that has messed up the padding on my web page. I would like to add padding around all the contents of the page so they are not completely pressed against the edge but nothing I seem to be doing is working. First i tried encompassing all the contents in the body with a div and adding CSS padding to that div but nothing. Then I tried adding padding to the body in the CSS file but nothing. Finally I tried *{ padding: 10, 10, 10, 10 px; } but still nothing. Any idea on how to add padding around all the contents of a webpage?
Simple-
*{
padding:5% /* or whatever */
}
Note- this is far from ideal. Better to use a full reset and amend accordingly. Eric Meyer's is fairly easy to decipher
Your syntax is wrong too, its *{padding: 10px 10px 10px 10px;}, no commas
AMEND FOR APPARENT OP USE -
body{
padding: 10px;
}
10 is an invalid value for padding. You're probably looking for px or %. Also, adding padding to * will add padding to every single element on the page, not just around the "edge" of the page.
body{
padding: 10px;
}