Im having trouble getting the following to display in ie6, everything works find in all browsers yet ie6 it seems to fall over on.
Instead of display:none ive also tried left:-9999999px yet it still doesnt seem to show/
http://jsfiddle.net/FVkzc/
You'll need csshover.htc for IE6 to work properly.
Use it like so:
body {
behavior: url('csshover.htc');
}
The reason: IE6 doesn't do hover right on non-anchor elements.
Related
Im expierencing a kindda funny problem - If you take a look at this page: http://www.cinemaxx.dk/koebenhavn/events/date-night/
And look at the breadcrumb, then the link/word "Date Night" breaks in two lines, however, there not defined a fixed width of the element, and it is set to display:inline-block
It works fine in FF, IE, Safari, but not in Chrome, and I cant figure out why, so hoping for a bit help? :)
you can give
white-space:nowrap;
css to your link, I try and it will work fine.
Remove this style:
nav.breadcrumb a:last-child:after {
content: '';
}
It should work fine then.
Note: if you want to remove the last star , use :not with :last-child selector.
For some reason the menu of my site is appearing all mis-aligned when using Safari.. site is at http://penarthpc.com/~redvaner/
I've been staring at it for hours and I cant figure it out. It's driving me crazy. Below is an image of how it looks when displayed 'improperly'
http://i.imgur.com/t3hXjry.png
Below is the CSS I've written for the Navbar (element has issues)
(http)pastebin.com/kLDBGnsU
Your help is much appreciated! I'm at a wits end :(
the only difference I can notice on first look is that your links are underlined in Safari. Everything else looks fine and not like the supplied image. The following CSS should solve the underline issue:
a{text-decoration:none !important;}
With regard to the supplied image, perhaps try adding the following to your <li> style
#nav-bar ul li{display:inline-block;zoom: 1;*display: inline;}
this is an ie7 fix, as inline block elements dont usually render correctly in ie7
I'm trying to get this menu working with IE (mainly 9+ atm) and am having trouble. There seems to be some weird padding issue that I can't seem to track down. Any ideas?
Here is the JS Fiddle: http://jsfiddle.net/Ztzn6/
IE Verion:
Chrome Version:
Add vertical-align: top; to your second rule group (the one with display: inline-block). You're running into some fun rules about how line-boxes and inline elements work, IE seems to be using a different default behavior.
One of my sites has a horizontal navigation bar which is created using a list. Besides a small bug in Firefox the list looks & works fine by now - except in Opera 11.61. There the list elements won't show up at all! As the list is the site's main navigation it is nested inside a nav element. So far my debugging showed that this is where the problem is.
When I remove any background information (like background-image or background-color) from the nav element the list is still invisible - I can see the body's background-color.
Also assigning different z-index values did nothing. But removing the nav element helps - when there is no nav the list shows up.
I created a small test case illustrating the problem (remember: Must be opened with Opera.): http://jsfiddle.net/sX5KF/
Do you have any clue why this problem occurs? Is there a fault in my code or is this just something like a bug in Opera? What can I do about it?
Alright I found the mistake. Opera displays nothing because I set content: ""; on the after-element. Other browsers seem to ignore it, but not Opera. I set it because I read it is needed, but actually it works even without content: "";.
I have a footer, below a textarea, containing a list and two buttons (all inline) within a div with the id #share-something. For some reason it is placed differently in Internet Explorer. I want it to look the same in IE as it does in Chrome. What am I doing wrong? http://jsfiddle.net/h3twR/
Oddly enough, IE7 seems to be fine for me, but 8 & 9 are off. If you have an IE-only stylesheet (using conditional comments), you can add this:
#share-something-container textarea {
margin-bottom: 5px;
}
*:first-child+html #share-something-container textarea {
margin-bottom: 0px; /* targets ie7 and undoes the margin above, as IE7 is okay */
}
This doesn't explain why 8 & 9 behave differently, but I've long since given up looking for logic and reason in IE.
There seems to be some kind of difference between IE8/9 and the other browsers and how they're rendering TEXTAREA.
It looks like you just have to set TEXTAREA to display block. It seems some browsers behave differently in this situation as they will see all elements as inline and generate extra white space. However, setting it to display:inline doesn't seem to have the reverse effect, so it's weird like that.
Here's a solution:
http://jsfiddle.net/h3twR/2/
I simply added this:
#share-something-container textarea {
...
display:block;
margin-bottom:5px;
}
And it appeared to render more consistently. IE7 seems to be off a little bit more. But hopefully this helps a little.
Cheers!