1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

header > img not selecting working

Discussion in 'HTML & Website Design' started by CactusWren, Jul 21, 2020.

  1. #1
    On my website*, I can't select a particular image (in order to style it to width: 180px). Note that it is currently the right size because I was forced to use inline style, but I want it be controlled with CSS.

    It is an img inside of a header parent, but:

    header > img

    doesn't select it. Neither does img#logo (an id I put on it).

    Weirdly, this works perfectly both when directly opening the site from my C: drive and while opening it using my ampps local host, also on my computer. The site is being hosted at SiteGround. I have to admit I've had some strange little issues with sites there before, maybe due to caching (although I thought I turned all that off).

    *can't post links, I guess? it's at bonafidebankruptcy . com
     
    CactusWren, Jul 21, 2020 IP
  2. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    136
    Likes Received:
    41
    Best Answers:
    5
    Trophy Points:
    85
    #2
    Can you post your HTML code here. Just the part you're trying to style.
    Also post your css code.

    But generally, it could happen if your css file is not being loaded properly. Try putting the css styles in the <style></style> tag in your HTML file and see if it works. If it does, then the problem is the way you added the external css file.

    If it doesn't, then you must be selecting the wrong element, so I'll have to see some code
     
    Efetobor Agbontaen, Jul 21, 2020 IP
  3. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #3
    You were right, when I put the <style> in the head, it worked. Here is the working code, including the bottom part of <head> that includes the new style. the <style> part is new but everything else is the same. I'll put the CSS beneath it, with the img part bolded. The weird thing is that it seems to be taking the rest of the css fine. Although... I have to admit, there have been tiny discrepancies here and there that I haven't hunted down yet. There tend to be minor differences between my local version and what shows up online.

    <style>
          header > img {
    width: 150px;
    }
    </style>
        </head>
      
      
        <body>
      
        <header id="top">
            <img src="images/logo.png" id="logo">
            <h1>Bona Fide <span class="contrast">Bankruptcy</span></h1>
            <nav class="grow">
                <ul id="mainMenu">
                    <li><a href="tel:1-800-975-6441"> 1(800)975-6441</a></li>
                    <li><a href="#icons">Services</a></li>
                    <li><a href="#your-attorneys">Your Attorneys</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
        </header>
    Code (markup):
    *******
    CSS Code below

    /* RESET */
    /* null margins and padding to give good cross-browser baseline */
    html,body,address,blockquote,div,
    form,fieldset,caption,
    h1,h2,h3,h4,h5,h6,
    hr,ul,li,ol,ul,dl,dt,dd,
    table,tr,td,th,p,img {
        margin:0;
        padding:0;
    }
    img, fieldset {
        border:none;
    }
    * {
        box-sizing:border-box;
    }
    [USER=124521]@media[/USER] (max-width:450px) {
        /* Fix for pre "viewport <meta>" mobile browsers */
        * {
            -webkit-text-size-adjust:none;
            -ms-text-size-adjust:none;
        }
    }
    html, body {
        height:100%;
        scroll-behavior:smooth;
    }
    /*  END RESET */
    /*  START TYPOGRAPHY */
    body, button, input, table, textarea, select, figcaption {
        font:normal 1em/1.5 "Roboto",arial,helvetica,sans-serif;
        color:#002e63;
    }
    h1 {
        font-family: "Roboto",arial,Helvetica,sans-serif;
        font-weight:bold;
        line-height:1.1em;
    }
    h2, h3 {
        font-family: "Roboto",arial,helvetica,sans-serif;
        font-weight:normal;
        line-height:1.1em;
    }
    span.contrast {
        color:royalblue;
    }
    span.contrast:hover {
        color:deepskyblue;
    }
    h2 + p {
        margin-top: 1em;
    }
    /* EFFECTS */
    .grow { transition: all .5s ease-in-out; }
    .grow:hover { transform: scale(1.05); }
    /* HEADER SECTION */
    header {
        display: flex;
        align-items: center;
        padding: 0;
        border: 1px solid gainsboro;
        margin: 5px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    }
    header > img {
        width: 180px;
    }
    h1 {
        margin: 0 .25em;
        transform: skew(-5deg);
        font-size: 4em;
    }
    nav {
        /* padding-right: .7em; */
        width: 65%;
        display: flex;
        justify-content: center;
    }
    nav>ul{
        display: flex;
        list-style: none;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    }
    nav>ul>li {
        background-color: royalblue;
        color: white;
        padding: 2em;
        text-align: center;
    }
    nav>ul>li>a {
        text-decoration: none;
        color: white;
    }
    nav>ul>li:hover {
       color:white;
       background-color: deepskyblue;
    }
    nav>ul>li>a:hover {
        color: inherit;
    }
    /*
    nav>ul>li>a:visited {
        color:#002e63;
    }
    */
    /* SPLASH SECTION */
    .wrapper {
        display: grid;
        grid-gap: 10px;
            grid-template-columns: 1fr 1fr 1fr;
            background-color: #fff;
            color: #444;
            margin: 5px;
        }
        .box {
            border-radius: 5px;
            padding: 10px;
            }
          
        .a {
            grid-column: 1 / 3;
            grid-row: 1;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
        }
        .b {
            grid-column: 3 ;
            grid-row: 1 / 3;
        }
        .c {
            grid-column: 1 ;
            grid-row: 2 ;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .d {
            grid-column: 2;
            grid-row: 2;
            display: flex;
            justify-content: center;
            align-items: center;  
        }
        div > ul > li {
            text-align: left;
            padding: 1em;
        }
    div#how1 {
            padding:1em;
            margin:1em;
    }
    p + p {
        margin-top: 1em;
    }
    section#banner > div.column > figure {
        border-radius: 5px;
        position: relative;
        top: 25px;
        left: 20px;
        display: inline-block;
    }
    figure > img {
        border-radius: 5px;
    }
    img {
        max-width: 100%;
        height: auto;
    }
    figcaption {
        margin-top: 1em;
        text-align: center;
    }
    a#contact-button {
        font-family:"Roboto",arial,helvetica,sans-serif;
        text-transform: uppercase;
        text-align: center;
        font-weight:bolder;
        font-size: 1.3em;
        background-color: royalblue;
        color: white;
        border: 1px solid gainsboro;
        padding:.5em 1em;
        outline:none;
        text-decoration:none;
        /* border-radius:5px;  */
        display: inline-block;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    }
    a#contact-button:hover {
        background-color: deepskyblue;
    }
    /* ICON SECTION */
    .icon-wrapper {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: 24.5% 24.5% 24.5% 24.5%;
        background-color: #cdddee;
        color: #444;
        margin: 8em .5em 8em .5em;
        padding: 4em 0;
    }
    .icon-a {
        grid-area: 1 / 1 / 2 / 2;
    }
    .icon-b {
        grid-area: 1 / 2 / 2 / 3;
    }
    .icon-c {
        grid-area: 1 / 3 / 2 / 4;
    }
    .icon-d {
        grid-area: 1 / 4 / 2 / 5;
    }
    div.icon-box {
        padding:1em;
        text-align: center;
        border-radius: 5px;
    }
    .fas, .far {
        padding: .5em;
    }
    h3 + p {
        margin-top: 1em;
    }
    /* FIRM SECTION */
    div#firm {
        margin: 5em 0;
    }
    .fa-calendar-times,div.wrapper>.box>.fa-building,.fa-car-side,.fa-heart {
        background-color:#cdddee;
        border-radius:50%;
        margin-bottom: .5em;
    }
    .how-a {
        grid-area: 1 / 2 / 2 / 3;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .how-b {
        grid-area: 2 / 2 / 3 / 3;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .how-c {
        grid-area: 2 / 3 / 3 / 4;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    .how-d {
        grid-area: 1 / 1 / 3 / 2;
        padding: 2em;
    }
    .how-f {
        grid-area: 1 / 3 / 2 / 4;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }
    /* COPY SECTION */
    section#how-to-get-help {
        display:flex;
        align-items:center;
        padding:2em;
        margin: 8em 0;
    }
    .column {
        width:50%;
    }
    img#couple {
        max-width:80%;
        height:auto;
        border-radius:5px;
    }
    .column > h2 {
        margin:1em;
    }
    /* ATTORNEYS SECTION*/
    section#your-attorneys {
        text-align:center;
        background-color:#cdddee;
    }
    section#your-attorneys > h2 {
       padding: 2em 0;
    }
    section#your-attorneys > p {
        padding: 2em 0;
    }
    .container {
        display:flex;
        justify-content:space-around;
        padding: 0 2em;
    }
    .container>.column {
        margin:2em;
        padding: 1em 2em;
        background-color:white;
    }
    .container>.column>img {
        width:80%;
        border-radius:5px;
    }
    /* CONTACT SECTION */
    section#contact {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 100%;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
        border: 1px solid gainsboro;
    }
    form {
        border-radius: 5px;
        padding: 30px;
        margin: ;
        text-align: left;
    }
    #contact>form>img {
        width: 180px;
        padding: 0;
        margin: 0;
        display: block;
    }
    form > h2 {
        padding: 1em 0;
    }
    div.submitsAndHiddens {
        padding: 0 0 1em 0;
    }
    div.submitsAndHiddens > button {
        border-radius:5px;
        border:none;
        padding: .5em 1em;
        font-family:"Roboto",arial,helvetica,sans-serif;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    }
    div.submitsAndHiddens > button:hover {
       background-color: deepskyblue;
       color: white;
    }
    input {
       /* width:500px; */
        width: 100%;
        border:none;
        outline:none;
        background-color: rgb(239, 239, 239);
        border-top: 1px solid gainsboro;
        border-left: 1px solid gainsboro;
    }
    textarea {
        width: 100%;
        border:none;
        outline:none;
        background-color: rgb(239, 239, 239);
    }
    div.g-recaptcha {
        margin: 1em 0;
    }
    /* FOOTER */
    footer {
        background-color:#cdddee;
        text-align:center;
        padding:.5em;
    }
    /* BACK TO TOP BUTTON */
    #myBtn {
        font-family:"Roboto",arial,helvetica,sans-serif;
        font-weight:bold;
        display: none; /* Hidden by default */
        position: fixed; /* Fixed/sticky position */
        bottom: 20px; /* Place the button at the bottom of the page */
        right: 30px; /* Place the button 30px from the right */
        z-index: 99; /* Make sure it does not overlap */
        border: none;
        outline: none;
        background-color:white;;
        color: #002e63;
        cursor: pointer; /* Add a mouse pointer on hover */
        padding: .5em 1em;
        border-radius: 5px;
        box-shadow: 0 2px 4px 0 rgba(0,0,0,.2);
    }
      #myBtn:hover {
        background-color:deepskyblue;
    }
    [USER=124521]@media[/USER] screen and (max-width: 450px) {
        * {
            box-shadow: 0;
        }
        #myBtn {
            display: none;
        }
        header {
            flex-direction: column;
            margin: 0 auto;
            align-items: center;
            width: 100%;
            padding: 1em 0 0 0;
            border-top: 2em solid royalblue;  
        }
        h1 {
            padding: 0 0 .25em 0;
            margin: 0 0 0 .4em;
        }
        nav {
            padding: 0;
            width: 100%;  
            background-color: #cdddee;
            border-top: 2em solid royalblue;
        }
        ul {
            justify-content: center;
        }
        nav > ul > li {
            border: 1px solid royalblue;
            text-align: center;
        }
        div#firm {
            margin: 0;
        }
        .how-a {order: 1;}
        .how-b {order: 2;}
        .how-c {order: 3;}
        .how-d {order: 5;}
        .how-f {order: 4;}
        .box {
            padding: 20px;
            border: 1em solid royalblue;
            border-radius: 0;
        }  
        section#how-to-get-help, .icon-wrapper, .wrapper, .container {
            display: flex;
            flex-direction: column;
            margin: 0;
         }
        section#how-to-get-help {
            padding: 0;
        }
        .column {
            width: 100%;
        }
        .container {
            align-items: center;
        }
        section#your-attorneys > h2 {
            padding: 1.5em 0 1em 0;;
        }
        section#your-attorneys > .container {
            padding: 0;
        }
        section#your-attorneys > .container > .column {
            margin: 0;
        }
        section#contact {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 100%;
        }
        img#couple, form, input, textarea {
            max-width: 100%;
        }
        footer {
            border-bottom: 2em solid royalblue;
        }
        
    }
    Code (markup):
     
    Last edited by a moderator: Jul 21, 2020
    CactusWren, Jul 21, 2020 IP
  4. qwikad.com

    qwikad.com Illustrious Member Affiliate Manager

    Messages:
    7,151
    Likes Received:
    1,656
    Best Answers:
    29
    Trophy Points:
    475
    #4
    It could be a browser cookie. Add something like ?version=0.1 at the end of your style.css like so:

    <link rel="stylesheet" href="style.css?version=0.1">

    Save your index page with the new version. Now your .css file will load up like it's a new file. If you make another change(s) just change 0.1 to 0.2 and so on.
     
    qwikad.com, Jul 21, 2020 IP
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #5
    I created a codepen at https://codepen.io/itamer/pen/WNrPrOK

    With your css put into the actual css file, at the bottom so that we know the reset won't mess with it, it works just fine.
     
    sarahk, Jul 21, 2020 IP
  6. Efetobor Agbontaen

    Efetobor Agbontaen Active Member

    Messages:
    136
    Likes Received:
    41
    Best Answers:
    5
    Trophy Points:
    85
    #6
    If it worked, and most part of your external css Worked, then you are loading the css file properly. The issue is most likely precedence. Meaning that a different rule might be overriding header > img. For example, on line 65, width is set to 180px.

    Try putting !important after your css rule.

    For example:
    header > img{
    width: 150px !important;
    }
    Code (CSS):
    That should work if your issue is precedence.

    Don't forget to remove the <style></style> tags in your html so you won't get false result

    Also, to avoid the cache issue, if you use Chrome, you can also try this:

    • Press Ctrl+Shift+J in Chrome
    • Go to the Network Tab
    • Click on "Disable Cache"
    This should prevent Chrome from Caching your files
     
    Last edited by a moderator: Jul 21, 2020
    Efetobor Agbontaen, Jul 21, 2020 IP
  7. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #7
    Unnecessary.
    The logo has an id, it's just about the order that the page reads the css
     
    sarahk, Jul 21, 2020 IP
  8. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #8
    Reporting back, I took out the <style> in the head to begin testing, and nothing happened (ie, it is now being correctly styled by the css). Could this be an issue with the host?

    It worked when I opened it in my browser from C:, while using my ampps server localhost, and in the codepen, but it _didn't_ work when uploaded to the server.
     
    CactusWren, Jul 22, 2020 IP
  9. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #9
    When I open up the site and mess with the logo settings it changes size.

    upload_2020-7-23_10-1-58.png

    What is not working?
     
    sarahk, Jul 22, 2020 IP
  10. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #10
    It _is_working, but it wasn't working before, even though everything else was the same. I'm wondering if there's something weird with the host, like caching or something.
     
    CactusWren, Jul 22, 2020 IP
  11. sarahk

    sarahk iTamer Staff

    Messages:
    28,494
    Likes Received:
    4,457
    Best Answers:
    123
    Trophy Points:
    665
    #11
    More likely to be clientside with caching in your browser.
     
    sarahk, Jul 22, 2020 IP
  12. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #12
    That reminds me that I installed an extension to deal with that. Will test.
     
    CactusWren, Jul 22, 2020 IP
  13. Infatica

    Infatica Peon

    Messages:
    4
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    1
    #13
    This could be a hosting issue as well.
    To be sure, always write the IP address directly into the host file (C:\Windows\System32\drivers\etc\host ).
    For example (line in hosts):
    104.73.74.43 site.com www.site.com
    Then you will see for sure whether the problem is in the browser cache or hosting.
     
    Infatica, Jul 27, 2020 IP
  14. CactusWren

    CactusWren Greenhorn

    Messages:
    35
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    18
    #14
    cool tip! I will try that
     
    CactusWren, Jul 27, 2020 IP