I am working on a webpage in ASP.Net/C# that uses absolute positioning for a textbox, for several in fact. It was working just fine, until I added some more text boxes. That is, the existing text boxes still positioned correctly, but the new ones did not, despite the fact that I created new styles in the CSS for them just like the others. An exampe is below:
.pieceBox {
position: absolute;
top: 425px;
left: 133px;
background-color: White;
color: Black;
width: 132px;
font-weight: bold;
text-align: center;
}
Identical styles in the same CSS file (with different names of course) both above and below this one work fine. I have checked, double-checked, and triple-checked the name of the style in the CssClass attribute of the and it is correct. However, no matter what I do, including giving it a new name, copying the old entries, and renaming them, etc., these three new text boxes position themselves at the top of the page, whereas the others show in their correct absolute positions. I looked at the aspx source page and made sure they are not in some other DIV, etc. I am at my wits end with it. I did come up with a workaround for now, but it is not how I want to leave it (involves programmatically creating some HTML inside an Asp:Literal.)
I checked the resulting source (via IE's viewsource) and the class is set correctly in the resulting HTML.
One more thing in case this matters; this website project was originally created in VS 2005 and converted to VS 2008 format. Not that it should matter, but thought I would mention it.
Has anyone else experienced this type of behavior?
If you have absolutely positioned elements that have a parent that is either absolutely or relatively positioned, they will position themselves relative to their container instead of the whole page.
In other words, your elements might be positioning themselves from different origin points.
It is difficult to explain problems like this if no actual code is provided, but my first guess would be that you're having problem with new controls that are not using the same parent containers as the old ones.
Have you checked the css rules that apply for parent containers of properly working text boxes? They usually should be set to "position: relative;" if you want to have your child controls aligned according to them.
Also make sure that the layout problem isn't occurring due to overlapping of the controls i.e. two text boxes might have similar or near positions and then one comes over another.
In any case, if you want proper and straight solution to your problem, i would suggest that you post part of your code.
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 years ago.
Improve this question
Edit to reopen:
It seems to be difficult to position elements over a google map. Using z-index does not solve the problem which is described below: Google Maps will stay on top of some other elements even when using high z-indexes.
The question is:
Is it possible to have a div cover parts of a google map?
I have the following popup:
But when i move this popup up to appear over the map, it gets hidden:
How to force something to be the top most, always displayed object on screen?
I have tried setting the z-index on my CSS property sheet, but this did not work.
Is there some HTML/CSS property i can set so that the popup, which is a DIV, actually always sets on top of everything else?
z-index is not that simple friend. It doesn't actually matter if you put z-index:999999999999..... But it matters WHEN you gave it that z-index. Different dom-elements take precedence over each other as well.
I did one solution where I used jQuery to modify the elements css, and gave it the z-index only when I needed the element to be on top. That way we can be sure that the z-index of this item has been given last and the index will be noted. This one requires some action to be handled though, but in your case it seems to be possible.
Not sure if this works, but you could try giving the !important parameter too:
#desired_element { z-index: 99 !important; }
Edit: Adding a quote from the link for quick clarification:
First of all, z-index only works on positioned elements. If you try to set a z-index on an element with no position specified, it will do nothing. Secondly, z-index values can create stacking contexts, and now suddenly what seemed simple just got a lot more complicated.
Adding the z-index for the element via jQuery, gives the element different stacking context, and thus it tends to work. I do not recommend this, but try to keep the html and css in a such order that all elements are predictable.
The provided link is a must read. Stacking order etc. of html elements was something I was not aware as a newbie coder and that article cleared it for me pretty good.
Reference philipwalton.com
Try setting position to absolute, ie.
#yourDiv{
position: absolute;
z-index: 10;
};
Are you using position: relative?
Try to set position: relative and then z-index because you want this div has a z-index in relation with other div.
By the way, your browser is important to check if it working or not. Neither IE or Firefox is a good one.
you should use position:fixed to make z-index values to apply to your div
Set the DIV's z-index to one larger than the other DIVs. You'll also need to make sure the DIV has a position other than static set on it, too.
CSS:
#someDiv {
z-index:9;
}
Read more here: http://coding.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/
One form to do this is insert the panel that you want to expand inside a DIV setted as relative: let me show you:
<div style="position:relative">
<div style="position:absolute; z-index: 1000;">
your code
</div>
</div>
You use the first div to position the inner content in a specific area inside your page and the second absolute should be referred to the container (because is relative) The z-index in this case is referred also to container and if it higher that the container should be at top. You can put the style in a CSS class and change the size of the absolute div to expand it on hover or another action that you want to control.
I hope that this help
dropdowns always show up on top, only solution for this problem is to hide dropdowns when image is displayed (display:block or visibility:visibile) and show them when image hidden (display:none or visibility:hidden)
What is the logic of the selection highlighting overflowing beyond the parent element?
In the attached screenshot, the top one is what I have currently, and the bottom one is a Photoshopped mockup of what I want to achieve.
To me it seems that the selection highlighting is almost largely random; I have not been able to find any definitive resources that explain what makes selection highlighting behave in which ways.
What should I keep in mind in terms of CSS and DOM when wanting to keep the selection highlighting reasonable?
Interestingly, I've wondered why SO doesn't have something like this so it's easier to copy code off an question/answer.
Actually, SO does have contained highlighting in the <code> blocks relying on overflow: auto;. <blockquotes> do not have contained highlighting.
Anyway, it appears there are a few ways to solve this problem (though, I'm sure there might be more). Use one of the following CSS rules to limit the highlighting of text to a specific element.
overflow: hidden; or overflow:auto;
position: relative;
float:left; or float:right;
The working example below shows all four methods at work. Some are easier to work with depending on your needs.
Working Example: http://jsfiddle.net/TFvYu/4/
Sources
CSS text selection color overflows outside box
HTML/CSS How to prevent highlighting text from spanning entire width of page in google chrome
I've got a simple CSS issue on my hands here —or so I thought…— where I basically just want to create a nicely left aligned list (ul) using ::before pseudo elements with generated content: "» " as list markers.
Now matter what I try though I simply cannot reproduce the results from this A List Apart: Taming Lists article. In the linked to example the list is exactly how I'd like to style mine.
I have reproduced the example in a JS Fiddle here which shows the issue of the misaligned text: http://jsfiddle.net/jannis/f8TxN/
Here is also a quick image to illustrate this point better. Example from ALA on the left, my version on the right:
However as you will be able to see in the Fiddle, the first line within the li simply will not align left with the rest of the text within this li.
I would really appreciate someone taking a look and telling me what I'm doing wrong here.
Many thanks for reading,
Jannis
It's the text-indent: -1em; on the <ul> that is causing the issue. Setting it to a fixed value of -13px fixes the fiddle.
However, depending on the width of the generated content, which is particularly affected by the font-size used, you may need a different value if you want to continue using an em value. px is not related to the current font.
The text-indent was only added so that the text would appear to be aligned because the author knew that there would be generated content that would push the first line forwards. I assume the value chosen fitted the original article on whatever browser and font was being used.
Copying the following CSS (from the ALA article) into the fiddle font-family: Verdana, sans-serif;font-size: 11px; corrected the alignment in my browser.
To my eyes, even the ALA version is a (few?) pixels out and nowhere near perfect, although they have the opposite issue to you, where the text on the first line is further in than the rest.
I got your example to work by changing the following from -1em to -0.85em:
text-indent: -0.85em;
Even with a different font-size, this still worked.
It looks like the width of the character(s) used are also taken into account, so the reason for the difference between your example and ALA could even be down to the font used.
I am seeking some advice regarding unnecessary scrollbars appearing on certain form items. A screenshot of the issue appears below. Note it is the right-most scrollbar that is unnecessary.
bad_scrollbars http://img21.imageshack.us/img21/9307/scrollfu.png
The culprit appears to be the following css, adding overflow: auto; to form items within windows in gecko-based browsers (the problem appears on Firefox):
.ext-gecko .x-window-body .x-form-item {
outline: medium none;
overflow: auto;
}
Removing this style solves the problem, but I am wary of possible side effects - though I haven't noticed any as yet, this style was obviously included for a reason.
Does anyone who knows more about Ext styling know if overriding this css to remove the overflow: auto; style will cause other problems?
As an aside, this is only an issue (so far) with a certain component - a custom extension of the Ext.ux.form.MultiSelect component - even though other components use more vertical space. Does anyone know of a possible reason for this?
Thanks for any help.
overflow: auto tells the browser to add a scrollbar to the element if the content of the element is larger than the elements client area minus any padding. Getting rid of the scrollbars in CSS does exactly that. It makes the scrollbars go away, no matter what.
The side effect of your work around is if there is content outside of the client, the use will not be able to see it. Additionally, this will not only happen with this form but every form in your application unless you apply your workaround in a custom class.
The right fix is to figure out why your content area is larger than the form's client area. Firebug can be a big help with this as you can inspect the DOM and see the size of the container as well as the size of all the child items.
I suspect that your clear selections control (is this a custom control?) is not properly sizing itself (i.e in your form layout you're telling it to be x pixels high but it's actually sizing itself x+1 (remember margins and padding). The form layout is doing all the work to decide how big to make the wrapper area (the area with the scroll bar) and the control must fit within that area.
I'm new to this site and thought I might give it a shot. I've been having a problem for quite some time now but as my project evolved other problems was solved, but this has remained. And finding the right thing wasn't easy. Im not even sure what the term is for this kind of thing.
Anyway, I want a background image to the right and left of my main page. It need to be z-indexed below the actual page(incase people with low resolutions view the page) so that it doesn't extend over the main page and makes the content unreadable. It needs to go below the actual page if low resolutions are used.
I've been using the following code to do the work for me right now:
<img style="position: absolute; top: 120px; left: 10px; width: 121px; height: 443px; z-index: -1;" src="../admin/images/background_text.png">
Problem is that this isn't working to good with older versions of IE for example and in some cases not at all in others. As you can see it has a set position on my page(left side its higher up on the page) which is also something I want to achieve.
I hope I explained this good enough and cheers to this site. Seems like a great place to find solutions.
Cheers, Martin.
Try this:
<body style="background: url('../admin/images/background_text.png') 120px 10px;" > rest of the page...
this sets the background for the whole page (what it seems kind of like you're doing?) to the given image.
I would also size your image to the desired size if it isn't already, then you don't need to supply width and height (or worry about IE rendering the resize).
if you're really just putting it on the side, I might use a table or div setup and set the background on that (not knowing how your page is setup).
Im not sure if i understand your question or not.
Anyway. Dont set your z-index on the image. I would set position relative on the layers that needed to be at the top.
Remember that IE6 dont get the z-index. It figures out which comes first and then its the last one that is on top, even though it haves a lower z-index.
Here's an improved answer for you:
Give your "wrapper" div the background image as described before. Then extend your main table all the way to the right (or wrap it in another table or div with 100% width) and give that the right side background image. Then the images are still behind all the content and they both should behave as you want them to.
if you need more info on the background css attribute, check out the WDG page