after searching and trying for about 2 hours I decided to ask you. If I call my website with Google Chrome or Safari I do not have this issue.
But if I call my website with Mozilla Firefox, I see a little white space between my 3 social media links and the next row.
Test it by yourself. Does it works with Chrome/Safari and does Firefox have a problem?
https://gamekeys-shop.de/
Can somebody tell me how I can fix that? - I do not understand why there is a difference between those browsers...
Greetings and Thank You!
You need to remove the display: inline-block; from the following selector: a.ubtn-link
Every browser has its own default stylesheet. Try using CSS reset (resets default CSS) and your problem should be solved.
To use CSS Reset, include the following source file in your web page:
at BODY tag set the line-height to zero.
like this:
<body class="home page-template-default page page-id-14 gecko osx wpb-js-composer js-comp-ver-5.0.1 vc_responsive" style="line-height:0;">
Or do it in your custom .CSS file.
Related
On one of our websites, we use a font from typotheque.com by importing it as follows:
#import url( "http://fonts.typotheque.com/WF-XXXXX-XXXXX.css" );
The font is displayed correctly on Chrome and the like. In Internet Explorer 11 on Windows 7, the font is rendered, but the width of it is not correct. It seems as if the width of the text is rendered before the font is applied.
As a consequence, the text gets overlapped and the words are not wrapping accurately:
On Chrome, the font width is calculated and the words are wrapped correctly:
Other things we tried:
We followed the instructions here on typotheque.com
We made sure to link the css files prior to the javascript files, as stated here.
Any hints or pushes in the right direction to solve this issue are much appreciated. You can find the website here: http://www.claireundgeorge.ch/fr/
Edit:
Added word-break: break-all; : no change
Removed all the font-awesome-stuff: no change
When you compare what is calculated in FireFox with what is calculated in IE you can see whats the bad boy here.
In IE the padding-bottom property of the h2 is 4px.
When i uncheck this property it looks fine for me.
I cannot upload pictures here due to the stupid reputation limit thing but i hope i descriped it good enough...
I also have typotheque webfont + IE problem. My workaround for now is a bit dirty: I use jquery $(window).load to adjust element padding by 1px, and then IE redraws the font correctly.
I'm relatively new to HTML and CSS so with a bit of luck there is an easy fix to my problem.
I have a few images for my site, 1 as a background image and 2 which are just sitting in the body. In safari everything displays flawlessly however in Chrome, Firefox and Opera only 1 of the images in the body displays.
I've tried searching for answers, the only suggestion that I can find is to disable ad-block which resulted in no-change.
I've also tried disabling the stylesheet but the problem still persists.
<div class="photocontainer" id="homepage"><h4 id="phototext">A Guide to Quality Web Development</h4></div>
<div class="Body">
<h2>We're here to <Span>help.</Span></h2>
<img id="plan" src="./images/plan.jpg" alt="plan">
<img id="flowchart" src="./images/flowchart.jpg" alt="flowchart"/>
The above code contains the 3 images. The second of which is the only one that works.
I should mention that the photocontainer div has a background-image specified by the stylesheet.
Option 1:
I suggest changing you src codes.
From src="./images/plan.jpg"
To src="plan.jpg"
Option 2:
Add width and height codes to your <img> tags.
Option 3:
Try removing the id from one of the <img> tags.
I hope one of these work. Try to mix them around. Like removing the id and adding the width and height too.
Found the problem!
The images themselves had trouble opening. Opened them in photoshop and then saved for web. Not it works.
I have following code in header.php file on a WP theme :
<style type="text/css">
#Subheader{display:none;}
</style>
This code hides a div with id="Subheader" which works fine in Chrome and Firefox, but not in IE 8. When I look at source code in IE, the code is there, but its not hiding the div.
Also I have similar code :
<style type="text/css">
#Footer, .lwa-submit-links {display:none;}
</style>
in a page from wp-admin page editor, which should hide the footer div when that page is opened. Again its not working in IE.
Any Help would be appreciated.
This sounds exceedingly like a long standing bug in IE, whereby trying to hide an element using display:none didn't work if it's parent container was already display none. When the parent was re-shown, the child also became visible even though it was still display:none.
The problem is described and demoed in an interesting site: Position is Everything, about browser bugs. The full link for this problem is http://www.positioniseverything.net/explorer/ienondisappearcontentbugPIE/index.htm.
However it was apparently a thing which affects IE in Compatibility mode (set from Tools/Compatibility settings); I don't know if you happen to be running in that mode? Even if not it might be well worth while playing around with the sequence you set things to display none to see if that will fix your problem.
I've been trying to achieve cross-browser functionality for a drag/drop input file, i've come pretty close but this last thing i can't quite figure out. As the title says, it's working just fine in Chrome / IE but in firefox it's not behaving the same. I've left out the drag/drop functionality in my fiddle for simplicity as it's not relevant to the problem.
<div class='browseWrapper'>
Drag & Drop Images Here</br><em>Or click to browse.</em>
<input class='browseImage' type='file' />
</div>
Here's what i've got so far: http://jsfiddle.net/sPJ9u/
Thanks in advance.
EDIT: Sorry i should have been clearer in explaining the problem. If you inspect the input element in firefox you'll see that the overflow:hidden isn't hiding the overflow as it does in Chrome / IE, causing the offset to be out.
Firefox Version: 26
Check out this related question: Why does overflow:hidden not work in a <td>?
It's because you have display set to table-cell, which makes it behave as if the div is actually a td.
You can use this structure in your css:
-moz-overflow:hidden;
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).