After 3 hours digging I finally found the cause of a weird issue I'm having with a Wordpress theme.
Whenever I add a tag to an article that contains the word "span" (e.g Espana), it breaks the layout.
Wordpress adds the class to the article "tag-espana" as expected, although Bootstrap stylesheet applies some rules to it, ruining the layout.
This should be caused by the following selector which is extensively used in Bootstrap 2:
[class*="span"]
Is this a known bug? I couldn't find any info about this so I have some doubts. Any idea on how could I fix this without editing bootstrap source files?
Thanks
Nobody expects the spanish inquisition
Yes, that seems like a bug with this selector. You could modify it by adding a restriction:
[class*="span"]:not([class*="tag-"])
or
[class*="span"]:not([class*="espana"])
but that won't be understood by IE7 and IE8 (if TB2 is compatible with IE7 in the first place, can't remember)
It would be better to override systematically:
[class*="span"] {
property: value-in-TB2;
}
[class*="espana"] {
property: nope-override;
}
but as you wrote, it may be used too much by TB2 to be possible to do that...
Or see how your tag-espana elements are styled and override everything that isn't wanted.
Related
Site in question:
http://www.sedulity.tk/
Site using Chrome 19 dev:
Site using IE9:
as you can see on the homepage using IE it seems like it not recognizing the height of the DIV of each picture, whereas on chrome and firefox there is no issue.
I think this is probably my fault, won't blame IE for it...but I can't figure it out :|
In your css folder there is a css file ie7style.css and it's being used for ie (I've tested in ie8) and it has a class (.item-image) that is
.item-image{
height:142px;
}
Try to fix it or just remove it.
Css file: http://www.sedulity.tk/wp-content/themes/DeepFocus/css/ie7style.css
See in this developer Tool screenshot I've removed the css entry height:142px from class (.item-image) from file ie7style.css
After that (without .item-image{height:142px} in file ie7style.css) see the page in ie8
Try adding a height to the .item
CSS
#portfolio-items .item {
height:500px;
}
you might wanna check this article for a cross-browser inline-block that doesn't overlap. your case is most likely caused by the "baseline", where the next set of elements base their tops on the last elements' baseline (which would be somewhere in the middle of the element).
I have a WordPress site that I recently moved from one domain to another (using my host's dotnetpanel). When it went live on the new domain, it does not show up correctly in Internet Explorer. Previously, it worked well in all browsers. Specifically, it seems like parts of the stylesheet are just being ignored. It works fine on all browsers tested except IE.
Try putting the code here in and testing to see if it fixes your problem. What parts look like they're being ignored?
Maybe you have to reinstall some of your plug-ins?
I guess there are some wrong paths in the database or config-files.
Try to search database by db-admin-tool and all the files with an advanced text-editor with the option to search automatically in all files at the same time.
As far as I can see the style sheets are applied.
You have width: 100% and height: 100% on the links in the menu, which messes with their size in IE. Remove those styles.
The reason that the gradients doesn't show up is because they are filters, and the elements has to have layout for the filters to apply.
The object that the filter is applied to must have layout before the filter effect will display. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.
Ref: http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx
If you give the elements layout, the gradients will show up, for example:
.block h2 { width: 100%; }
Is it possible to turn off skype number recognition with some html or javascript? I'm NOT interested in turning it off only for my machine but for anyone visiting my page. I have seen the
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE" />
business but it does not work for me with Firefox. I've also seen comments that this meta is not recognized in skype 4.2.
This is quite a problem since skype is recognizing data in table as phone numbers. For example, the line with two angles
00 23 58 17 45 00
is recognized as a phone number in Chad!
I know I could add some invisible rubbish to these numbers but there are a bunch of them and that's pretty ugly.
You could always add the following CSS:
#skype_pnh_container, #skype_plugin_object, #skype_highlighting_settings {
display: none !important;
}
yes its possible.
you have to split the number in your html code, so that it is not recognised as a whole.
seperate it by an zero width span or an transparent image or something.
it could even be enough if you wrap the routing code and the number in seperat span tags. or better floating left div tags...
i have no skype installed so you have to try it out, but thats the way to go.
update:
you could as well see what html code is generaged and remove it with a javascript code but thats deadly inefficient and unnecessary
SOLUTION: it seems to be enough to use the soft hyphen character
heres an article on that: http://www.ambrosite.com/blog/hide-phone-numbers-from-skype-using-the-html-soft-hyphen
I saw over the interweb a lot of possible solutions javascript solutions, meta tags, css and maybe I found an hack actually working for my websites, I tested on some computers and it work and I think it will work until skype don't change something in their code.
I was looking what is the skype exactly doing on our pages, and it creates some span around the phone numbers, as you already said, but it even add an <object> tag at the end of the document, just after the body closed tag.
And here I saw the trick! Just before that object there is a configuration tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="1"></span>
This is added dynamically by the plugin! but here the solution become obvious, to finally stop skype messing with your design and avoid changing phone number the solution is to insert very early in the document the following tag:
<span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span>
notice the autoextractnumbers="0", here is the trick. The document will not validate anyway with that tag because there is no attribute "autoextractnumbers" but i noticed that it works even if commented:
<!-- <span id="skype_highlighting_settings" display="none" autoextractnumbers="0"></span> -->
And that's it! Enjoy your webpages free from messy plugins! And your web page will still validate correctly. Hope it works for you too! I have tested on a couple of computer 3 different browsers and 2 different skype versions, for now it works for me, let me know if it works for you too and if it works share it :)
I would try adding the CSS:
span.skype_pnh_container {
display: none !important;
}
Unfortunately I can't test it because I can't get the toolbar to work in Firefox, and IE's developer tools aren't cutting it. If it doesn't work, I'd try adding it through javascript after the page loads.
Try this JavaScript:
http://www.codeblog.co.uk/2010/04/07/web-development/how-to-stop-skype-toolbar-from-changing-numbers-to-skype-buttons-ruining-your-website-design-update/
All of the solutions provided to this question are no longer working, or aren't very efficient. The following CSS will remove the Skype Click-to-Call buttons very efficiently.
body span[class ^= "skype_pnh_print_container"] {
display: inline !important;
}
body span.skype_pnh_container {
display: none !important;
}
For ages now my site has had a catalogue where the small image is directly within a link within a div. The link must only be around the image - but I do not want to use the + selector since this is not supported by some versions of IE (IE6 onwards I think it needs to support). The div has class "ImageHoverSpan" (it used to be a Span on an older layout, I just havent bothered renaming the class). There is another div, with class "ImageOuterPanel", on the same level as the link (i.e. a direct child of the ImageHoverSpan).
I have the following classes defined:
.ImageHoverSpan .ImageOuterPanel {
display: none; }
.customer .ImageHoverSpan:hover .ImageOuterPanel {
display: block; }
This certainly used to work fine as far as I can remember - on all browsers. I am about to launch the new version of the website into testing, but I just noticed today that, in Opera 10.60, the image panel (ImageOuterPanel) is displaying straight away on hover over the ImageHoverSpan, but it takes anything between 1 second and.. well.. never to disappear when the mouse leaves the div.
I know using :hover on anything other than links can slow performance in IE - but this is Opera. In Firefox (3.6) this works absolutely fine - it appears and disappears as it should.
Has anyone got any ideas about what could be causing this? Anyone had this problem before?
Thank you.
Regards,
Richard
Well I have found an answer. I asked the question on the Opera forums, and a user posted back that I could have an Opera stylesheet which keeps the elements visible but sets opacity to 0 or 100 instead. This works - the elements appear and disappear instantly.
Richard
I understand that elements can have multiple classes:
.rfrsh-btn {
background-image:url(../../upload/rfrsh_nb_grey.png);
...
}
.submit
{
font-size: 0.85em;
padding: 0;
}
This was working perfectly as an ID before. now I changed it to a class and lo and behold, no images.
But for some reason this <button> element doesn't seem to want to display with a background image and styles applied.
Is there a reason for this? Or am I codeblind and doing something wrong.
I can't use ID either as it's repeated many times on the page.
Thanks all :)
There are several reasons. For instance, it's quite possible your image path is not correct. It 's worth noting that paths in CSS are relative to the .css file 's location, and not to the including page.
To better understand what's going on now and in the future, however, I recommend either working with Chrome, which offers a nice set of debugging tools, or use Firefox with Firebug installed. This way you can inspect your elements and see what styles get applied, overlapped, or any images the browser cannot locate.
For more information: http://www.thetruetribe.com/2008/03/firebug-tutorial-getting-started/
Underscores in class names can cause issues. Try renaming rfrsh_btn.
https://developer.mozilla.org/en/Underscores_in_class_and_ID_Names