I have a tooltip popup with a z-index at the highest level. When the user clicks the tooltip in IE7, it displays under content on the page, instead of above it. This issue is only occuring in IE7.
.tipBody {
background-color: #FFFFFF;
border: 1px solid #000;
margin-top: -18px;
padding: 10px;
z-index: 9999;
position: relative;
}
I suggest you to try adding !important after the property value, like this:
.tipBody {
background-color: #FFFFFF;
border: 1px solid #000;
margin-top: -18px;
padding: 10px;
z-index: 9999 !important;
position: relative;
}
See if that works.
In IE, positioned elements follow a different stacking order. You can usually fix it by giving the parent of your element a higher z-index.
I suggest you read the following link, it gives you a good explanation about the issue, and how you can solve it.
http://www.brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
Hope this helped.
Related
I wanted to try and create a bigger input and submit button box for a simple JS function for my course. However, when I changed the height and font size of my input my submit button no longer functions. I know it has to do with the height because when I remove it, it works. How can I work around this?
I will provide the URL for my website my CSS code that starts the input and the button is on line 273.
http://web.gccaz.edu/~pet2153867/test/
Thanks!
Add position: relative; and z-index:9999; to your button style.
button {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 10px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 20px;
height: 50px;
position: relative;
z-index: 99999;
}
this problem caused by H1 Tag. h1 tag crosspvered with your button. removing bottom:70px will also fix your problem.
#projects h1 {
position: relative;
bottom: 70px;
}
I have this code:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
<button type="button" class="button">Submit</button>
When I click into this button (button focus, active), the text will flicker (move to down a few point) on IE, Firefox browsers. How to fix it with CSS? Hope you help me. Thanks
Demo: http://jsfiddle.net/WorkWe/ht6pvoqz/1/
Wrap your text in span and give it position: absolute and it won't flick anymore!
<button type="button" class="button"><span>Submit</span></button>
.button {
height: 50px;
width: 160px;
background: #eee;
border-radius: 5px;
border: none;
margin: 0;
padding: 0;
position: relative;
}
span {
position: absolute;
top: 5px;
left: 5px;
}
Some sort of mini-reset does the job on FF, but using extra span inside the button resolves issue on IE. Looks like we need to start considering usage of "a" tags instead of buttons:
HTML:
<button name="button" class="button"><span>Submit</span></button>
CSS:
.button {
height: 50px;
width: 160px;
font-size: 16px;
background: #eee;
border-radius: 5px;
border: none;
}
button:active,
button:focus,
button:hover {
margin:0;
padding:0;
}
JSFiddle for that.
Hope this helps
UPDATE: There is a way of dealing with IE issue - based on this SO answer (#alicarn answer), but problem with this method is it creates opposite flickering on chrome. So I guess you need to pick up your poison in this case.
This is default behavior of IE. This can't be fixed I think.
Instead of using button tag, I suggest to use anchor tag.
Is it possible to create a border like the flowing image with css? Any hints will be appreciated
#sidebar h4, #sidebar-alt h4 {
background:url('images/widget-title-bg.png');
color: #333333;
font-size: 22px;
font-family: Arial, sans-serif;
font-weight: normal;
margin: 0 0 10px 0;
padding: 7px 0px 11px 0px;
}
EDIT: Made some changes according to your comments. Try:
<h1 id="progress">
<i></i>Recent Posts
</h1>
#progress {
display: block;
max-width: 200px;
min-width: 150px;
position: relative;
margin: 50px auto 0;
padding: 0 3px;
border-bottom: 10px solid #ECECEC;
font: bold 26px 'Dancing Script', cursive;
}
#progress i {
display: block;
position: absolute;
width: .8em;
height: 10px;
left: 0;
bottom: -10px;
background-color: #4287F4;
}
http://jsfiddle.net/userdude/z45QJ/4/
I'm not a big fan of the position manipulation, but all browsers should support and display this nearly identically, the only possible problem being the font's displa may be slightly differently in different browsers. However, IE7-9 should interpret everything else just fine.
Too bad the whole wuuurld isn't on WebKit:
<div id="progress"></div>
#progress {
width: 300px;
height: 10px;
border: none;
background-color: #ECECEC;
border-left: solid #4287F4;
box-shadow:inset 2px 0 white;
-webkit-animation: slide 10s linear infinite;
}
#-webkit-keyframes slide {
from {
border-left-width: 0;
width: 300px;
} to {
border-left-width: 300px;
width: 0;
}
}
http://jsfiddle.net/userdude/z45QJ/1
It could be adjusted to go both ways. However, it only works on WebKit browsers (Chrome, Safari [?]). If that's ok, let me know and I'll add the return trip.
There are four ways to do it. I demonstrate four ways in this JSFiddle, and here are some explanations.
If you're not sure, just use Method B.
Method A
Method A has the advantage that it's the most compatible but the disadvantage that it requires extra HTML. Basically, you're giving an outer div the blue border and an inner div the white border. Your HTML will look something like this:
<div class="methodA">
<div class="container">
Method A
</div>
</div>
Your CSS will look like this:
.methodA {
border-left: 10px solid blue;
}
.methodA .container {
height: 100%;
border-left: 10px solid white;
}
Method B
Method B has the advantage that there's no extra HTML, but the disadvantage is that it won't work in IE before version 9.
.methodB {
border-left: 10px solid blue;
-webkit-box-shadow: inset 10px 0 white;
-moz-box-shadow: inset 10px 0 white;
box-shadow: inset 10px 0 white;
}
You can mitigate IE's compatibility issues using CSS3 PIE, which makes box shadows behave in Internet Explorer (along with other CSS3 features).
Methods C and D
This JSFiddle shows two other methods, which I won't describe in as much detail, but...
Method C makes the blue border a shadow. As a result, it can "cover" other elements and it also changes the size of the element. I don't love this solution, but it might work for you. It also suffers the compatibility issues of Method B.
Method D puts two divs inside of the element: one for the blue border and one for the right border.
it is not really complicate and no extra HTML is needed.
h4:after {
display:block;
content: '';
height:4px;
width: 1px;
border:0px solid #ececec;
border-left-width: 10px;
border-left-color:#4287F4;
border-right-width: 90px;
}
http://jsfiddle.net/N27CH/
Check this link Visit
(http://jsfiddle.net/qD4zd/1/).
See if it helps. This tells you about the application of gradient. See how it is done.
Also why not use directly the images that you want as the border.
Check out for "Gradient" in Css. This might answer your question.
I studied some usage of "canvas" tag in HTML5. That is preety much informative about gradient specification and is also more readable than the traditionl HTML4. So for this question i also want to request the questioner to look at the "canvas" tag in HTML5. check the link below.
Link: http://html5center.sourceforge.net/Using-Unprefixed-CSS3-Gradients-in-Modern-Browsers
Link: http://www.sendesignz.com/index.php/web-development/111-how-to-create-gradient-and-shadow-effect-in-html5-canvas
Second link is more awesome. Cheers.:)
I have a menu div that appears just fine in IE9 and Firefox, but in chrome and IE8, the contents of the div are not following actual div itself when the div is moved:
IE9/FF:
Chrome:
As far as I can tell, i don't have any css conflicts or issues with flow. I may be missing something though (obviously). Any help would be greatly appreciated. TIA
Here is the current div hiearchy:
<div id="mainBody">
<div id="mainMenu" class="mainMenu">
<asp:Menu class="menuItems">
<--- menu items jargon here --->
</asp:Menu>
</div>
</div>
And the css:
body
{
background-color: #E7EDEB;
}
.textBox
{
margin: 1px;
}
#mainBody
{
border: 1px solid #000000;
width: 1000px;
background-color: #FFFFFF;
margin-left: 10%;
margin-right: 10%;
padding: 0px;
font-family: Calibri;
letter-spacing: .03em;
}
.mainMenu
{
border: 1px solid #000000;
background-color: White;
margin: 0px;
position: relative;
width: 600px;
left: 50px;
bottom: 25px;
height: 30px;
}
.MenuItems
{
vertical-align: middle;
font-family: Calibri;
font-size: large;
text-decoration: none;
text-align: left;
color: #000000;
margin: 3px;
}
div#mainContent
{
padding-left: 20px;
padding-right: 20px;
padding-bottom: 10px;
margin: 0px;
width: 1000px
}
UPDATE:
I removed the asp menu control from the div and replaced it with plain text. It looked much more like you would expect, so it's leading me to believe it has something to do with the control itself. I haven't applied any styles to the control itself so im still lost.
Try adding styling to your skiplink:
#ctl04_SkipLink {
position:absolute;
left:-9999px;
}
It's caused by your hidden anchor before the ul. Haven't figured out why yet.
EDIT: Actually, it appears its your hidden image inside that anchor.
Being an ASP control issues, I didn't think I'd ever figure it out. It turns out that it WAS an issue with the way ASP was rendering the control. Thanks to Rob, we were able to narrow it down to a SkipLink. Since the page is personal, I don't need to worry about skiplinks so I opted to disable it completely. The way to do it in ASP is simply to set SkipLinkText to "" in the menu control.
For anyone else that comes across this, there are a few other tricks shown here:
http://forums.asp.net/t/976796.aspx/1
Thanks guys
Try to add
top:0;
to .mainMenu and reload it a few times ;)
I'm trying to position all images on my webpage behind a log-in screen but I can't seem to make that work. I've tried using z-index but that doesn't help either. I was wondering if anyone can help me sort this out. Here's a screenshot of my issue: http://img64.imageshack.us/img64/1267/uplad.png. I'm trying to make all images stay behind the black image with the log-in screen in front of everything.
CSS
CSS for images
img
{
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
border: 1px solid #ccc;
float: left;
background-color: #fff;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
z-index:0;
}
CSS for black background
element.style {
height: 1843px;
left: 0;
position: fixed;
top: 0;
width: 1263px;
z-index: 10000;
}
.modalBackground {
background-color: #000000;
opacity: 0.5;
}
CSS for Log-in Screen
element.style {
display: block;
margin-left: -225px;
margin-top: -212px;
}
.pagepopups .popup {
-moz-border-radius: 5px 5px 5px 5px;
-moz-box-shadow: 0 0 3px #333333;
background-color: #006699;
display: none;
left: 50%;
padding: 11px 10px;
position: absolute;
top: 50%;
z-index: 10001;
}
Z-index does appear to be what you want. There is a known z-index bug with Internet Explorer where it doesn't exactly follow the z-index as other browsers. Fortunately, there's an easy fix. You need to specify z-index on parent elements up until the container for all of the elements you're trying to specify a z-index for. I think the problem is that IE creates a "z-index context" for each element unless the parent element has a z-index. Here's a good link describing the issue and how to fix it.
You failed to make the image fully anonymous (Featured on .. button), I Googled for the live site, and it has the issue you're describing, so I'm assuming it's the same version you're working with.
Testing only in IE7:
Add to .header a single rule: z-index: 10000.
That's it fixed in IE7.
It will probably also be fixed in IE6, but if not, let me know and I'll take a look.
You're lucky you didn't anonymise it properly :)