Hello I'm so utterly confused and I've searched around here for hours and tried everything, yes including rules specific for FF.
Here is my current class.
.paste_body
{
float: left;
width: 100%;
margin-top: -30px;
margin-bottom: -10px;
word-wrap: break-word;
}
Before everyone goes on and starts giving me advice could you please take the time to real time CSS edit via inspect elm in fire fox to actually correctly answer this? because I've tried it all.
The URL is:
skidpaste.org/QMGm3uOX
EDIT: Keep in mind this works in every other browser.
This happens because Firefox doesn't know where to create a line break since you don't have any spaces in your text strings. Although I tried your page in Chrome, and it "works", it certainly doesn't look very good...
Here is a link on how to deal with this in CSS:
http://css-tricks.com/almanac/properties/w/word-break/
Related
I have an ennoying bug with CSS on my new site.
This is a random bug with chrome only. It appears usually at first visit and disappears with a refresh (F5) or a window resize. To make it reappearing, you have to refresh the page (sometimes up to 10 times).
When the bug appears, two links ("Blog" and "Qui suis-je") of the menubar are some pixels too low, and outside of the chrome's computer css boxes (in developpers tools).
(source: ksxav.net)
]
Here is a gif with and without bug :
After searching on google, I tried the following things :
Fixing Varnish for avoiding the 304 bug (bug described here)
I tried to copy all the content of CSS targeted with #import url(css url) into the main CSS file (described here)
Remove all my custom css
I was able to reproduce the bug on 4 differents computers (same Chrome version)
Same results. I also see the same thing on the theme's developper's website (here. Remember, sometimes you have to refresh / close and reopen the tab to view it).
Do someone has an idea? The theme's developper says he can't reproduce the bug, but as I said, I saw it on 4 different computers...
Thank you.
Here are informations :
Chrome 44.0.2403.89, no plugins at all
Wordpress up to date (4.2.3)
Theme up to date
This looks like a vertical alignment issue, but it's probably not. There are a couple things you can do here, though, to try to force the issue:
Drop floats
The a child elements within your li are floated. That's not necessary and I'd recommend removing them.
Fake it
There's no reason you have to rely on the actual document flow to display this where you want it. I'm going to warn you in advance, this one feels icky to write but works like a charm.
On your original a elements
Copy the text of the a to a span, and plop it right next to the other
Example
Mes chiennes
<span>Mes chiennes</span>
Set the following CSS rules:
#nav li {
position: relative;
}
#nav li span {
visibility: hidden;
}
#nav li a {
position: absolute;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This is a little bit of voodoo where we make the span reserve the actual space needed for the word, and then force the element to display perfectly centered within the tab. The transform bit just drags it so the center of the element is at the top and left coordinates you provide, so feel free to play with those to get them where you want them.
Hope that helps.
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'm designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I've used CSS code like this:
div.Info
{
display: inline;
position: relative;
text-decoration: none;
}
div.Info span.InfoDetail
{
display: none;
}
div.Info:hover span.InfoDetail
{
padding: 3px;
display: block;
position: absolute;
top: 1em; left: 1em;
border: 3px inset Gray;
background-color: White; color: #000;
text-align: left;
white-space: nowrap;
z-index: 25;
}
to create little CSS popups that display on mouseover and they seem to work very well. However I'm conscious that this may or may not work on touchscreens so I was wondering what the "correct" behaviour was as there doesn't seem to be much consistency that I've found across the limited amount of mobile browsers I've been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the "Mouse over for detail" text or the little up-arrow image:-
on iOS (I found a demo iPad in a shop to test it) this doesn't seem to work (I only tried the text as I have only just added the image)
on MicroB on my N900, tapping the text and image both bring up the popup, fine
on Firefox (I believe it's Fennec) on my N900 tapping on either does nothing
What's your take on this - it seems a shame as it's such a useful way of making popups without having to resort to javascript, but if it won't work with touch-screens going forward I'm going to have to rethink my strategy
Cheers
MH
The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.
This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).
The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.
Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?
First post from a lurker, so please bear with me.
In my company's Facebook app, there's a form that can have error messages, which are getting double left padding. They have a fair bit of padding to line up with the inputs above them (which also get the left padding).
(Broken error message img) http://img687.imageshack.us/img687/2609/windows7x64ie9beta2.png
When I pop this same page out of the Facebook iframe, it displays normally, with form elements and error messages lining up.
(Non-broken error message img) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png
The actual code is an inherited (in all senses of the word) mess, but does work in everything including IE6 & 7 with no hacks. Here are all of the non-reset-styles on these lis:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 160px;
I've confirmed that doubling the padding yields the messed up view (I can only use IE Developer tools in the non-messed up view since it can't handle the iframe).
Anyone have any idea? Other than ripping up this old code and starting over?
UPDATE: Seems like ripping up the old code might be a necessity. I have some ULs with no children that might be causing some breakage.
UPDATE 2: The dynamically generated dom is a mess, but the engineers here have no time to refactor it, so I may never get the answer to this question. :(
This may not be an ideal solution, but I would use a condition and a separate IE9-only stylesheet to fix this issue.
Something like:
<!--IF[IE 9]-->
// Include IE9 stylesheet here
<![endif]-->
and in that stylesheet maybe do something like this:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 80px; /* half the padding */
Are you using floats? I reached this question via a similar problem.
Check out this answer: IE 9 CSS Float problem!
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.