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
If I'm honest I feel a bit stupid asking this question on here as the answer will most likely be very simple, but I'm currently at my wits end trying to find the solution.
I have two web pages which use identical code and the same style.css file but use different tags, allowing me to alter the colour of the menus, header on the page etc.
The following one is working correctly
http://www.dtlsports.co.uk/poolIndex.php
However on this one, the menu has lost its colour and shifted down incorrectly.
http://www.dtlsports.co.uk/squashIndex.php
Can anyone spot the difference between the two that will make one work and the other not? I assume you'll be able to inspect all the necessary stuff on the pages themselves, but if not just let me know and I'll put it all on here.
Thanks in advance!!
Looks like the second one is missing a display:block;
http://puu.sh/5arNI.jpg
you needed to add display:block
navQ {
background: -moz-linear-gradient(center top , #FFCC00, #FFCC00) repeat scroll 0 0 #FF0000;
border: 1px solid #FFCC00;
border-radius: 0.5em 0.5em 0.5em 0.5em;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
color: #FFCC00;
display: block;
height: 44px;
margin: -37px auto 0;
min-width: 800px;
}
you are missing the following CSS style
article, aside, figure, footer, header, hgroup, nav, navP, section {
display: block;
}
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 3 years ago.
Improve this question
i have a listing html page, in which the first div background color will be white and the second grey color. i have used the following css
.aamir {
background: #fff;
width: 1000px;
margin: 0 auto;
text-align: left;
padding: 20px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
height: 45px;
margin-bottom: 3px;
border-radius: 1px;
}
div:nth-child(even) {
background: #fafafa
}
the problem is when i am using the class name like
.aamir:nth-child(even)
its not working. when i am using
div:nth-child(even)
its working fine. can anyone please tell me why i cannot give it my class. thanks in advance.
Firstly, i think your CSS selector is incorrect. You would need to do the following (note, the starting period):
.aamir:nth-child(even) {
background: #fafafa
}
Second, i think you might be suffering because of the specificity. You can try the below CSS to get around it. This will make it more specific than the original selector by using the element type as well as the class. If your element type is not a div, change the CSS to match the element type.
div.aamir:nth-child(even) {
background: #fafafa
}
You can find out more about specificity at: https://www.w3schools.com/css/css_specificity.asp
Make sure not to forget to add a dot before aamir.
.aamir:nth-child(even) {
background: #fafafa;
}
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 3 years ago.
Improve this question
is there a way to decrease the footer height? I have been playing with the style.css, but did not make it. I would need the footer height as small as possible. Can anyone help?
My client is asking he want full width slider in home page without scroll bar and he is asking footer is also visible in home page like sticky footer without scroll. I tried but its not working. please save me out from this.
website is in wordpress
This is my website url: http://f9interiors.com/
Thanks for your suggestions.
Update following css. you change padding as per your requirement.
.copyright-wrapper {
background-color: rgba(13, 9, 0, 0.4);
position: relative;
padding: 5px 0;
}
.copyright-wrapper .container{
display: inline-block;
}
.copyright-wrapper {
background-color: rgba(13, 9, 0, 0.4);
position: relative;
padding: 0px 0px 20px 0px;
line-height: 15px
}
.copyright-wrapper .container{
display: inline-block;
}
apply that css
section#home_slider {
height: calc(100vh - 65px);
overflow: hidden;
}
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 7 years ago.
Improve this question
I finished coding this website using bootstrap and now I have this issue regarding that horizontal scroll which was not supposed to happen. This is my first website using boostrap.
I tried using 'divide et impera' by removing snippets of code in order to find the issue. The horizontal scroll disappeared when I removed pretty much the entire content / website so I suppose it is related to the main container ?
I can't seem to figure out the problem, been banging by head against the wall for the past few hours.
Not to take anything away from #Tulio Castro, as putting overflow-x: hidden; on the body should fix this. This is a hacky fix, however, in that it doesn't fix the problem itself, rather, it fixes a currently visible consequence of the problem. I figured you might want to know the actual problem--why this is happening and what you can do better.
First let me say that bootstrap is a delicate system: Every time you apply your own styles, you'll need to be checking to make sure your styles don't clash with bootstrap's.
So here are the fixes:
You can run this jQuery when the horizontal scrollbar is visible, and it will tell you which elements are causing the overflow:
$('*').filter(function() { return $(this).width() > $('body').width(); });
In your case, it will return three culprits, all of them .row elements:
1) The first .row needs to be nested in a .col-xs-12 element. You can't have a .row as an immediate child of a .row element in bootstrap.
2) The second .row has a parent with class .partneri. You applied custom CSS to this parent element, which broke bootstrap. In this case, bootstrap wanted 10px of padding on the right and left, but your CSS took this away:
.parteneri
{
....
padding: 10px 0 10px 0;
}
Change this to
.parteneri
{
....
padding: 10px;
}
And you should be fine.
3) The third .row has the same thing. The parent with class .sub-footer breaks bootstrap's padding. Change
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 0 4px 0;
}
to
.sub-footer
{
border-top: 2px solid #f8f8f8;
padding: 10px 10px 4px 10px;
}
And you're set. Best of luck.
I saw this horizontal scroll in apple iphone 4, just solve this, just define thiss css:
html,body{
overflow-x:hidden;
}
Hope it helps
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 9 years ago.
Improve this question
Help! I've read every question here and every tutorial online… but I can't seem to make the left and right column bottom border appear on my layout that I'm trying to put together.
Here is a link where I am currently working on it.
Can anyone tell me what I am doing wrong?
My current css is:
.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
margin-right: 20px;
background: white url(http://i1109.photobucket.com/albums/h423/thesinglemomoirs/templates/pinkcupcake/38d73024.png) repeat scroll top left;
border: 2px solid black;
}
.fauxcolumn-outer .fauxborder-left, .fauxcolumn-outer .fauxborder-right, .fauxcolumn-inner {
height: 100%;
}
The solution to your problem is to set the box-sizing like so:
.fauxcolumn-inner {
box-sizing: border-box;
}
Your problem is that without box-sizing to border-box when you set your height to 100%:
.fauxcolumn-outer .fauxborder-left,
.fauxcolumn-outer .fauxborder-right,
.fauxcolumn-inner {
height: 100%
}
and THEN add margins, padding or borders, your true height ends up being greater than 100%
You could replace border with an inner box shadow with no blur:
box-shadow: inset 0 0 0 2px #000000;
.yourclass {
border-bottom:thick solid black;
}
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
I put up a test site for a client to look at for a proof of concept, and when cross checking browsers I noticed a white line that was not supposed to be there.
http://artistelisabeth.com/ (loads correctly in all other browsers except FF)
There is a ~10px line right above the footer when viewing in FF. Initially it looks like a simple fix, but its actually the bg of the body showing through.
I tried adding some simple solutions first padding-bottom on the parent element or some margins on child elements. Nothing worked, only solution is a hack, adding a margin-top:-10px to the footer, or opposite style on the featured div.
Also. The only style in my css associated with the .featured div, is background: #ded1ae, this shows up correctly in all other browsers, but in FF it gets changed to background: none repeat scroll 0% 0% rgb(222, 209, 174);
I also noticed all my other bg colors were changed as well, and all hex colors changed to RGB.
This may be a simple solution, which I hope it is, and I am just having a brain lapse. But I am totally perplexed, and have never run across an issue like this.
Please help!
(I guess it should be noted that I am using the Skeleton boilerplate, but I have used this many times before with no issue, and I cant see how that would affect this.)
<div class="featured">
<div class="container">
</div>
</div>
.featured { background: #ded1ae; height: 100px; }
.container { position: relative; width: 1200px; margin: 0 auto; padding: 0; }
Above is the css in all browsers except FF, in FF it shows up as
.featured { background: none repeat scroll 0 0 #DED1AE; height: 100px; }
Your <hr class="remove-bottom"> in the <footer> causes the whitespace by having a margin-top: 10px and clear: both.
Setting .remove-bottom { margin: 0; } "fixes" it.
Not sure if it is a bug/spec violation in Firefox or the other browsers.