After upgrading from Windows 7 to Windows 10, I noticed that the CSS, HTML, and Bootstrap elements seemed to have lost their impact

<!DOCTYPE html>
    <html>
    <head>
    <title>Registration</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link rel="stylesheet" type="text/css" href="bootstrap.css">
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
 .form-control
{
width: 50px;
}
</style>
</head>
<script type="text/javascript">


</script>
<body>
<div class="container">

<div class="panel panel-info">
<div class="panel-heading">
<center><strong><h2>Register</h2></strong></center>
</div>
<div class="panel-body">
<form method="post" role="form">

<div class="row">
<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-user"></span>
<input type="text" class="form-control" name="" placeholder="Fullname">

</div>


</div>


<div class="form-group col-xs-3">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-envelope"></span>
<input type="text" class="form-control" name="" placeholder="Email address">

</div>


</div>

<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-earphone"></span>
<input type="text" class="form-control" name="" placeholder="Mobile number">

</div>
</div>
<div class="form-group col-xs-3">
<div class="inner-addon left-addon">

<input type="date" class="form-control" name="">

</div>
</div>
<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<span class="glyphicon glyphicon-map-marker"></span>
<input type="text" class="form-control" name="" placeholder="Address">
</div>

</div>


<div class="form-group col-xs-3">
<select class="form-control" style="width: 100px;" >
<option>State</option>
<option>Gujrat</option>
<option>Maharashtra</option>
<option>Goa</option>
<option>Rajasthan</option>
</select>
</div>

<div class="form-group col-xs-7">
<div class="inner-addon left-addon">
<input type="password" class="form-control" name="" placeholder="Create password">
</div>
</div>

<div class="form-group col-xs-3">

<select class="form-control" style="width: 100px;" >
<option>City</option>
<option>Ahmedabad</option>
<option>Mumbai</option>
<option>Kolkata</option>
<option>Delhi</option>
<option>Banglore</option>
<option>Chennai</option>
</select>
                    </div>


<div class="form-group col-xs-7">
<div class="inner-addon left-addon">

<input type="password" class="form-control" name="" placeholder="Confirm password">

</div>
</div>
    <div class="form-group col-xs-3">
<strong>Gender</strong>
<input type="radio" name="gender">Male
<input type="radio" name="gender">Female

</div>
</div>


<div class="form-group ">
<center>
<button class="btn"><span style="color: white;">Register</span></button>
    </center>
</div>
</form>
    </div>

<div class="panel-footer">
<center>by registerting you are agree to our <a href="#">Privacy policy</a></center><br>

<center>Already have an account ? <a href="#">Log in</a></center>
</div>
        </div>
    </body>
    </html>

https://i.sstatic.net/ubT6W.png

After upgrading my PC from Windows 7 to Windows 10, the CSS and Bootstrap styles applied to my HTML page disappeared. I continued to use the same browser and WAMP server that I had used on Windows 7, but the styling was lost. Is there a way to resolve this issue and make my program look the same as it did on Windows 7? I have also included a picture for reference.

Answer №1

Unfortunately, the request you are making is not feasible. Ensure that you have CSS files located in the root directory where your index file is situated.

Answer №2

Hey Ronak, it seems like the external stylesheets (styles.css and bootstrap.css) are missing from this example. Are they located in the same folder in your local directory?

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on determining the type of DOM element for CSS Selector adjustment

In this case, $self is not returning the expected result and I am getting "undefined". To adjust the CSS selector to correctly target the desired element, I need to determine which element type I am dealing with. Is it the "ul", "li", or "a" element? Whil ...

What is the best way to integrate HTML code within a JavaScript function?

