Unknown Chrome CSS incompatibility

Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

BlackFrancis

Thread Starter
Joined
Oct 21, 2006
Messages
233
Hi there,
I don't like Chrome, so never used it. I opened my blog/magazine just now by chance and saw an unsightly incompatibility I can't identify or even solve. CSS still gives me headaches at intermediate level tasks, so any pointers are appreciated.

FIREFOX
upload_2018-8-7_23-15-35.png

CHROME
upload_2018-8-7_23-16-9.png

THE HTML
Note: I use Wordpress, so there are WP hooks in the code. I may have to explain some.


Code:
    <div class="entry-content">
    <div class="postinfo"><?php the_title( '<h1 class="posthead">', '</h1>' ); ?><div class="postimg" style="background-image: url(<?php if ( has_post_thumbnail() ) {     the_post_thumbnail_url();}         ?>);"></div></div><div class="author-info">

<?php twentysixteen_entry_meta(); ?>
        <?php
            edit_post_link(
                sprintf(
                    /* translators: %s: Name of current post */
                    __( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
                    get_the_title()
                ),
                '<span class="edit-link">',
                '</span>'
            );
        ?></div><?php
        
            the_content();

            wp_link_pages( array(
                'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
                'after'       => '</div>',
                'link_before' => '<span>',
                'link_after'  => '</span>',
                'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
                'separator'   => '<span class="screen-reader-text">, </span>',
            ) );

            if ( '' !== get_the_author_meta( 'description' ) ) {
                get_template_part( 'template-parts/biography' );
            }
        ?>
    </div>
THE CSS
Code:
.entry-content {
    float: none !important;
    width: 100% !important;
}
.postinfo {
    padding: 11px;
    margin-bottom: 10px;
}
.author-info {
    float: inline-start;
    margin-top: -351px;
    border-top: none !important;
    margin-left: 62%;
}
I think that's everything relevant. The page itself.

Any ideas what's going on here?

Thanks for your time.
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
Happy Birthday Chomma!;)
The rendering of the text underneath your author-info, is probably due to the lack of a hyphen between inline and start in your css at l577
- should read:
Code:
float: inline-start;
not
Code:
float: inline start;
Fix it and see what happens ...
BTW this rendering is the same on my Chrome and FF browsers, except I don't seee the Edit link in either??
 

BlackFrancis

Thread Starter
Joined
Oct 21, 2006
Messages
233
Hey, thanks Jim!

For some reason you're seeing a missing hyphen, yet it's there in my CSS fileupload_2018-8-8_9-8-44.png

At this rate I'm just going to have to raise the cash for someone to emulate my site from the ground up. Wordpress is instituting a ridiculous new Web 3.0 or whatever style text editor that reminds me of a Nanny State filing down the sharp edges so I don't hurt myself.
 
Joined
Dec 15, 2011
Messages
3,397
First Name
Jim
I saw it in web-dev tools (chrome) ...
TSG-Howard.png
However, you might try adding a new class (e.g. 'clear_both')
Code:
.clear_both {
    clear:both;
}
and placing it just before the mis-aligned <p>aragraph;) - that ought to stop it aligning to the right of the picture ...
 
Joined
Sep 5, 2007
Messages
2,306
First Name
Colin
That float is not valid. inline-start is not in the CSS definition for float. Try using the clearfix code.
 
Joined
May 28, 2018
Messages
154
Using layering elements on a web page won't always show that same thing from one web browser to the next. Use tables instead.

Go to the following to learn about float and the clearfix code.

https://www.w3schools.com/cssref/pr_class_float.asp

No one cares that you don't like a web browser compared to other web browsers. You are a web developer that is required to make their site work for every or just about every web browser.

I think you can fix the code without having to hire someone to do it for you. You can go to wordpress.org forum. Someone there should be able put you in the right direction to fix your code.
 
Status
This thread has been Locked and is not open to further replies. Please start a New Thread if you're having a similar issue. View our Welcome Guide to learn how to use this site.

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 807,865 other people just like you!

Latest posts

Staff online

Top