In our project we used the following method to link users to some anchorred area on the page:
<span style="position: relative; top: -100px; z-index: -1; visibility: hidden;"
id="anchor"> </span>
This was used to leave a little space before the exact anchorred element like a form.
But since some late version of Safari this has broken and browser is positioning at the initial position of the element with no regard to the relative position.
Maby you have met this feature/bug too and have some work around to propose or can point out why my method is bad.
Yep! hanks to the incorrect but usable answer by Developer Art i got the solution!
If i apply id and relative position to the DIV anchoring to the #id starts working with telative scroll!
Why don’t you just add the ID attribute to the element in question, i.e. FORM? If you want to add vertical spacing before the form, you can use CSS:
<form id="anchor" style="margin-top: 100px;">
…
</form>
Issue eliminated, and much cleaner code :)
Related
I read this thread: Element not moving from top but I'm not sure it relates to what I'm doing. I have a test page that echoes out report data using PHP from a MYSQL database and the table's tag line of code is:
<table border='1'>
what I'd like to have is the table to position itself 27 pixels down from the top of the page so it is not in the background underneath the button I've got at the top. the button's code is:
<input type="button" onclick="emptyReport();" id="Button1" name="button" value="Clear Report"
style="position:absolute;left:1px;top:1px;width:96px;height:25px;font-family:Arial;font-size:13px;z-index:5">
what css property do I need to use to do this? I'm surprised I couldn't find anything on google considering this issue is overly simple. thanks.
It is hard to answer this question since you haven't provided the full HTML.
What I would suggest is to add the following Css to table:
table {
position: absolute;
top: 27px;
}
But this will be a shot in the dark without some more context.
Why would you position the table absolute anyway?
Making it relative with a padding-top: 27px would be more logic in my opinion.
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/
I am developing a wysiwyg page using javascript (no libraries) and because it has a fairly specialised application it has to be custom built rather than off-the-peg.
I have, surprisingly, got a long way and it is pretty much complete but I am having some difficulty getting the display right.
I have a div which contains text and images with the images floated right so the text flows around them.
In some places I need the images centred, so I have inserted a div to contain them.
The code bellow illustrates this and it works well.
The problem arises if I have more than one div containing the centred images because the ID of those centreing divs is the same.
If I change the centreing divs to a class the images don't centre but assume the right float of the parent div.
Is there any way to overcome this?
Is there any real issue having multiple divs with the same id?
I'm not worried about supporting any browsers other than FF.
Any advice would be very greatly appreciated, thanks for reading.
Dim Tim :o)
#details {
width: 698px;
background-color: #FFC;
}
#details img {
float: right;
}
.centreimage img {
float: none;
}
.centreimage {
float: none;
text-align: center;
}
<div id="details">
<p>Some text here</p>
<img src="10750bath.jpg" height="166" width="250">
<p>Which flows around the image on the right</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>blah</p>
<p>The next image should be centred</p>
<div><img src="10750bath.jpg" width="250" height="166" class="centreimage"></div>
<p>more text</p>
<p>more text</p>
</div>
Thank you all for your help.
Even when I changed the CSS and HTML to be a class the images still failed to centre.
The answer was in the clue from Pekka and specificity was the cause.
The specificity rules give an ID a higher priority than a class.
The "details" div had an ID but the "centreimage" was a class.
I changed the CSS for "details" to a class (& the markup of course) and it now works.
Can't believe that I spent at least 10 hours trying to sort that out so thanks to everyone for their help.
(Now you know why I am "Dim Tim") :o)
Yes, it's invalid to have multiple divs with the same id.
Using a class should work fine:
div.details {
width: 698px;
background-color: #FFC;
}
If those rules really get overridden, you probably have another rule in place that has higher specificity. In that case, you would have to show us more of your HTML.
You shouldn't have more than one element with the same id. This is invalid and will give undefined results.
If you change your div id to a class, you need to change the CSS appropriately to target the class rather than the id. The purpose of CSS classes is exactly that - targetting multiple, related elements and applying the same styles.
As long as you are targetting the elements correctly, there will be no difference to the result.
As you should know every id should be unique. In your example output seems to be a small error. Try to set the class attribute to the div and not the image. If you don't have dome good reasons you should better everytime the class attribute.
Now is the text-align set for the children of your image e.g. that would be the alt value if the image could not be loaded.
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.