I have 2 gaps in my unordered list that I cannot find the problem source or a proper solution to fix it.
An element.style {clear: left;} applied to the <li> tag immediately to the right of the space seems to clear the space to the left, but another randomly appears further down the page.
I am sure that the fix is simple, but all of the information that I can find seems to fit around multi-sized link images or a pattern of space. On the affected page all images should be the same size, 150x150, and the gaps seem to only affect 2 links out of 25+ listed. I nevertheless tinkered with their findings to see if it lead me to a solution, the closest I came was the above.
The affected page is here.
The page code and CSS are here.
I appreciate any advice that can be given, on how to properly resolve this issue. My solution seems to only mask the true nature of my problem.
Try adding this rule:
#list-1 >li:nth-child(3n+4) {
clear: left;
}
Try:
#list-1 #desc {
width: 150px;
min-height:44px;
}
Related
I know there are tons of questions regarding floats, but I seem to be a bit stuck on how to overcome this problem.
See my example here: http://jsfiddle.net/eE9WT/1/
What I am trying to do (or infact, trying to avoid) is the third .float div starting once the second .float div has started.
I would prefer the third div to fall directly underneath the first, making use of all space on the page. I'm aware that I could separate this into two columns, but I was wondering if there is a better solution without having to do that.
Believe it or not, within my 5 years of developing for the web this seems to be the first time I've been faced with this problem!
Thanks guys
This article would help in creating a Floating Box Layout: http://matthewjamestaylor.com/blog/floating-boxes-css-layout.htm
Also check out his other layouts, just in case they seem a better fit for your design!
You can add a rule for the second float to be right
.float + .float {
float: right;
}
I think this is the solution you are looking for:
JSFiddle
I moved all the div's to the left with float.
Made some space in the right side of the screen with padding-right on the container.
And then used the position: relative; to moved the second column to that space.
Display:inline-block;
zoom:-1;
More than float it do something for you. Only some rare case am using float. I know this is not meet your goal, I just explore my side.
I have an issue where the sub menu (dropdown) is behind the #main div. I have tried changing z-index values (ensuring div is positioned) but had no luck.
I have uploaded my progress to jsfiddle and wondered whether someone could see where I have gone wrong?
http://jsfiddle.net/indigoclothing/8aGZC/4/
Thanks
The demo is very complicated to work through and you have added the some CSS in the HTML as links and some as managed resources in jsFiddle which are loading twice, so it is very difficult to create a working fiddle. In future may I suggest that you just include the relevant parts that are not working. Constructing a Short, Self Contained, Correct (Compilable), Example often results in figuring out where the problem is yourself as well :-)
That said, removing the following from the CSS section in the fiddle and the managed resources seems to fix it for me.
#header {
z-index:2; // <-- remove this
}
The problem is that the menu and content have different stacking contexts - see Overlapping and z-index for an excellent description of this concept.
Did you try using position: inherit; on the "main" div rather than relative, and modify the position of the element accordingly?
I am unable to get the white space at the bottom of this page to disappear. I have both min-height and height tags in body. Any suggestions? Thanks!
http://womancareolympia.webs.com/
I find it quite remarkable that out of 6 answers, none of them have mentioned the real source of the problem.
Collapsing margins on the last p inside #fw-footer is where that extra space is originating from.
A sensible fix would be to add overflow: hidden to #fw-footer (or simply add margin: 0 on the last p).
You could also just move the script inside that last p outside of the p, and then remove the p entirely; there's no need to wrap a script in a p. The first p (#fw-foottext) has margin: 0 applied, so the problem won't happen with that one.
As an aside, you've broken the fix I gave you in this question:
CSS3 gradient background with unwanted white space at bottom
You need html { height: 100% } and body { min-height: 100% }.
At the moment, you have html { height: auto } being applied, which does not work:
(This happens with a window taller than the content on the page)
The problem is how 100% height is being calculated. Two ways to deal with this.
Add 20px to the body padding-bottom
body {
padding-bottom: 20px;
}
or add a transparent border to body
body {
border: 1px solid transparent;
}
Both worked for me in firebug
In defense of this answer
Below are some comments regarding the correctness of my answer to this question. These kinds of discussions are exactly why stackoverflow is so great. Many different people have different opinions on how best to solve the problem. I've learned some incredible coding style that I would not have thought of myself. And I've been told that readers have learned something from my style from time to time. Social coding has really encouraged me to be a better programmer.
Social coding can, at times, be disturbing. I hate it when I spend 30 minutes flushing out an answer with a jsfiddle and detailed explanation only to submit and find 10 other answers all saying the same thing in less detail. And the author accepts someone else's answer. How frustrating! I think that this has happend to my fellow contributors–in particular thirtydot.
Thirtydot's answer is completely legit. The p around the script is the culprit in this problem. Remove it and the space goes away. It also is a good answer to this question.
But why? Shouldn't the p tag's height, padding and margin be calculated into the height of the body?
And it is! If you remove the padding-bottom style that I've suggested and then set the body's background to black, you will see that the body's height includes this extra p space accurately (you see the strip at the bottom turn to black). But the gradient fails to include it when finding where to start. This is the real problem.
The two solutions that I've offered are ways to tell the browser to calculate the gradient properly. In fact, the padding-bottom could just be 1px. The value isn't important, but the setting is. It makes the browser take a look at where the body ends. Setting the border will have the same effect.
In my opinion, a padding setting of 20px looks the best for this page and that is why I answered it this way. It is addressing the problem of where the gradient starts.
Now, if I were building this page. I would have avoided wrapping the script in a p tag. But I must assume that author of the page either can't change it or has a good reason for putting it in there. I don't know what that script does. Will it write something that needs a p tag? Again, I would avoid this practice and it is fine to question its presence, but also I accept that there are cases where it must be there.
My hope in writing this "defense" is that the people who marked down this answer might consider that decision. My answer is thought out, purposeful, and relevant. The author thought so. However, in this social environment, I respect that you disagree and have a right to degrade my answer. I just hope that your choice is motivated by disagreement with my answer and not that author chose mine over yours.
I had white space at the bottom of all my websites; this is how I solved the matter:
the first and best thing you can do when you are debugging css issues like this is to add:
*{ border: 1px solid red; }
this css line puts a red box around all your css elements.
I had white space at the bottom of my page due to a faulty chrome extension which was adding the div dp_swf_engine to the bottom of my page:
<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"></div>
without the red box, I would have never noticed a 1px div. I then got rid of the faulty extension, and put display:none on #dp_swf_engine as a secondary measure. (who knows when it could come back to add random white space at the bottom of my page for all my pages and apps?!)
Try setting the height of the html element to 100% as well.
html {
min-height: 100%;
overflow-y: scroll;
}
body {
min-height: 100%;
}
Reference from this answer..
This will remove the margin and padding from your page elements, since there is a paragraph with a script inside that is causing an added margin. this way you should reset it and then you can style the other elements of your page, or you could give that paragraph an id and set margin to zero only for it.
<style>
* {
margin: 0;
padding: 0;
}
</style>
Try to put this as the first style.
The problem is the background image on the html element. You appear to have set it to "null" which is not valid. Try removing that CSS rule entirely, or at least setting background-image:none
EDIT: the CSS file says it is "generated" so I don't know exactly what you will be able to edit. The problem is this line:
html {
background-color: null !important;
background-position: null !important;
background-repeat: repeat !important;
background-image: url('http://images.freewebs.com/Images/null.gif') !important;
}
I'm guessing you've put null as a value and it has set the background to a GIF called 'null'.
There is a second paragraph in your footer that contains a script. It is this that is causing the issue.
It is happening Due to:
<p><script>var _nwls=[];if(window.jQuery&&window.jQuery.find){_nwls=jQuery.find(".fw_link_newWindow");}else{if(document.getElementsByClassName){_nwls=document.getElementsByClassName("fw_link_newWindow");}else{if(document.querySelectorAll){_nwls=document.querySelectorAll(".fw_link_newWindow");}else{document.write('<scr'+'ipt src="http://static.websimages.com/static/global/js/sizzle/sizzle.min.js"><\/scr'+'ipt>');if(window.Sizzle){_nwls=Sizzle(".fw_link_newWindow");}}}}var numlinks=_nwls.length;for(var i=0;i<numlinks;i++){_nwls[i].target="_blank";}</script></p>
Remove <p></p> around the script.
(class/ID):after {
content:none;
}
Always works for me
class or ID can be for a div or even body causing the white space.
I had the same problem when parsing html to string. Removing the last <p></p> (and replacing it with an alternative if desirable, like < /br>) solved it for me.
I faced this issue because my web page was zoomed out to 90% and as I was viewing my page in responsive mode through the browser developer tools, I did not notice it right away.
i have a Problem with my Wordpress Design, specialy with Dropdownmenu.
http://fincha.com/wordpress/
Check this, in the main menu "Versicherungen" you will see, i tryed allready all combinations with z-index... without results. :(
if some one have a nice idea for this menu, just tell :)
thx
I don't understand the reason for this myself (though I didn't research it; maybe a more experienced user can tell me), but z-index properties are only respected when the element is not positioned statically. Your problem is fixed by adding
#mainmenu {
position: relative;
}
so by including position: relative; for #mainmenu (your declaration starts on line 46 of style.css).
I have a page generated by a database. It creates a DIV for each entry (extremely simplified for sake a question). Each of these DIVs have a set width, and float left.
However, these DIVs don't have a set height, so occasionally the following as depicted in the image happens. Is there a good way to prevent this from happening, and the white space just 'collapsing?'
The link to the prototype site. Here
I think this article would help you:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
Depending on what you have control over, you could always add clear: left; to every other element in your 2-column scenario.
Though, I beleive that the second "The Postal Shoppe" would actually be on the left, and the Brynwood Pak N Ship would be in the right column.
The problem isn't so much that "Brynwood Pak N Ship" isn't collapsing the white-space, it's that the second "The Postal Shoppe" is getting hung up trying to move all the way to the left column by the bottom right corner of the "Express Pack & Mail Center."
Setting clear: left will ensure those entries always move down far enough to "suck up" to the left edge of their parent container. But you will still see some un-evenness using that attribute; the "Brynwood Pak N Ship" will line it's top up with the newly-cleared "Postal Shoppe" showing a tiny gap at the top. Still probably preferable to what's going on currently.
You can add a clear: left attribute to every other div. Alternately, you could try using display: inline-block instead of floating left, but it's not as widely supported (I think it breaks in IE 6 or older), so you'd have to see what hacks are out there to make it work universally.
I suggest giving every box an equal height. This is visually better, and it solves your problem in one go!
I think this is difficult to solve in CSS. I like the suggestions other users have made with 'display:inline-block' and setting the height to be fixed. They both have minor drawbacks, but the situation will be better than it currently is.
If you are going to solve this "properly", we first need to agree what the proper solution is. I think it would be to have two columns, and for each element that has to be added, it is appended to the end of the currently least-full column. This won't necessarily result in elements alternately being placed in column 1 then column 2. Sometimes two (or more) small elements will be placed in column 2 to compensate for a large element in column 1, for example.
I doubt something as complicated as this is possible to define in CSS (but I've been surprised by what can be done before). It could be done using Javascript though. You could have a solution that does a fairly good job if Javascript is disabled using a purely CSS solution, and if Javascript is enabled you could arrange them more elegantly.
I'm not sure it is worth the effort of implementing this though. Some of the existing suggestions seem reasonable compromises, and if it were me, I'd probably go with the inline-block solution, but I thought I'd throw this idea out anyway.
This can be solved now using flex-direction and column-count:
.parent {
column-count: 2;
column-gap: 1.25rem;
}
.child-class {
flex-direction: column;
display: inline-block;
width: 100%;
}
I'm not sure if it's supported in all browsers but it's an easy css solution.