I'm having some CSS issues that seem to only occur in chrome. The site in question is liveinthelead.com, and it's still being worked on so if you notice any other strange problems feel free to let me know, I won't be offended. My main problem is this though:
In all of the browsers I've tested except for chrome the site looks fine. However, in chrome, on the main page, the middle post in the three-post divs are shifted down about 20px. But when I open up the developer interface, they shift back to where they're supposed to be! Maybe it's just a local problem, but here are some pictures of what I'm talking about. If you don't experience the same issue then maybe it's just something weird going on with my computer. Cheers.
When I initially load the page
After I open the developer console
One thing that I noticed is that in your div#three-post you set float:left to div.member1 but not to the remaining div.member2 or div.member3.
That's where I would start investigating the problem. Maybe you should set the remaining two divs to also float left. You may need to clear them afterwards too.
For the sake of convention — and so that you don't encounter this confusions again — use IDs for selecting specific elements, e.g., member1, member2, member3, and use classes for selecting multiple elements that should share the same attributes.
I'm unable to replicate on Chrome 15.
=\ could be a good thing! Try another computer!
Related
As a quick intro, I'm not sure what the best way to phrase/tag/etc this question is, especially as it's so not really reproducible so I would appreciate any input from the stackoverflow community.
On a couple of different WordPress websites I help manage, I occasionally see HTML link elements overflow their normal inline position - the link text overlaps any text after it, almost like the link is absolutely positioned. However, the links are statically positioned and inline as normal.
The big problem with this is that it's not consistent and I've not been able to reproduce the problem. This makes debugging and tracking very difficult. I work mostly in Chrome on Windows 7/10 but I have had reports from clients seeing it in IE and occasionally in Firefox (all on Windows I believe).
In addition, when I have been able to use the Chrome developer tools to debug this, the problem resolves itself if the browser window is resized or if almost any link css properties are changed. It's as if the browser draws the page wrong the first time and when it's forced to redraw the elements, it does it right the second time.
Is anyone else seeing this problem? Does anyone have any ideas what would be causing this and why it would be so inconsistent?
I've not been able to get a screengrab of the issue happening as it's not possible to replicate but I may update this question if I manage to capture it happening any time soon.
I am having an extremely odd issue creating a template for my zencart ecommerce website.
I find that many times I load the website my menu will break up and split over two lines as shown below.
The reason I find this behavior odd is that if I refresh the page it correctly displays.
Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.
Link to live site: http://digitalmatrixonline.com.au/
Thanks Jason
If you add
white-space:nowrap;
To the div that contains the list it should prevent this, not sure why it's happening though.
Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/
Edit: No floats http://jsfiddle.net/BsGfu/2/
This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.
If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).
After some changes to our site, we are seeing that when certain pages are loaded, the page quickly changes width. This occurs every time on webkit browsers Chrome and Safair, but only rarely on some other browsers.
I have not been able to produce the effect at all on Firefox on Windows, Firefox on Mac, nor IE9 and IE11. It seems to rarely occur on IE8 and IE10. I have not found a pattern yet that causes it to appear on IE8 and IE10.
To understand what might be causing this, it would be good to know if certain styling attributes take an initial value while the page is loading but them assume some other value by the time the page is fully loaded. This could explain what is happening.
I should add that this problem developed after some changes which "should" not have caused this issue. Basically having to do with adding URL rewriting to eliminate duplicate pages. Clearly some side effect is operative.
At the moment we only have the code on development servers, so it would not be that easy to actually see it right now, although that is the obvious first question from a responder. So at this point, the question is more "what generically causes pages to reformat under Webkit."
UPDATE: the problem seems to be traced to Google Translate. When I remove that from the page, the problem goes away. Put it back; problem comes back.
Oddly, it mostly impacts Chrome! IE10 and 11 are exempt, and with even earlier IE versions the problem is much less.
I can readily demonstrate the temporary widening of the page just by reloading the page.
I experimented with trying to put the div containing the translate div instead a container div and setting some attributes on that. So far I have not found something that mitigates the problem.
We have suppressed Google Translate recently because it started adding other junk to the bottom of the page. That other junk is gone but we will continue to suppress it due to this new jumpiness.
I believe there is some clever way to contain the issue, but have no more time for it.
I have confirmed that the issue is definitely caused by Google Translate being on the page.
I'm currently creating a website, which has an div called Aside. This is basically an aside part of the website.
I'm including it to my index.php.
There is nothing serious about it, however I have a huge problem. I have had everything working yesterday. Today when I visited the website in my Firefox browser, I have just happened to see that the Aside div has completely disappeared. When I get Firebug to inspect the Aside div, it show me that div greyish. So I guess it means that it is not displayed.
I have searched for every "display:none" in my document, but I didn't find any which relates to the Aside div.
I have tried it in Internet Explorer and I got the same problem there as well. However I have tired it in Chrome and it has worked prtyy well, it showed everything.
Than I have tried it in my Virtual machine's browsers and all the 3 browsers were showing the aside div.
I have also tried it on my VPS and it was okay there too!
So what the hell could happen with my browsers or my code, that it does NOT display ONLY the aside div? What can be the problem?
I have never seen anything like that, because it was okay yesterday and today its bad...
Any help would be appriciated.
And I have also tried to delete my history and everything, but its the same.
Disable AdBlock / AdBlock Plus in your copy of Firefox, or give the div another ID / class as a quick fix. The reason I thought of this first was because I had a much more blatant ID of "advert" on a div which I only noticed got blocked in a copy of Firefox which had AdBlock Plus installed when I was testing the site out.
A more permanent fix, if you intend to keep using AdBlock, would be to remove the name of the div that got blocked from the list of keywords / filtering rules that you're using.
An image is worth 1024 words, right? so I tried to post some images but I don't have enough reputation, so it's going to be a little more difficult to describe with words, but I hope that someone can help me.
The thing is that I have a table that shows misaligned only under Windows, no matter if using IE8, Firefox or Chrome. Under Linux the table shows fine in Firefox and Chrome. So, I used the IE8's development tools and find out that the margins are set to 0, and if I disable the margins the table shows almost fine (top margin gets some value) but the right margin now shows aligned. Then if I apply margins again the top margin gets set to 0 and the right margin stays fine, and the table shows as it is meant to.
The weirdest part of all is that it works fine under Windows and Linux for other clients of the application, but for one particular client it just does not. The code does not depend on the client.
Edited:
The code is not something I'm writing, It's already written, like ages ago, and I have to fix some parts. It's a very large and complex application, with sensible data, so I have to obscure some of the code and the images, sorry for that, but now I've isolated the problem.
You can download the code and test it locally. You'll find out that the table shows misplaced only under Windows in any browser.
In order for you to understand what exactly the issue is, I'm posting 2 links. One of them is a code that shows fine, the other one has the issue. Both of them should work fine since it's the same application. I hope this is more clarifying. Look at the misaligned table, go to the development tools in IE and watch the margin values, then watch what happens when the margins are disabled and enabled again.
https://docs.google.com/file/d/0Bxz1pQbINNQKbDRHYXFxUFk1aFU/edit
https://docs.google.com/open?id=0Bxz1pQbINNQKYi1icEM4dFlGeW8
I had to remove the previous link to the images because I can upload only 2 links due to my privileges, but now you have the code, so it wasn't going to be that useful anyway. Maybe you might want to see the pics:
Well... The problem was nothing else that the dots in some ip numbers!
It was difficult to spot because not all data had ip numbers.
The solution could be to change xxx.xxx.xxx.xxx for xxx-xxx-xxx-xxx or something like that.
I hope it's useful for someone else.