Why anchor tags not working after adding CSS file in head ?

Question

1.00/5 (1 vote)

See more:

, +

PHP

<?php
session_start();
if(!isset($_SESSION["id"])){
    header("Location:http://localhost/petanimals/login.php");

};
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="user_personal_page.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;1,100;1,400;1,500;1,600;1,700&family=Pattaya&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="fontawesome/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/fontawesome.min.css" integrity="undefined" crossorigin="anonymous">
</head>
<body>
    <div id="head">
         <?php include 'head.php' ?>
    </div>
    <?php  
    
    $id=$_SESSION["id"];
     $conn=mysqli_connect("localhost","root","","pet_animals") or die("connect failed");
     $sql="SELECT * FROM user_profile WHERE id=$id ";
     $result=mysqli_query($conn,$sql)  ;
     if(mysqli_num_rows($result)>0){

    while($row=mysqli_fetch_assoc($result)){

 

    ?>
    <div id="container">
        <div id="name">
        <div class="profile">
      
        
        <img src="user_images\<?php echo $row['profile_pic'];?>" alt="">
        </div>
            <div>
                <h2><?php echo $row['fname'] ." ". $row['lname'] ?></h2>
                <h3>Full Name</h3>
                <h3><?php echo $row['city']  ?></h3>
                <a href="edit_profile_page.php"><h3>Edit profile</h3></a>
            </div>
        </div>
        <div id="about">
            <h2>About info</h2>
            <p>
            <?php echo $row['info'] ?>
            </p>
        </div>
       <?php 
     };  };
       ?> 


     <div id="heading">
        <a href="./add_product_page.php">
              <h3>Add Products</h3> </a>
          </div>
        <div id="products">
        <div class="productcontainer">
        <div class="productbox">
          <div class="imagebox">
          <div class="imagecontainer">
             <a href="IMAGES\fish.jpg"> <img src="IMAGES\fish.jpg" alt="" id="img"></a>
             <a href=""><img src="IMAGES/petaccess4.jpg" alt=""></a>
             <a href=""><img src="IMAGES/rabbithead.webp" alt=""></a>
             <a href=""><img src="IMAGES/petaccess3.png" alt=""></a>
             <a href=""><img src="IMAGES/fishhead.jpg" alt=""></a>
           </div>
          </div>
         
        
           <div class="detailscontainer">
               <div class="pricebox">
                   <h4>Rabbit</h4>
                   <h4>PRICE-2730Rs</h4>
                   <a href="product_detail_page.php"><h4>Rabbit</h4></a>
               </div>
               <div class="clickbtn">
                   <input type="submit" value="ADD TO THE CART" class="submit">
                   <input type="submit" value="ADD TO THE WISHLIST" class="submit">
               </div>
               <div class="sellerdetails">
                   <div class="seller">
                       <img src="IMAGES\fb icon.png" alt="">
                       <h4>Nandini Srivastava</h4>
                   </div>
                   <div class="readmore">
                      
                   <a href="">Edit</a>
                   <a href="">Delete</a>
                   </div>

               </div>
           </div>
           </div>
        </div>
       
    </div>
    
  
    <?php include 'footer.php' ?>
</body>
</html>

CSS

* {
    padding: 0;
    margin: 0;
    font-family: 'Josefin Sans', sans-serif;
}

body {
    overflow-y: scroll;
    overflow-x: hidden;
}

#head {
    background-color: black;
    height: 80px;
    width: 100%;
}

#container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    width: 1400px;
    padding: 20px;
    margin: 50px;
}

#name {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.profile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    margin-left: 20px;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-right: 50px;
}

.profile img {
    height: 200px;
    width: 200px;
    border-radius: 50%;
}

#name div h2 {
    height: 20px;
    padding: 10px;
    width: 350px;
    background-image: linear-gradient(black, grey, white, white, grey, black);
    border: 1px solid black;
}

#name div h3 {
    margin-top: 6px;
}

#about {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    border: 2px solid yellow;
    margin-left: 20px;
    margin-top: 30px;
    background-image: linear-gradient(yellow, rgb(238, 238, 155), white, white, rgb(238, 238, 155), yellow)
}

#about h2 {
    margin-bottom: 10px;
}

#products {
    width: 100%;
    height: 1500px;
    overflow-y: scroll;
    overflow-x: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

#heading {
    padding: 10px;
    background-image: linear-gradient(red, pink, white, white, pink, red);
    border: 2px solid red;
    margin: 20px;
}

#heading a {
    text-decoration: none;
}

#heading a:hover {
    color: red;
}

.productcontainer {
    height: 500px;
    width: 260px;
    padding: 20px;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px;
    border-radius: 3px;
    transition: 0.2s;
}

.productcontainer:hover {
    box-shadow: 2px 2px 5px rgb(0, 0, 0, 0.5), -2px -2px 5px rgb(0, 0, 0, 0.5), 2px -2px 5px rgb(0, 0, 0, 0.5), -2px 2px 5px rgb(0, 0, 0, 0.5);
}

.productcontainer div {
    margin-top: 15px;
}

.imagecontainer {
    height: 200px;
    width: 260px;
    overflow-x: scroll;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
}

.imagecontainer img {
    height: 200px;
    width: 260px;
}

.pricebox {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
}

.pricebox a {
    font-size: 18px;
    text-decoration: none;
}

.pricebox a:hover {
    font-weight: bold;
    color: red;
}

.pricebox h4 {
    margin-bottom: 10px;
}

.clickbtn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.submit {
    outline-style: none;
    height: 25px;
    padding: 5px;
    background-color: rgb(236, 164, 68);
    border: 1px solid black;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.submit:hover {
    background-image: linear-gradient(white, rgb(236, 164, 68), rgb(236, 164, 68), white);
    border: 1px solid rgb(236, 164, 68);
}

.seller {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.seller img {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.readmore {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.readmore a {
    font-weight: bold;
    font-size: 18px;
    text-decoration: none;
}

.readmore a:hover {
    font-weight: bold;
    color: red;
}

#logout a h3 {
    padding: 10px;
    border: 3px solid black;
    margin: 100px;
    width: 150px;
    display: flex;
    justify-content: center;
}

#logout a {
    text-decoration: none;
}

#logout a h3:hover {
    color: red;
    border: 3px solid red;
    text-decoration: underline 2px red;
}

What I have tried:

I was developing an ecommerce website but I got troubled by this error since last 4 days . I don't know why some of my anchor tags are not working and behave like a static element after adding css file in the head tag . Please explain me why is this happening ? Is it a type of error of programming or any defect in my system? I have linked my code below I am working with the language HTML , CSS and PHP .

Posted 19-Jun-21 0:39am

Codes by Gauri

Updated 22-Jul-21 9:03am

Add a Solution

Comments

samsmith07 25-Jun-21 9:27am

Create a separate class for anchor tag and u can use that when ever you need that.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

SeeSharp2 · Answer 1 · 2021-07-22T09:03:00

There is no way for us to know for sure because we cannot see your page. However, all you have to do is use the developer tools to see what is going on. It is quite possible you are loading some css that is changing the styles of anchor tags. Or you are loading something into the header that is not properly formed and that is causing the rest of the page to not load correctly.

Use your developer tools and you should be able to figure it out.