I need the HTML code to execute only when a specific condition in JavaScript is met. Here is the JavaScript code: <script type="text/javascript"> $(document).ready(function () { if(window.location.href.indexOf("index.php") > -1) { ...

Struggling to perfectly align text in the middle of a div container that also has

Seeking help with aligning text vertically within a div that also contains an image. Previous attempts with CSS properties like vertical-align: center; and line-height:90px have proven ineffective. Removing the image allows for the successful use of line- ...

Automatically transferring CSS class attributes to a newly created class

The Issue I've encountered a problem while developing a small app for a website. The form in the app requires validation, but conflicts with existing jQuery scripts have been causing errors. These conflicting styles are essential to maintain the desi ...

Replace the checkbox display heading with a text box in the designated area

I'm new to using kendo ui Currently, I am attempting to show a text box in the first column header. Instead of the checkboxDisplay heading, I want to replace it with a text box. Could someone please provide guidance on how to resolve this issue? Here ...

Leveraging PHP for parsing an HTML document

I am currently working on a PHP application that involves parsing HTML content. My goal is to extract a particular column from a table and store it in PHP variables. Below is the code I'm using: $dom = new domDocument; @$dom->loadHTML($html); $d ...

The cascading style sheet does not have any effect on the layout of the tables within the

I am trying to apply a CSS style to give all tables on my HTML pages a 1px border width. However, for some reason, the borders are not showing up in my HTML files! What could be causing this issue? <!-- <style type="text/css"> --> body{backg ...

Empty HTML elements

Is there a way to create empty HTML tags, meaning tags that have no predefined styling or effect on the enclosed content or its environment? For example, <p> creates a paragraph, <b> makes text bold, and <div> forms a container. I am in ...

Display the output based on checkbox selection using JavaScript

I am working on a feature where I need to capture checkbox inputs using JavaScript and then store them in a PHP database. Each checkbox corresponds to a specific column in the database. If a checkbox is checked, I want to insert its value into the databa ...

Image overlay fading effect with text appearing once the image fades

After exploring various hover effects and techniques to display text on hover, I still haven't found the answer to my specific question. My goal is to have an image with a transparent overlay that fades out on hover, revealing text in its place. It s ...

Implement a function to trigger and refresh components in various Vuejs2 instances simultaneously

I currently have index.html with two Vue instances in different files: <!DOCTYPE html> <html lang="en"> <body> <div id="appOne"> </div> <div id="appTwo"> </div> </body> </html ...

Troubleshooting a Node.js server issue with a two-dimensional array

I am currently facing an issue with submitting a form that contains two-dimensional array fields on a post request in node.js. The problem lies in the fact that the server side is receiving a one-dimensional array with all the values combined. Below is an ...

Change the x and y positions of several div elements as the mouse moves in JavaScript

I am aiming to create a webpage where multiple divs with text and other content move along the x and y axes of the mouse. The desired effect is similar to parallax scrolling, but I have found that existing parallax plugins are image-based and do not work w ...

Combine multiple jQuery click functions into a single function

One issue I am facing on my website is that there are multiple modules, each of which can be disabled by the user. The problem lies in the fact that I have a separate script for each module. Hence, my query: How can I combine these scripts into one (perhap ...

Guidelines for comparing two distinct dates using jQuery

const currentDate = $("#date").text(); // the current date is set as a variable 01/06/2017 // Another date is declared as a variable let startDate = '01 / 06 / 2017'; if (currentDate == startDate) {} if (currentDate < startDate) {} <script ...

The Intriguing Riddle of HTML Semantic

I've been working on a puzzle presented in the link provided below: HTML Structure Challenge This mind-teaser consists of three questions: Modify the HTML code of the website to enhance its structure as follows: Replace the generic outer div eleme ...

``When you click, the image vanishes into thin

Could you please explain why the image disappears once I close the lightbox? Access with password: chough ...

CSS issue encountered: "Value of property is not valid"

When working with CSS, I encountered an error stating "Invalid Property Value" while inspecting the transform element of the Service section in the Wall Street theme. Could someone kindly assist me with the necessary steps to rectify this issue? https://i ...

JavaScript: Modify the dropdown class with a toggle option

Hi there, I'm currently facing a small issue and I could really use some assistance. I have a dropdown menu with two selection options - "green" and "blue", and I need to toggle a class based on the selected option. If you'd like to take a look, ...

Having problems with Javascript and CSS not playing well together?

I have implemented a button from this source, but it does not appear correctly on my page. You can view the screenshot here. It seems like there is a conflict between the saved changes and the CSS. How can I resolve this issue? In addition, I am facing ...