I have this fairly unusual problem (after what I've understood when asking others), it seems that my -tags don't understand how much of the screen that is used by other elements, and therefore push elements out of screen.
I thought it might had something to do with the use of position:fixed, but it didn't seem to solve it when removing the position-part at all.
This is the main markup that seems to have problems, in wich I really can't seem to see any errors.
<div id="search">
<div id="searchfield">
<span id="searchinput">
<input type="text" id="s" name="s" />
</span>
<button>Search</button>
</div>
<div id="searchresults">
<ul class="longlist">
</ul>
</div>
</div>
The problem is best seen in this jsFiddle where it seems #searchresults is pushed out of #search by #searchfield.
As I really don't know what's the problem, any attempt on using Google have left me with no good answer to where my problem really is.
I have tried removing any JS that modifies the at all, and as we can see the jsFiddle does not run any JS at all, and still my markup/CSS does not work.
The height of #search is set to 400px in this fiddle to show the flaw better. But the same error occurs when it's 100% (wich is the value it should have in production-code).
Does anyone have any idea why this is happening?
This is caused by an overflow problem. The div "#searchfield" is pushing down the other content.
Setting the height to "auto" by removing the line "height: 400px;" on "div#search" and set a fixed height on "div#searchresults" fixes the problem.
#search{
height: 400px;
}
Taking the "div#searchfield" outside of the "div#search" also works.
<div id="searchfield">...</div>
<div id="search">...</div>
These methods show that the overflow problem is caused by mixing relative and absolute heights. You should move some of your styles relating to height from "div#search" into "div#searchresults" to fix this.
It seems to work at
#search{
height: 100%;
}
no?
link:
http://jsfiddle.net/KX9BV/8/
Related
I'm using a countdowntimer on my website for shipping.
This my code I added in my header.tpl : http://jsfiddle.net/ALrnK/3/
<div id="leveransinfo">
<img src="http://mobilprylar.nu/img/frakt.png"/>
<img id="posten" src="http://mobilprylar.nu/img/s/17.jpg"/>
<div id="timeleft"></div></div>
<div id="levinfo">
<b>Leveransinformation</b></br>
</br>
ContentContentContentContentContentContentContentContent</br>
ContentContentContentContentContentContentContentContentContent</br>
</br>
ContentContentContentContentContentContentContentContentContentContentContent</br>
</br>
</div>
I'f you take look att (link was removed due to canceled project) and hover the countdowntimer it extends the header.
I would like the information to show there but on top of everything else. So its displays over the menu and the imageslider.
I tried to use z-index but it does not matter how I do. Is there anything else I should use instead?
Without seeing the actual styles, here's one possibility - Make sure the element that you are changing the z-index of is either position: relative;, absolute, or fixed.
Not sure why this is happening, but couldn't find anything on this. Every input type="checkbox" look like radio buttons on iPads. Has anyone come across this issue and if so, how were you able to fix the problem?
Thank you guys!
<div>
<input type="checkbox" name="checkNow">Check Now
</div>
For Safari version 6, default checkbox styling has border-radius set to valid value. Clearing the border-radius value fixed the issue
input[type="checkbox"]{
border-radius: 0px;
}
I had a similar issue, but mine was user-created.
I had a width: auto; on all my input[type="radio"]. Simply removing that, and not explicitly defining a width, fixed the issue.
I am trying to build a table which is scrollable in the x and y directions if the content is bigger than the container. I also want the header to always be visible at the top. I've got the first part working, and the header is always visible at the top, however the header column sizes do not match up with the table table sizes.
I've created this fiddle:
http://jsfiddle.net/xxQQS/1/
I am after a CSS only solution.
EDIT: There seem to be a quite a few people who seem to think that this cannot only be done with CSS. This may be true, however please don't just post to say 'no this can't be done'. If you can explain why this can't be done without CSS I'll accept your answer.
Create a clone of your table. For the first table, hide all rows except the headers using visibility: hidden. Hide the header of the other table using visibility: hidden. Place your tables inside divs with overflow properties set as follows:
<div style="overflow-x: hidden; width: 400px;">
<div style="overflow-y: hidden; height: 20px;">
<table id="head-only">
</table>
</div>
<div style="overflow-y: scroll; height: 100px;">
<table id="body-only">
</table>
</div>
</div>
May be for this you have to use JS. Check this http://www.tablefixedheader.com/
I too was searching for a solution for sticky headers to use it in my site. Finally found a Jquery plugin that seamlessly does this sticky header part.
https://github.com/jmosbech/StickyTableHeaders
You need not add any CSS, the plugin takes care of it. It clones the table header during scroll. Initialization is pretty simple
$('table').stickyTableHeaders();
Hope this helps :) As told in other answers, this cannot be achieved purely through CSS I guess.
I have a page that there is a list of "tags", just like here in SO, and when the mouse is over it, it gets darker.
It works great with Ie7, 8, FF, Chrome, Safari etc... but IE6 has a bug that when a:hover is triggered.
The bug is that the div that those (ul li a) are contained, gets a height's increase.
the css I have is:
div.options ul.tags li a:hover
{
background-color: #D5E4A5;
}
if I delete this style or just comment "background-color: #D5E4A5;" it doesn't happen...
any idea of how to fix it?
thanks!
EDIT: Here's a screenshot of the bug:
just fixed it! :D
what I had before was:
<div class="options clearfix">
<!--content here-->
</div>
and I replaced for:
<div class="options">
<div class="clearfix">
<!--content here-->
</div>
</div>
Now IE6 is happy, and I'm happy as well...
Thank you everybody for your help!
This is usually a border getting set that wasn't defined originally. Try setting a border on the growing DIV to the default background color. My guess is that you won't see anyting grow anymore.
I think I ran into this once, and what was happening was that the borders were being modified (or was it the margins?) I ended up copping out, and just giving the problematic elements a transparent border of 1px, and calling it a day.
I really doubt this will turn out to be your solution, but I'm hoping it'll give you some idea in which direction to look in!
I've had that happen to me as well, but I can't remember where that was exactly. I think I did solve it, but I'm not entirely sure how anymore. I can think of two things:
Give the element "layout". I tend to do that with zoom: 1.
Add vertical-align: top to either the a or li element.
Could you give a more complete code example? I can't reproduce it with just that CSS.
Did you specify the height for that div explicitly? If not, setting the height might make this go away.
Are the tags located in a place where you could give them background color all of the time? If so, does setting their background color when :hover is not activated still cause their height to change?
As a note, I can't reproduce this given HTML matching the rule you described, so the problem may be coming from somewhere else higher on the page.
<!-- This does not display the described behavior -->
<div class="options">
<ul class="tags">
<li>c++</li>
<li>not-programming-related</li>
<li>cheese</li>
<li>barnacle</li>
</ul>
</div>
The best thing I can suggest is to do what mercator said and give the element layout.
EDIT: Just a shot in the dark, but you may want to try setting a value for line-height on div.options.
EDIT 2: After seeing your screenshots I recall that I have had this problem at work before, and the fix in my case was to add position:relative; zoom:1; to the container (or maybe the links, I forget!). Try that?
EDIT 3: After googling for some solutions, you may want to try setting the height if your container explicitly. If this doesn't work, I have no idea what to do!
I have this exact problem as well. The trigger is definitely the background color on hover, but the usual solutions of giving the parent hasLayout don't work, I think because of nesting the A tags inside other tags. From what I ended up doing, your solution of nesting the clear fix is the right logic: separating the offending element, parent and clearing objects.
The solution I did was the following:
<div class="options">
<!--content here-->
<!--[if lte IE 6]><div class="ie6clear"></div><![endif]-->
</div>
With the following CSS:
.ie6clear{ clear:both; height:0; overflow:hidden; }
This way the clearfix CSS is only applied for IE6, highlights what the extraneous markup is, and makes it easy to remove when IE6 is no longer supported.
I keep finding that if I have nested divs inside each other, and one of the inner ones is floated, the outer one won't expand around it.
Example:
<div style='background-color:red; '>
asdfasdf
<div style='float:left; background-color:blue; width:400px; height:400px;'>
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
asdfasdfasdfasdfasdfasdfasdf<br />
</div>
asdfasdf
</div>
What do I need to do to the outer div to make it cover the inner one? IE: Put it's border/background color all the way around it?
Also, is there a general principle I am bumping up against here? If so, what should I look up to get a solid understanding of what it is?
Thanks!
Edit
Hi All,
Thanks for the answers, semantically correct and no, and for the links.
Though I will end up using overflow in the final work, I will leave Ant P's answer as accepted, as it was the first one that really worked, and got me out of a short term jam, even though it offends semantic sensibilities.
As a long-time html hack trying to move to decent css layouts, I can certainly understand, and sympathize with, using semantically incorrect hack that gets the job done, though I am sure he will change that habit after this =o)
You can do it strictly with CSS using overflow:hidden
<div style='background-color:red;overflow:hidden;'>
...
</div>
If you are the type that likes explanations (rather than just "do this") here are some excellent articles that explain several methods:
Simple Clearing of Floats
How to Clear Floats Without Structural Markup
Clearing Floats
it is simply staggering how many times this is the base problem for some of the CSS questions on SO. What is even more staggering is how many times someone gives an answer like Ant P's. While technically correct, it is completely semantically incorrect. Themis is absolutely right. Just add overflow:hidden to the parent of the floated divs. Sometimes to make it play nice with IE you may have to specify a width OR a height. That is really all there is to it.
If you just float the outer div, it will expand to contain the nested div. Combining floated and unfloated elements in the layout is usually troublesome.
I can't beat the answers that have been posted, but I do have a good tip for helping to diagnose layout problems without screwing up your markup.
Add this section to the bottom of your CSS file and keep it commented out when you don't need it:
div
{
border-width: thin !important;
border-color: Orange !important;
border-style: solid !important;
}
label, span, /* whatever else you might want to see */
{
border-width: thin !important;
border-color: Blue !important;
border-style: solid !important;
}
Often I'll find that a layout that actually works (particularly one that uses the "add a <br> with a clear: both style) will actually not be nesting <div>'s properly but someone has tweaked the CSS so that it works by voodoo. Actually looking at the borders of your elements helps a lot and doing this in CSS means you don't have to touch your real markup or your main CSS in order to turn the borders on for debugging.
This article about CSS systems is definitely worth a read. As Darko Z said it is staggering to see the semantically incorrect answer given by Ant P.