I have a Wordpress site that uses a JQuery plugin called Hover-Caption ( https://github.com/coryschires/hover-caption ).
The main page of site: (http://brighidfitzsimons.com) looks good.
However in Internet Explorer 9, a similar page based on Category adds a 282px top offset to the post thumbnail image. (http://brighidfitzsimons.com/category/lifestyle/)
I am new web developer so I am struggling to figure out how to isolate problem. Based on this stackoverflow entry ( How do I get rid of an element's offset using CSS? ) my current train of thought is to add a IE specific CSS sheet to 'reverse' the offset but I can't seem to get at the offending element. Also I'm confused why works on main page but not on category page. If you watch page loading carefully, it initially loads correctly then at the very end the images are moved down. Perhaps this is a clue.
First stackoverflow entry so I hope I have followed correct ettiquete. Please advise if you need me to provide any more information.
Thanks for taking time to read problem.
Regards Simon
It has something to do with the substitutions of the content inside the title, probably some quirk about ie9 which someone else would have more of an idea for me
just so you can take my word for it: http://jsfiddle.net/BXjK3/
the first two i have removed all the greater, lesser and quotes and it works, but I would say the browser does the substitutions before Javascript can see it, and it all goes down-hill
edit: worth mentioning the reason it looks like that is because the text is no longer properly contained, and so the display none is not taking effect on it, pushing all the images down and making it a jumble, due to the way the content is loaded the ie inspection cannot show me how the text is after the javascript, only what was loaded on page load, so i can't give you more help than that
Related
I'm having an issue with my website http://www.ben-drury.co.uk/ (I know the content sounds dumb, but it's my first attempt at a portfolio and it's not finished) where the formatting of the text is very peculiar under a specific set of circumstances.
When loading any post or page in Google Chrome, if I remain in the tab for the duration of the loading it looks like the image below, which is perfect and exactly what I want.
However if I start loading the webpage in a new tab and don't instantly navigate to that new tab, or indeed if I refresh the page and navigate away from the tab, when I come back it looks like the image below.
Interestingly it seems to work absolutely fine in Internet Explorer and Firefox, so initially I thought that it might be an issue with my installation of Google Chrome. However testing it on other computers resulted in the same thing happening, and a variety of different ways of phrasing the issue has turned up very little.
So essentially, how do I fix it for Google Chrome users?
(For those that cannot see the images, the text in the post placed as an example runs outside of the box it should be displayed in and often lines appear over the top of each other around hyper links.)
Update:
I've managed to fix the issue for pages by removing the justified alignment of the text. However I have made said change to the posts as well yet the problem persists for them.
So after a little more delving into the issue, I came to the conclusion that not only was the idea of web safe fonts actually a load of miss-represented nonsense, but that Google fonts might be the way to go. After installing a plugin for Google fonts onto WordPress and making all my posts use one by default, my problem has been entirely resolved and I can even have justified text on my posts and pages.
I've got a super strange and hard to diagnose issue. Hoping that someone on this forum has run into it before. Basically, I have a wordpress + woocommerce page loading like this:
As you can see there is a lot of extra whitespace. The problem is I can't figure out where the whitespace is coming from because every time I inspect element, the page removes the whitespace immediately and it looks (correctly) like this:
If I keep the "inspect element" window open and refresh the page, the whitespace returns, but as soon as I change the CSS in any way whatsoever (ie remove a random attribute or change anything), the page once again fixes itself.
If I locate the area where the whitespace should be (by not changing anything), there is literally nothing there that the whitespace is attached to. It's as if it's invisible.
I'm using Chrome (34.0.1847.131 m). Any ideas what could cause this strange behaviour?
This seems like an issue, somehow being caused by javascript. I've worked with WC before, and the JS they use is really buggy. I'd suggest trying to turn off javascript, and see if the issue still occurs. The next place to check would be the template itself. After that, check woocommerces filter set/action hooks. From my experience, WC's templates are super badly done (Seriously, who still uses tables). It caused me all sort of weird headaches as well.
I'm designing a blog in Wordpress using the Thesis Framework and there is an issue that I just can't seem to find a fix to:
Basically everything is fine on the main page, but when I go into any individual post, the side bar is getting pushed off and showing up right down the button of the page (below the comments).
It's pretty obvious that there is some kind of sizing/width issue and I've played around with a lot of the widths in firebug but just can't seem to find where it's going wrong. I can't find a difference between the main page and post pages either.
Any help would be greatly appreciated! A specific solution would be ideal because I've already spent a lot of time tinkering with it to try and address the issue.
Thanks in advance for any help!
I had this problem as well with the thesis framework. I found two reasons where it produced a similar mistake on my blog:
The first reason is that the sidebar + content area is bigger than you container. That would make the sidebar go below the the content. Make sure also that the content of the sidebar is also smaller than the sidebar. I had a Facebook box in the sidebar that was bigger, thus pushed the whole sidebar below the content.
An other reason was a plugin that I had installed. If you have any plugins installed try and see if one of those is interfering with the sidebar layout.
If that doesn't work you can also post a snippet of the code so that I can look at it.
I often have this problem when editing a page in html (text) mode and forget a closing tag, most notably a . If using tables, a missing , or similar will cause this.
So, in brief, make sure all your opening tags have a corresponding close tag.
Make sure the html is syntax-error free. I had the same problem and the culprit was a wrong closing tag (<b/>)
Here is the source:
http://store.bionoricausa.com/index.aspx
All good in FF and Mac browsers.
In IE8 developer mode, the 3 divs immediately below div id="footerIn" are shown being recreated a second time, resulting in a repeating footer.
This is with Compatibility Mode off.
When it is on, the repeating problem is gone, but the header logo is missing.
This page is a port of a WordPress site as home page to a Network Solutions e-commerce site. As you probably know, NS auto-generates a container and table around the header, body, and footer content, interfering with any of your own containers that you may have used in another CMS. I suspect this is most of my problem, as I've had to develop workarounds to display parts of the page properly to match the original WP site. But no matter how I rearrange the footer code, I can't get IE8 to stop doubling it.
Any help would be GREATLY appreciated. Thanks in advance!
Without going through all your markup, I can say I've seen this kind of problem before on IE and it's typically caused by: a tag that wasn't closed, tags that weren't nested propertly, or an extraneous closing tag somewhere. That's where I would start first.
It was the fact that there was a search form in the footer tag - Network Solutions creates a form, container, and table to put the whole page in, so the search form that was part of the page I imported from WordPress wouldn't work (you can't have a form within a form). That is what IE objected to. The nested form caused all the footer tags to go haywire in DW, but DW didn't highlight the form as being a problem at all, just all the divs around it...
Thanks kinakuta for your help.
I'm having a peculiar problem with comments in Drupal. If I enable writing comments in a node, and I put a hash tag in the url (for example, node/123#footer), it will load for a split second at the correct div and jump right back to the top. This doesn't happen on any other page of the site where there are no comments. It also doesn't happen if I disable comments or set comments to read-only for the node. It's not Javascript and it's not my theme because the same thing happens if I disable JS in my browser (tested with Chrome, Firefox, IE, and Opera) and use Garland. I've also changed the node's comment settings to every combination I could think of.
I want to use this because I have a lot of links that jump directly to a comment (each comment has id="comment-cid") but it's pretty useless right now!
Any idea where to look? Appreciate it!
Did you check thr source to see if there are any actual anchors available ?
If you have commentes over multiple pages(I mean 30 comments per page), then node/123#comment-3232 won't work if the comment-3232 is in ?page=1 or 2,3,etc.