CODEWITHSUNDEEP
phphtmlcssadobe-brackets
Ninoid
Ninoid

Reputation: 15

Disappearing elements and strange behaviour when switching from html to php

EDIT! -- The problem was to do with the browser Cache and the solution is to do a hard refresh in Chrome (CTRL + F5)

My site seems to break when switching over to from .html to .php and is not acting as expected when adding simple div elements with classes and using spanned styles or h tags.

Essentially I'm trying to add 2 simple elements to my page. 

• A heading consisting of boldened and centered text. 

• A div that will act as a vertical timeline.

Once I have added these elements using a h1 tag with custom styles and a simple div assigned to a class, it works as expected..

Until I add more text underneath my heading, at which point it breaks; my custom h1 tag style applied to my heading is no longer active and my timeline div disappears from view!

Even stranger.. when I delete the text the problem is still there. Even after I delete the timeline div the problem still persists.

Its only after I actually go into the css and delete the .timeline class does the span actually come back into effect, which to me makes no sense at all!

The problem is not present before switching over to php so this is how I switched from working in html to php code:

  1. Open xampp Control Panel and ran 'Apache' and 'MySQL' and open my website project in Adobe Brackets.

  2. Change the file extension of my index file from .html to .php .

  3. Change the 'Live Preview Base URL to point to my project's directory in xampp's htdocs folder.

At this point the live preview works okay (apart from having to save to see updates)

  1. Insert my heading into my document inside h1 tag and apply styles to h1 tag in css document

  2. Create a div with a class to act as my timeline bar

At this stage, it will break if I add a line of text to the document ("is this working!?")


<div class="row" style="margin-top: 46px;">

     <h1> BIOGRAPHY </h1>

     Is this working!?

     <div class="timeline"></div>


</div>


h1 {
    font-weight: 650;
    text-align: center;  
}

.timeline {
    width: 10px;
    height: 2000px;
    background: #454545;
    position: relative;
    margin: auto;
}

Sorry for the very long question and I hope it makes sense. I'm probably making a really silly mistake but I'm struggling to see what it is.

Thanks!

Upvotes: 0

Views: 1056

Answers (2)

Ninoid
Ninoid

Reputation: 15

Just a quick update and a solution that I have found. I ended up switching to another local server and eventually ran into the same issue.

So the issue was actually down to the browser Cache..

The simple solution was to do a hard refresh on Chrome (CTRL + F5). This forced Chrome to read my up to date CSS file from the server.

I hope this helps someone with the same issue. And thanks for everyone's help in pointing me to all of the possible issues.

I am glad I will be able to continue to use Bracket's useful live preview feature! :)

Upvotes: 1

Tunji Oyeniran
Tunji Oyeniran

Reputation: 4394

Nothing breaks. After replicating your code on my xampp and testing it as both .html and .php They both have the same result.

Here is my code

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
      h1 {
        font-weight: 650;
        text-align: center;
      }

      .timeline {
        width: 10px;
        height: 2000px;
        background: #454545;
        position: relative;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="row" style="margin-top: 46px;">
      <h1> BIOGRAPHY </h1>

      Is this working!?

      <div class="timeline"></div>
    </div>
  </body>
</html>

if you still have an issue, I would suggest you

  1. Restart your Xampp Server
  2. Tryout another browser

+++ GOODLUCK +++

Upvotes: 0

Related Questions