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.
Related
Demo
http://people.mywot.com/dean/tour/ie6test.html
I have narrowed down this problem into the test case above. You'll spot it right away if you load it up in IE6.
The problem
When hovering over the anchor in IE6, all descendent elements which are meant to become visible become visible, but as soon as you hover out, all styling remains but the text disappears. This results in a "ghost box" and quite an interesting (but undesired effect).
I've searched for a few hours this morning to try and find out which IE6 bug this is, but I'm out of ideas.
P.S. Ignore the transparency of the PNG's. I just haven't included the pngfix on this demo.
Hover states in IE6 have some silly bugs unfortunately.
http://reference.sitepoint.com/css/pseudoclass-hover covers most of them which should allow you to experiment with what might be wrong.
EDIT: You may have to resort to javascript to overcome this one unfortunately.
Some commenters are forgetting that there are a number of clients (eg: UK local government) that still almost exclusively use IE6. Pity those of us who have to still ensure it is taken into consideration!
Yes, 100% of webmaster hate the devil IE6, but we're here to answer the question, not to discuss how bad IE6 is, right?
And for the question, this is my answer : (Edited line 42 & 43 in your demo code)
...
.screenshot a.bubble .description { position: absolute; min-width: 200px; bottom: -8px; background: none; display: none;
}
.screenshot a.bubble:hover .description { display: inline; background: #efefef; }
...
I don't know how, but IE6 cannot hide the div with css property "background" not set to "none". That's all what cause the problem. Anyway, I hate IE6.
I've looked all over this site and the rest of the internet, but can't figure out why this is happening. My page displays fine in all browsers but IE8 (though, technically, I haven't checked earlier versions of IE). Even in IE8, it sometimes displays correctly (which makes no sense to me).
Here's the page: http://www.thedudehatescancer.com/testsite/past-results.shtml
Sometimes the social network and footer information moves up the screen and overlays the bottom portion of the main page content, and sometimes it stays at the bottom of the page, where it belongs.
style sheets are under the same root.
main: stylesheet.css
IE hacks: stylesheet-iehacks.css
I can't figure it out. My guess is I'm doing something stupid, but I wish I knew what it was. Any help would be very much appreciated!!
The main problem is that you are using display:inline-block.
The easy fix for this problems is to add zoom:1 to anything that is using inline-block.
This adds the hasLayout property in ie
For Example;
#networkswrap {
background: url("images/bg-gray2.jpg") repeat scroll 0 0 transparent;
border-bottom: 3px solid #989896;
display: inline-block;
height: 60px;
overflow: visible;
width: 100%;
zoom:1
}
It looks like your site is using several CSS properties that have the potential to cause problems in IE.
It certainly has issues in IE7 and your use of <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> should cause IE8 to use the IE7 rendering engine.
Initially, I thought it might be the hasLayout problem due to your use of display: inline-block. I tried implementing a fix for that but it made no difference.
I think the problem you are experiencing is due to your use of min-height. I tried applying a min-height hack and it seemed to work.
#mainwrap{
min-height:600px;
height:auto !important;
height:600px;
}
Worthy site by the way; my mum had AML.
I hope this helps,
Mark
I am having a hard time figuring out why things look so different in IE and Firefox.
Here is a CSS class
.logo { width: 224px; height: 120px; position: relative;
display:block; left: -1px; background-image: url(logo.png);}
In IE this works as expected, but in Firefox it behaves like a drunk! I see 3 logo.png at different places on a page. If I remove display:block then I cannot see the image in either browser.
Any comments appreciated.
You might need to add
background-repeat: none;
to your css class. And for future reference, it's always IE that screws up ;)
EDIT: If that doesn't solve your problem, please put up a sample site live somewhere we can look at it and experiment a little. Also, Firebug might be helpful.
EDIT2: Removed this, since I noted the difference between firebug and the src I got from right-clicking and selecting "View Source..."
EDIT3: Steve found your problem: You can't self-close anchors. Change
<a href="/" id="logo" />
to
Your problem is in the HTML. You can't can't self close A tags
Correct, the problem is always IE. If firefox has an issue it's usually an issue with the w3c specs. Not being a fanboy, it's just the way things are.
I guessing your problem is that the default value for background-repeat is different between the browsers. You should try setting background-repeat:no-repeat EDIT: Maybe not, all browsers default to repeat.
It would be useful to know what element you are applying logo to. Whatever it is is probably collapsing to a height of 0px when not a block. Put a border on it to see what's going on there.
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;
}
What is the definitive way to mimic the CSS property min-width in Internet Explorer 6? Is it better not to try?
foo { min-width: 100px } // for everyone
* html foo { width: 100px } // just for IE
(or serve a separate stylesheet to IE using conditional comments)
You could use an expression (as suggested by HBoss), but if you are worried about performance then the best way to do this is to add a shim inside the element you want to apply a min-width to.
<div id="container">
The "shim" div will hold the container div open to at least 500px!
You should be able to put it anywhere in the container div.
<div class="shim"> </div>
</div>
#container .shim {
width: 500px;
height: 0;
line-height: 0;
}
This requires a little non-semantic markup but is a truly cross-browser solution and doesn't require the overhead of using an expression.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've fiddled with every answer given here in the past month. And after playing with Pretaul's method (Min-width in MSIE 6), it seems to be the best alternative to min-width. No hacks or anything, just straight up compliant CSS code which takes 30 seconds to implement.
From Googling around, expressions seem to be the most popular. For me anyways, ittended to randomly lock up my browser (both IE and FF).
I dunno, I had some success with:
min-width: 193px;
width:auto !important;
_width: 193px; /* IE6 hack */
A combination of dustin diaz' min-height fast hack & How do I specify in HTML or CSS the absolute minimum width of a table cell
do your css tag as _Width: 500px or whatever.
This works pretty well...
div.container {
min-width: 760px;
width:expression(document.body.clientWidth < 760? "760px": "auto" );
}
Min-height fast hack works for me (also works for width)
The shim example is fine for forcing the browser to show a horizontal scroll bar when the container gets to a certain size but you'll notice that the content in the container will still be resized as the window gets smaller. I imagine that this is not the overall goal when trying to achieve minimum width in IE 6.
Incomplete min-width technique http://www.mediafire.com/imgbnc.php/260264acec99b5aba3e77c1c4cdc54e94g.jpg
Furthermore, the use of expressions and other crazy CSS hacks just isn't good practice. They are unsafe and unclean. This article explains the caveats of CSS hacks and why they should be avoided altogether.
I personally consider scaryjeff's post to be the best advice for achieving true min-width in IE6 and as an experienced CSS layout developer I've yet to find a better solution that is as applicable to problems of this kind.
This article on CSS Play, by Stu Nicholls, shows the different methods for achieving min-width in IE, in all modes (Quirks, etc) and even for IE/Mac.
I've provided an answer to a similar question that details the use of this technique to correctly achieve min-width. It can be viewed here:
CSS: Two 50% fluid columns not respecting min width
The technique is simple, valid CSS that can be used in almost any situation. Applied to the shim example above it results in what I consider to be correct min-width functionality.
Correct min-width technique http://www.mediafire.com/imgbnc.php/a67b2820bfbd6a5b588bea23c4c0462f4g.jpg
Single line button
button{
background-color:#069;
float:left;
min-width:200px;
width:auto !important;
width:200px;
white-space: nowrap}
Use conditional comments to reference and MSIE 6 specific style sheet, then create CSS as below.
Compliant browsers will use:
min-width: 660px;
Then MSIE 6 will use:
width: expression((document.body.clientWidth < 659)? "660px" : "auto");