On this website: I've the following problem in Safari:
When clicking the 1st time on "KUNDEN" in the navigation, the complete header is invisible. In the dev console I saw, that the content of the header is already loaded - also in the source code.
But the content is not appearing until reloading the page or marking everything (STRG+A).
Does anybody have an idea, why this is happening? Could it be a Typo3 bug?
look at that screenshot:
I'm using Safari 6.0.5 on Mac 10.8.4.
You forgot to close a div tag.
Line 72:
<div style="clear:both" </div></header><div id="content">
should be:
<div style="clear:both"></div></header><div id="content">
See all W3C Validation errors:
http://validator.w3.org/check?uri=http%3A%2F%2F99-ideas.de%2Fhallo.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Related
I have following code in my WordPress website:
<div class="col-xs-12 col-md-5"><img class="img-fluid m-b-2" src="https://bwt.phpag.com/pimData/Images/hc/21/4245243.png"><img class="img-fluid m-b-2" src="http://localhost:8080/geha-printing/wp-content/themes/geha-printing-wordpress/images/geha-logo.png"></div>
My page: http://www.geha-printing.com/products/?Article_Number=4245243
First picture from external source (https) is not shown, second is shown without any problem. Do you have any idea why, or what can I do?
Issue is only in Microsoft Edge. IE, Firefor, Opera, GoogleChrome, Safari are OK.
This must be an issue with your browser. I just checked, and everything looks perfect in Edge, Chrome and Firefox.
You might try to clear cache or re-install Edge
This is a weird "bug", I cant reproduce it always, but on the fiddle test case seems to fail more often. This is ONLY showing in chrome/windows, I couldn't reproduce it in IE at least and someone confirmed it doesn't happen in chrome/Linux.
The fiddle: http://jsfiddle.net/u25zr/2/
As you can see, text is not horinzontally aligned.
A weird thing: if you right-click on the text, click "inspector tools" and untick/tick again the font-family property, it magically fixes.
I attach an image so you can see what should happen:
Since I used a jsfiddle link, I need to add a code block also, so ill just add the markup, which is not related at all...
<div class="recipe">
<div class="recipe-top">
<div class="category">Text</div>
<h2>Test Recipe 1</h2>
<div class="date">12 Jan 2013</div>
</div>
</div>
EDIT: Moving the SVG font to the bottom so Chrome uses the woff instead of the svg fixes the problem. So it looks like the problem its in the SVG rendering.
Well, after some wasted hours this seems to be a (another) chrome bug.
https://code.google.com/p/chromium/issues/detail?id=95102
And i also found a solution here:
Chrome svg-Font-Rendering breaks Layout
Which is good, but doesnt validate CSS. Anyway nothing else we can do.
I have a page with two html files. I have exactly the same code for the footer in them. They use exactly the same CSS file but they look different and I still cannot find out why :
The code is here for the footer :
<div class="container_12">
<div class="grid_12"><footer>
<div class="socials">
facebook |
twitter |
google+
</div>
<div class="copy">COSMOSET © 2013 | Privacy Policy <!--{%FOOTER_LINK} -->
</div></footer>
</div>
</div>
Also if you visit the page here: HERE you can see the text-box-areas do not have the same transparent white background. I assume this one is a server issue (plesk). Because when i open the file on my PC (saved on my PC) it looks perfect.
If you go to the second link from the left (of your navigator) you can see that you have the following DOM structure:
The problem is that, on the page your provided in your post, the footer is a sibling of the <header>, <div class="clear"> and <div class="bg1"> elements, as you can see it in the following screenshot:
Your problem will get solved if you move the "container_12" to be a sibling of the elements I mentioned above.
LATER EDIT:
To answer your second question, for the #form textarea CSS selector you've added an extra . after the png extenstion:
The problem is that if you get in there
http://d4403897.u95.gohsphere.com/login.aspx
with google chrome the Facebook login button will apear , but if you get in with firefox it will dissapear !?
The Code to show this button is
<div id="fb-root"></div>
<div class="fb-login-button" data-show-faces="false" data-width="200" data-max-rows="1"></div>
Try just <div class="fb-login-button"/> and see if it works. Then add each parameter and try it. I just tested your code in my firefox, and works with no problem.
I had this problem too, the button didn't show up in firefox.
The solution for me was that I have deleted all the history.
I've a page whose styling gets messed up in Chrome (no problem for Safari and others). It seems that it inserts for a reason some strange whitespace in the HTML that ruins my layout at the top of the page and in other places.
If I choose to see the source of my PHP page, what I see is:
<body><div id="header-outer">
<div id="header" class="container">
<div class="row">
<div id="site-logo" class="span5">
<img src='logo.png' />
</div> ... etc ...
(I've modified the PHP to have no space whatsoever between BODY and DIV). But when I open the developer tools what I see is:
<body>
"" <- why?
<div id="header-outer> etc. etc..
If I manually delete the "", the layout just goes fine. What is happening here? I'm puzzled.
EDIT: you can see the page at http://bit.ly/ZkZxVG
EDIT: I've tried to disable all extensions, but with no effect on my issue.
Hint: I'm using bootstrap and JQuery. Could they mess with the code?
It's really weird, you might have some undesired char within your file, try removing <body><div id="header-outer"> and rewrite it down.
Try encoding your file with utf8 No BOM too and see if it resolves the problem.
More infos about utf8 BOM here.
Edit
Thats not white space, they must be a physical charter in there. This might not be displayed on your screen, but just press delete and backspace until you have the next element in your markup.
white space in HTML is completely ignored by the browser, it does not render it. Looking in Firebug you have "" rendered when editing the item.