I am a big fan of adding CSS in a stylesheet for my applications to have the form contents centered in the browser so that no matter what the size of the browser window, the application or page contents will be centered horizontally.
The CSS Code I use to do this is as follows :
.panel
{
width: 300px; /* Can be whatever value you need it to be */
position: relative;
left: 50%;
margin-left: -150px; /* This is half of width */
}
However, when I do this for an application I'm working on in Visual Studio, it moves the contents half off the page in design view. It's like it's applying the left and margin-left CSS attributes, but ignoring the relative attribute. Do you know how to get Visual Studio to treat my CSS the same way a browser would so that I can apply my CSS positioning code and still work on the application. As of right now, I have to comment out CSS above until I am completely done working on the project so I can see the content in design view.
Thanks for any help you can provide.
This question might have been asked many times but still there are many factors which I think affect it to make the solution work
I have a site here
http://www.radioali.com/valy-mikham-toro-bebinam-video_51e244dc3.html
The header of the site is static. If you notice scrolling up the page, everything scrolls properly except the video. It never goes behind the header div.
It is a problem with flash player and there are workarounds for it by using wmode. I have tried it setting opaque and transparent but with no result.
Can someone please suggest me how to make the flash object behave properly and scroll behind the header div.
Just change the z-index to 0
So
#video-wrapper {
position: relative;
z-index: 4999;
}
will be
#video-wrapper {
position: relative;
z-index: 0;
}
I've ran into a nasty bug with Chrome and Safari on Mac. It appears that its related to font-smoothing and whether or not the page has an iframe with Flash inside of it.
When I remove the iframe the text looks like it is set to font-smoothing: subpixel-antialiased (browser default). But when the iframe is on the page (with Flash running inside of it) the text appears to be set to font-smoothing: antialiased.
Is there any work-around for this? Please see screenshots below.
I was having this problem too and fixed it like this:
.video1 { position: relative; height: 338px; width: 100%; }
.video1 > div { position: absolute; }
Then I placed the iFrame inside the second div. With the iFrame now in an absolutely positioned div, it no longer forces the text on the page to be antialiased upon page load in Safari.
I think I found an "ok" solution. I had a div that was slightly overlapping an iframe that had Flash inside of it. That overlapping div had it's font-smoothing screwed up. To fix it I just had to put z-index on both the iframe and the overlapping div. To make it work the iframe has to be on top of the div (higher z-index). In the example above it doesn't appear that anything is overlapping the iframe, but the boundary of each element could be overlapping slightly. You'd be able to see it by using the web inspector in Safari or Chrome. But I'd just start by putting z-index on the iframe and the elements that have messed up font-smoothing.
The like button works fine, the recommendation works fine, but there's an issue: the like button is positioned on the right side of the page (which is intended), but when the button is clicked, it opens a box that exceeds the boundaries of the browser, to the right.
Example (with me in the Santa's hat as a doubtful bonus):
I've tried controlling the position using css, with no success. How can i proceed?
TL;DR
I need that recommendation box on the left, not on the right as it is now.
Thank you!
Your problem is in the css. Try using firebug to inspect the elements, you can change properties live to see which ones are the ones giving you the headache.
(edited)
The sidebar container is position:absolute, and has right:0. There's your problem.
#sidebarSocialetContainer {
right: 0px;
margin-right: 10px;
width: auto;
margin-top: -39px;
position: absolute;
}
So, if you put left:0 instead of right:0 you'll see the bar in the opposite side.
As per the title, it seems only Chrome isn't playign along. Note that form fields cannot be clicked on which are on the left portion of the screen. This only occurs on some pages (such as the Contact page). It appears that the #left_outer div is overlaying the content. When I edit the css via Firebug or Chrome's dev toools, it works, when I edit the actual css and refresh, it does not.
Any ideas?
LINK:
Thanks!
Usually when you have set the z-index property, but things aren't working as you might expect, it is related to the position attribute.
In order for z-index to work properly, the element needs to be "positioned". This means that it must have the position attribute set to one of absolute, relative, or fixed.
Note that your element will also be positioned relative to the first ancestor that is positioned if you use position: absolute and top, left, right, bottom, etc.
Without a link to look at, it's a bit tough to see what the problem might be.
Do you have a z-index: -1; anywhere (a negative number is the key here, doesn't matter the number)?
I have found in the past this renders the container void from being interacted with.
Good luck!
Markt's answer (see first answer) is great and this is the "by definition" of the z-index property.
Chrome's specific issue are usually related to the overflow property from the top container bottom.
So, for the following:
<div class="first-container">...</div>
<div class="second-container">
<div ...>
<div class="fixed-div> some text</div>
<... /div>
</div>
And styles:
.first-container {
position:relative;
z-index: 100;
width: 100%;
height: 10%;
}
.second-container {
position:relative;
z-index: 1000;
width: 100%;
height: 90%;
overflow: auto;
}
.fixed-div {
position: fixed;
z-index: 10000;
height: 110%;
}
the following actually happens (Chrome only, firefox works as expected)
The 'fixed-div' is behind the 'first-container', even though both 'fixed-div' and its container's ('second-container') z-index value is greater than 'first-container'.
The reason for this is Chrome always enforce boundaries within a container that enforces overflow even though one of its successors might have a fixed position.
I guess you can find a twisted logic for that... I can't - since the only reason for using fixed position is to enable 'on-top-of-everything' behavior.
So bug it is...
I had a weird issue with zIndex on Chrome and I kept fiddling with the position attribute to see if anything worked. But, it didn't. Turns out, in my case, the issue was with the transform attribute. So, if you have a transform attribute in place, disable it and it should be fine. Other browsers work fine with stuff like that, but Chrome seems to play it differently.
Hope this helped you.
Google Chrome to 84.0.4147.135 (Official Build) (64-bit) 2020-02-22.
Since my last update, CSS element z-index is broken in Chrome.
Chrome added "z-index: 1;" to the BODY element.
It now wrongly displays all z-index: ?; values in the BODY child elements.
Setting the position, z-index of BODY does not solve the problem.
Changing z-index values of child elements that were already correct does not help.
I hope this issue will be fixed, it is only broken since I updated Chrome.
Chrome 84.0.4147.135 bug on www.eatme.pro/music - screen smaller than 500 px - push play - appearing bottom bar #lblBottomBarLink with z-index 5 is displayed under menu with z-index 2
(see image)
image eatme.pro/music in Chrome 84.0.4147.135 with z-index 5 under z-index 2
I know this is now resolved but posted solution didn't work for me. Here is what resolved my problem:
<act:AutoCompleteExtender ID="ace" runat="server" OnClientShown="clientShown">
</act:AutoCompleteExtender>
<script language="javascript" type="text/javascript">
function clientShown(ctl, args) {
ctl._completionListElement.style.zIndex = 99999;
}
</script>