Has anyone noticed a change to the rendering in the latest Chrome on Windows (22.0.1229.94 m)?
On page
http://worldwide.espacenet.com/
we had until recently (and have in IE8/9, FX16/17, Safari 5)
and in Chrome (22.0.1229.94 m):
The CSS starts with YUI Reset CSS version: 2.5.1
Here is the relevant html
<div class="epoBar epoBarAction">
<div class="secondary">
<div class="epoBarItem">
Clear
</div>
<div class="epoBarItem epoBarItemForm">
<div class="formElement">
<span class="inputsubmit">
<input type="submit" class="submit" name="Submit" value="Search">
</span>
</div>
</div>
</div>
</div>
Weird behaviour: If I inspect element and toggle the float:left below twice, the buttons align as they should
div.epoBar div.epoBarItem {
float: left;
min-height: 1.67em;
padding-bottom: 0.42em;
}
Also if I add width:150px to the div with class="secondary", it also aligns.
Is there anything obviously weird or is there a known new bug I have missed in Chrome?
Hope someone will be so kind and inspect the page
Font rendering
Google chrome renders fonts differently to other browsers on windows to allow it to install without needing admin privileges. A pain, I know, but they outweigh ease of install over needing admin rights for antialiasing. That said, the font may be overflowing the width of the container you are putting it in, and should fixable by adding a larger width to the container, or removing it entirely. Also using ems rather than px will give different font sizes across browsers.
Related
I am working on my website at the moment. And I realized, when looking at the mobile site that one of my images stretches/changes it's aspect ratio. Keep in mind this is only on iPhones. I had a few friends look at the site, and only the people with iPhones had the image stretched like this.
This is the page on the browser
This is the page on my iPhone 11
<div class="col d-flex d-md-flex d-xl-flex justify-content-center align-items-md-center">
<img class="d-xl-flex align-items-xl-center" src="assets/img/headshot.jpg" style="max-width: 90%;">
</div>
I originally had height: auto; in there as well, and when trying to solve this issue I found an older post saying that could be the issue. Sadly it did not resolve it.
I know I can easily solve this problem with media queries, but there must be a reason why this happens only on iPhone. I also only have in body styling on this image, you can see it on the browser preview on the inspector.
If you would like to look at it yourself. The Website URL is https://www.robinalexander.at/about-me
Try to remove the classes d-xl-flex align-items-xl-center from img and give it a display: block. The parent div will keep the img in place
Recently, a visitor complained about some DIV overlaying the page content.
A popup that actually only should display when the mouse hovers over its container:
<td class="ref" id="myContainer">
<div>link text</div>
<div style="position:absolute;width:200px;background-color:white">
<?php include 'div-content.php'; ?>
</div>
<style type="text/css">#XcatContainer > div { display: none } #XcatContainer > div:first-child, #XcatContainer:hover > div { display: block }</style>
</td>
works like a charm in all my browsers on Windows 10 and Linux including IE11. However, it does NOT work in IE11 on Windows 7 (and IE 6 on Vista).
Now I´m considering a browser switch to disable the popup in those browsers. I could use [!if IE]; but I guess I need JS or PHP to only add that on older Windows.
Or could some reformatting make it work?
You'll indeed need PHP to filter out the OS from the UserAgent.
There's more info in this answer by Funk Forty Niner.
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
I am using the Facebook Like social plugin on my website, and every time the page loads, the plugin stretches the height of the div it is in until the plugin has loaded.
I did define the height of the div that the social plugin is in, but even though the height stayed the same, you could still see the shift. I am also using the Twitter and Google plus social plugins - this makes the shift more noticeable since they get shifted also (shift under the h3 heading).
.socialBookmarks {margin:30px 0;padding:5px 15px;overflow:hidden;}
.socialBookmarks .social-wrap
{display:inline-block;vertical-align:middle;}
.social-wrap .ezimageBox {float:left}
<div class="socialBookmarks">
<h3 class="inline-block">Share:</h3>
<div class="social-wrap clearfix">
<div class="ezimageBox">
(loads twitter social plugin)
</div>
<div class="ezimageBox">
(loads google plus social plugin
</div>
<div class="ezimageBox">
(loads facebook social plugin)
</div>
</div>
</div>
Anyone have any ideas on how to work around this problem? :)
Setting the width and height of the wrapping <div> (in your case, .ezimageBox) usually does the trick for me.
Try this:
.social-wrap .ezimageBox {float:left, width:100px, height: 20px; overflow:hidden;}
Does it still flicker?
Take a look at this page in FireFox. Feel free to navigate to any of the top six product categories to see more of the same type of code.
If you are [un]lucky enough to see the glitch, you will see at least one product box expand it's height to epic proportions.
Here is the code:
<div class="product_category">
<a href="../products/dht_1500.php" style="height: 340px;">
<h3>DHT 1500</h3>
(superfluous HTML omitted here)
</a>
</div>
Here is what Firebug reveals:
<div class="product_category">
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
<h3><a _moz-rs-heading="" style="height: 340px;" href="../products/dht_1500.php">DHT 1500</a></h3>
(superfluous HTML omitted here)
<a style="height: 340px;" href="../products/dht_1500.php"> </a>
</div>
You can see FireFox is definitely closing my tags and re-opening them again, and pulling the custom CSS height style along with it, which is resulting in each product box height skyrocketing. Also note that strange _moz-rs-heading="" bit.
I suspect my problem has to do with my using block HTML elements within an inline tag, but I thought I solved that problem by converting the tags to block formatting in my stylesheet:
.product_category a {
display: block;
}
FireFox is playing favorites to my tags. It usually renders the page like I want it, but then every once-in-a-while, it will blow one of my product boxes sky-high, and seemingly at random.
The pages work properly in Internet Explorer and Safari. I have been testing it with FireFox 3.6 on Mac, but have seen the same problem on FireFox for PC.
Having block level elements (h3) inside an inline element (a) is not valid HTML.
Change your block elements to a span and use CSS to style it how you wish.
A similar question with the exact same symptoms was asked a few days back. The solution there was in fact taking the native block elements out of the natively inline ones. Seems changing display doesn't help in this case.