The avatar in the comment component of semantic-ui got distorted unpurposely - semantic-ui

I'm trying to use the comment component from semantic-ui, but the avatar of which seems like got distorted.
The minimal working demo code is here: https://gist.github.com/cnnblike/5491ac2d4ce5d2205dbafcc5f51b8127
Do you have any idea what's actually going wrong?
This code works strangely on Chrome and IE but totally okay on fiddle here:
jsfiddle.net/9gmzvk2p/6/embed
the result behaves like this:

just compare the iframe page and the local page one bit by one bit, and find the at the beginning is the answer to the difference.
So the problem got solved, finally.

Related

CSS fixed background issue when scrolling

So i recently got this CSS style for Facebook which is acting really wierd.
It's using a fixed background image and whenever i scroll it's doing this:
Click
Wierd thing is: This occurs on every style with a fixed background, if i completely remove said background the site works like a charm.
Still, I have no idea if it's just faulty code that causes the problem or if it's the browser itself.
I'm not that good at CSS but if I knew where to search or what could cause the issue, I could probs fix it myself.
Sooo... If anyone wants to take a look at the code, here it is: Click
Thanks in advance to anyone who decides to put up with my shit, heh
edit: changed link to Dropbox temporarily

weird css-issue in Firefox, goes away when inspecting element

on a site I built I have a strange issue.
Until recently a specific menu was working like I expected.
But today I saw there goes something wrong on Firefox for Mac now.
I checked the site Safari and Chrome for Mac, an no problem there.
The weird thing that happens is that the links in the menu drop out of sight, except the one page that has childpages (which are not shown in this menubar).
So I think: I will use the 'inspect element' to see if I can find the problem. But the second I inspect an element the menubar looks like it should. I close the inspector and it is back to trouble again.
Any tips or insights would be helpful!
The site is http://www.wij30.nl
Okay, I fixed it, well actually I found a work-around.
The point was not that the only link that was shown was one that had child-pages. It was the one link that consisted of more than one word. And for some obscure reason it broke into 2 lines in Firefox38 for Mac. ("over WIJ" in the first line and "3.0" in the second line). Moving all the items that contained only one word down the line.
Adding some none-breaking spaces in the menu label fixed the problem for now.
But like I said: really a work-around not really a problem-solver.
If someone can tell me why Firefox38 for Mac made this happen: please tell. Thanks!

CSS position between Win / Linux / Mac Logo Position

i've a little bit trouble to fix one thing, may you could help me out with it?
I try to make Chrome/Firefox works with a Logo sliding problem. You can see here the first pci is how does it looks like in win with chrome or firefox. IE looks normal like the second pic.
What did i wrong in the code? many thanks in advance.
http://abload.de/img/bildschirmfoto2013-067oqb8.png
http://abload.de/img/bildschirmfoto2013-06u6rho.png
I can't tell you unless I see the CSS. Post the css on something like pastbin.com or if it isn't real long then add it to your question and then you are likely to get some answers, but I can't tell you what is wrong with your CSS from a picture of the results. Too many possibilities.
Now I'm wishing I had asked for a demonstration instead. Am I correct in thinking that the text is part of a horizontal menu and the logo is completely separate and not contained by the text container at all? If this is the case and the image looks and behaves like you want then perhaps it is the menu that needs tweaking to get it to match up correctly. At first I was thinking this was something like a div containing text and an image or having an image as a background.
If you could go ahead and post a link to a page or a pastebin or something that has the html and the css for the menu and the logo together then I'll try it out myself and see if I can find the solution. Someone else may already see it, but I'm still not seeing the clear picture of your situation or a resolution to your problem yet.

Site visualization problem with Chrome

I have a site based on Solar Sentinel Joomla template: www.sism.org
I'm having some visualization problem with chrome.
The right side-bar is shifted down after all the content, while it should be floating on the right!
Could someone explain me why?
PS: the template css is pretty messy, and there is some custom css and js made by me inline at the beginning of the page.
The HTML is throwing a lot of validation errors: http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sism.org%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
My guess is that Safari and Firefox are rendering around these errors in a way that is according to what you would expect. Try fixing the errors and seeing what happens. If nothing else, you'll have ruled out invalid HTML as the issue.
It looks like your div class="col3" is inside your div class="colright".
Try placing div class="col3" outside the other one.

drupal - problem with quicktabs

Hello
I have quite a strange problem using quicktabs. I used the framework theme to develop a custom look for my site. I used quicktabs in the center content area to create a tabbed look for placing links within the body. Everything is working fine. However, when I view the site in IE8 at a resolution if 1024*768, I have trouble with a few links. It seems that sometimes the first link under my buttons are difficult to click. The link is there - I can actually click it, but it is very difficult to locate - it only appears at the very beginning of the link text - it is not the first letter, it seems to be only the first pixel.
I looked at the source and everything seems to be correct - I can't figure out what could be wrong.
Has anyone seen any similar behavior that might be able to point me in the right direction for a fix for this?
Thanks for any thoughts.
Edit - I looked further into it and I think it has something to do with my CSS. I disabled css in ie8, and every link is clickable, even the ones that were difficult to locate earlier. I guess there must be an overlapping of containers or something, so I will have to start messing around with those files.
It sounds like a CSS thing, have you inspected the elements in question using the developer tools (press F12) to see whats going on?
I found the solution. In the style.css file for my theme, the .block had position: relative; applied to it. removing that bit of themeing appears to have fixed the link issue.
Thanks

Resources