I know there's a lot of questions about ie7 z-index issues,
I took a look at theses and none of them seems to solve my problem so here's yet another IE7 z-index question:
I have a table with cells containing long texts,
I'd like to show the full text when hovering a cell, in a pure CSS way (I'd really like to avoid another js fix because the app is already pretty slow client side with IE7 because of big tables).
I got it working on FF/Chrome/IE8/IE9 with that method:
http://jsfiddle.net/Zppy4/15/
but I can't get it to work with IE7.
If someone have a magic idea, any help is welcome :)
thanks in advance
try removing .c { position: relative } and adding .c:hover { position: relative }. Not tested but think this should work
here is another: add .c { z-index: 10000 } and .c:hover { z-index: 10001 }
Related
I realize this question has been asked before but the solution that is usually supplied involves adding this to the target tag:
overflow-x: hidden
which I've done. This fix prevents horizontal scrolling in Firefox but fails when it comes to Chrome and IE8 (not so much an issue at this moment in regard to IE8). Judging by previous questions this may have become an issue since Chrome version 34. So how do I go about fixing this?
Thr problem CSS that is causing the scrolling looks like this:
// Tablet portrait and landscape
#media (min-width: #screen-sm-min) {
& {
margin: 0 -100% !important;
padding: 30px 100% !important;
}
}
the above causes the content to appear evenly in the center as per the requirement. Any advice on this or a possible resource to explain why this happens in Chrome?
Thanks
P.S. I also noticed that this site doesn't have that problem - why would that be? Fundamental difference in structure? Or the CSS I'm looking for?
Thanks for everyone's efforts even though I provided little information. We solved the error though we still don't know why it was happening. We have different .LESS files for different pages but they are all imported into one called ice-styles.less
Here was were I was adding the overflow-x: hidden and for some reason this was being ignored even with an !important suffix appended. My understanding of this was that it should apply to all pages because it was being attached to the html and body tags.
So we moved the same line above into the .LESS page that the problem was occurring and it fixed the problem - but it didn't introduce the problem into other pages - this suggests that the structure of the page was the real culprit.
Thanks again everyone
did you tried styling it by jquery?
$(document).ready(function(){
$('body').css('overflow-x','hidden !important');
})
or even if it didnt worked trying it after few seconds
$(document).ready(function(){
setTimeOut(function(){
$('body').css('overflow-x','hidden !important');
},1000)
})
there is something that is overwriting you overflow:hidden tag...
maybe there is some css that gives your element some width and then you force the overflow which does not happen at times in chrome or IE...
html {
overflow-x: hidden; //or none
}
When I use in-page links or "anchors" to reach a part of the page, the scrollbar doesn't allow me access to the content above -- even though it is there in the HMTL.
My site is developed in WordPress but I think the problem is more my CSS.
See the naughty
http://adanewmedia.org/submissions/#review
versus the nice http://adanewmedia.org/submissions/
Any ideas are appreciated!
Line 92 of style.css, remove this:
#main {
overflow: hidden;
}
Seems like a weird bug, or maybe you have a height set in some parent element to the #main div. Removing that style should fix it though.
Further inspection I found this (style.css line 96):
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
This is where your issues begin. Removing this nonsense fixes your original issue, but changes up the style of your site quite a bit. If you want to remove the black sidebar/footer, do that instead of pushing the containers all over the place.
When I tried playing with your code, it seemed to be this line in your style sheet that caused it - http://adanewmedia.org/wp-content/themes/twentyfourteen-child-ada/style.css?ver=3.9.1
#main-content, #secondary {
margin-bottom: -32767px;
padding-bottom: 32767px;
}
Not sure what you are trying to do with that.
Also: firebug is rendering the page very oddly - I'd try validating your code as if Firebug is struggling to render the page correctly, then browsers are also likely to throw unexpected layout issues.
I have a JQ slideshow in a div on this page:
http://www.lucky-seed.com/web.html
and have a css sheet for IE with the following style:
.slideshow { height: 599px; width: 700px;
max-width: 700px
margin-top: 00px;
margin-left: 295px;
float:left;
position: relative;
display: inline;}
Where am I going wrong? It looks great in everything but IE, but once in IE, I can't seem to move the position around no matter what I do.
Thanks in advance for your insights.
Hello fellow Pittsburgher :P
You've got so many different, conflicting styles going on there. While it's not a specific answer, might I suggest using a CSS framework like Blueprint ( http://www.blueprintcss.org/ ) to better manage your columns with greater simplicity and let it worry about IE compatibility. Rolling columns yourself is usually unnecessary these days.
In ieweb.css, try changing the margin-top on .slidenav to 50px, instead of -20px.
That moves the arrows to approximately the same place that they are in Firefox.
It might be an idea to scrap the IE specific stylesheets and do them again if need be. If you remember your question from yesterday, you had a weird issue with comments. Those comments were causing parsing errors on your pages for IE, so I imagine a lot of the "fixes" in your IE stylesheets are no longer required now you've sorted those comments.
Ive used the following css code to align my form elements:
form { position:relative; }
form input { position:absolute; left:11em; }
However, the textarea element is not aligned correctly with the rest of the elements. I tried the following, but that didnt work
form input,textarea { position:absolute; left:11em; }
Any way to fix this ?
Thank You.
No-one is going to be able to solve this without seeing the current result; I generally avoid absolute positioning as a rule unless doing something particularly complicated like tooltips, can you not achieve what you want using margins?
It looks like this is a Firefox, em-specific bug.
I think it's related to this bug about Firefox textareas and its font: Mozilla 3.0.8 and Chrome height in em bug workaround
Your positioning should work if you add the following code:
form { font: 11px Arial; }
form textarea { font-size: 100%; font-family: inherit; }
Also, another workaround is using pixels instead of em's.
This does not address your question, but why not use "text-align"? Absolute positioning to place form elements sounds a bit odd in my ears.
If you must use absolute positioning in this way, have you considered using margin instead of left? As the others have pointed out, it's difficult to troubleshoot your problem without more information.
How can I hide an HTML form legend from visual browsers, using CSS, in an accessible way?
legend { display: none; }
is not an option because, as I understand it, this will 'hide' the legend from screen readers. Other attempts I've made do not remove the legend from the layout - i.e. it continues to take up space.
Added as an answer instead of a comment so I can get more points. :-)
If you really want legends, have you tried putting a span inside the legend and positioning/manipulating that?
I understand this works in IE7 and Firefox...
You can't do this in Firefox because it is a bug in the browser.
You can read more here
Browser Bugs
Updated with replacement for -9999px hack ( http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/ ) :
HTML:
<legend><span>Your description</span></legend>
CSS:
legend span {
display: block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
For what it's worth - and I'm sure I'll get flamed for this - legend tags are one of the few places I deliberately break the spec by leaving them out. I replace them with a heading of the appropriate level which provides the same information to the user but without the browser bugs.
(I'm happy to hear about the real-world downsides of this if anybody can see some)
edit: Oh and you should ask yourself why assistive technology users would want to hear the legends when your browser using users don't. If the answer is simply to satisfy the HTML specs, use display:none and be done with it - don't hinder the user experience of one group by providing useless information just for a formality.
Solved and tested in IE7, IE8, IE9, FF, Opera, Safari and Chrome. The legend will be read from screen readers, and users will not see it:
<legend><span class="accessibility">Your description</span></legend>
and then, in CSS:
legend span.accessibility {
position:absolute;
left:-9999px;
width:100px;
height:auto;
overflow:hidden;
}
Yes, there's something special about it. It's a replaced element like many form elements. Browsers have a very specific default formatting. Moreover it can't be forced to behave like a regular element using display:block or display:inline, causing attempts to override with CSS to ... not work well.
There are some well documented techniques that can help you accomplish SOME effects with legends, though workarounds are necessary for a semblance of cross-browser compatibility.
http://www.tyssendesign.com.au/articles/css/legends-of-style/ ...
Also see the revised version posted a year or so later.
Many versions of Firefox specifically ignore both display:none and absolute positioning.
You could try:
legend
{
position: absolute;
top: -1000px;
}
I know this is 2 years too late, but using visibility: hidden seems to work 'in an accessible way' in FF.
You can use a combination of visibility and position rules, see below:
legend {
visibility: hidden;
position: absolute;
}