1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Unknown Chrome CSS incompatibility

Discussion in 'Web Design & Development' started by BlackFrancis, Aug 7, 2018.

Thread Status:
Not open for further replies.
Advertisement
  1. BlackFrancis

    BlackFrancis It's My Birthday! Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    212
    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.
     
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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??
     
  3. BlackFrancis

    BlackFrancis It's My Birthday! Thread Starter

    Joined:
    Oct 21, 2006
    Messages:
    212
    Hey, thanks Jim!

    For some reason you're seeing a missing hyphen, yet it's there in my CSS file upload_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.
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,220
    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 ...
     
  5. colinsp

    colinsp

    Joined:
    Sep 5, 2007
    Messages:
    2,205
    First Name:
    Colin
    That float is not valid. inline-start is not in the CSS definition for float. Try using the clearfix code.
     
  6. tecknurd

    tecknurd

    Joined:
    May 28, 2018
    Messages:
    68
    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.
     
  7. Sponsor

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 733,556 other people just like you!

Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1214126

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice