javascript - my CSS style for my list is not working but it is working on everything else

View Original

Could anyone help me figure out why my css would not work? How do I get it to link with my CSS file for the list to work?

It seems to only work when it is internal CSS and not external. Every time I try it stops working.

<! DOCTYPE html>

<!--Name:workk -->
<meta charset="utf-8" />

<html lang="en">
<head>

<style>
ul{
    
    border:1px solid black;
    padding:20px;
    list-style-type:none;
}
li{ border:2px solid black;
    padding:20px;
}
</style>

<link  rel="stylesheet" type="text/css" href="project-style.css" >
</head>
<body>
<div class="container">

 <?php
 $name = $_POST['name'];
 $phone = $_POST['phone'];
 $date = $_POST['date'];
 $childTickets = $_POST['childTickets'];
 $adultTickets = $_POST['adultTickets'];
 $fee = 0;

 define("TAX", 0.07);
 const MAXfee = 1.00;
 const MINfee = 0.50;
 const ATTENDcompare = 5;  
 
  $TOTALattend = $childTickets + $adultTickets;

  if ($TOTALattend <= ATTENDcompare) {
    $fee = $TOTALattend * MAXfee;
  } else {
    $fee = TOTALattend * MINfee;
  }

  $subtotal = ($adultTickets * 78.50) + ($childTickets * 50.00);
  $salestax = $subtotal * TAX;
  $totalCost = $subtotal + $salestax + $fee;
    
  print ("<h1>Summary Ticket Cost for Concert</h1>");
  print("<p>Thank you <b>". $name."</b> at <b>".$phone."</br>. Details of your total cost <b>$".number_format($totalCost, 2). "</b> are shown below:</p>");
    
  print ("<ul><li>Adult tickets: ".$adultTickets."</li>");  
  print ("<li>Child tickets: ".$childTickets."</li>");
  print ("<li>Date: ".$date."</li>");
  print ("<li>Sub-total: $".number_format($subtotal, 2)."</li>");
  print ("<li>Sales tax: $".number_format($salestax, 2)."</li>");
  print ("<li>Fee: $".number_format($fee, 2)."</li></ul>"); 
  print ("<ul><li><b>TOTAL: $".number_format($totalCost, 2)."</li></ul>");
  print('<br>')
?>
    
<footer>
<a class="footlink" href="onsare-group5-project-lp.html">Return to Home Page</a>
</footer>
</div>
</body>
</html>

Every part of the css works except for the list, I can't get any borders or styling for the list.

body{
  background-color: #eee;
}
.TextWrapleft{
  clear:left;
  float:left;
   margin:10px
}
h1{
  border:3px black;
}
h1{
  background-color:blue;
  color:orange;
  font-family:Helvtica;
  text-align:center;
}
h2{
  color: green;
}
h3{
  color: red;
  font-family:Helvtica;
}
p{
  color: blue;
  font-family:Helvtica;
}

table, th, td{
  border: 3px solid black;
  width: 250px;
  margin:15px
}
th{
  background-color:green;
}
tfoot{
  background-color:purple;
  font-size:10px;
  color:green;
}
th:nth-child(2)
{
  background-color:sold black;
  color:blue;
}

}
.textwrap {
  float:right;
  margin:10px
}
img{
  margin:20px;
  padding:5px;
  border : 13px solid black 
}
.floatLeft{ width:50%; float: left;}
.floatright{width: 50%; float: right;}
footer{
  clear: both;
  background-color: blue;
}

#myfoot
{font-size:18px}

.button{
  color: blue;
  border: 10px solid black;
  padding: 15px 32px;
  font-size: 15px;
}

Answer

Solution:

with some modifies (correct html 5 ) here does something. in you code you load the css in the older html 4 format ,instead we use html 5 now. avoid "/>" xhtml obsolete brackets

    <!DOCTYPE html>
        <html lang="en">
        <head>
         <!--Name:workk -->
        <meta charset="UTF-8">
        <title>yep</title>
        <style>
        ul{
            
            border:1px solid black;
            padding:20px;
            list-style-type:none;
        }
        li{ border:2px solid black;
            padding:20px;
        }
        </style>
        <link rel="stylesheet" href="mycss.css">
        </head>
        <body>
        <div class="container">
        
         <?php
        
        
        
        
        
             $name = $_POST['name'];
             $phone = $_POST['phone'];
             $date = $_POST['date'];
             $childTickets = $_POST['childTickets'];
             $adultTickets = $_POST['adultTickets'];
             $fee = 0;
        
        
        
          define("TAX", 0.07);
          const MAXfee = 1.00;
          const MINfee = 0.50;
          const ATTENDcompare = 5;  
         
          
         
         
         
            $TOTALattend = $childTickets + $adultTickets;
           if ($TOTALattend <= ATTENDcompare) {
                $fee = $TOTALattend * MAXfee;
            } else {
                $fee = TOTALattend * MINfee;
            }
            $subtotal = ($adultTickets * 78.50) + ($childTickets * 50.00);
            $salestax = $subtotal * TAX;
            $totalCost = $subtotal + $salestax + $fee;
            
            print ("<h1>Summary Ticket Cost for Concert</h1>");
            print("<p>Thank you <b>". $name."</b> at <b>".$phone."</br>. Details of your total cost <b>$".number_format($totalCost, 2). "</b> are shown below:</p>");
            
            print ("<ul><li>Adult tickets: ".$adultTickets."</li>");  
            print ("<li>Child tickets: ".$childTickets."</li>");
            print ("<li>Date: ".$date."</li>");
            print ("<li>Sub-total: $".number_format($subtotal, 2)."</li>");
            print ("<li>Sales tax: $".number_format($salestax, 2)."</li>");
            print ("<li>Fee: $".number_format($fee, 2)."</li></ul>");   
            print ("<ul><li><b>TOTAL: $".number_format($totalCost, 2)."</li></ul>");
           print('<br>')
        ?>
            
        
        <footer>
        <a class="footlink" href="onsare-group5-project-lp.html">Return to Home Page</a>
        </footer>
        </div>
        </body>
        </html>
    
    
    
  **unchanged mycss.css**   
        body{
         background-color: #eee;
          
         }
         .TextWrapleft{
             clear:left;
             float:left;
         margin:10px}
        h1{
        
        border:3px black;
        }
        h1{
        background-color:blue;
        color:orange;
        font-family:Helvtica;
        text-align:center;
        }
        h2{
        color: green;
        }
        h3{
        color: red;
        font-family:Helvtica;
        }
        p{
        color: blue;
        font-family:Helvtica;
        }
        
        table, th, td{
        border: 3px solid black;
        width: 250px;
        margin:15px
        }
        th{
        background-color:green;
        }
        tfoot{
            background-color:purple;
            font-size:10px;
            color:green;
        }
        th:nth-child(2)
        {
        background-color:sold black;
        color:blue;
        }
        
        }
        .textwrap {
            float:right;
            margin:10px
        }
        img{
            margin:20px;
            padding:5px;
            border : 13px solid black 
        
        }
        .floatLeft{ width:50%; float: left;}
        .floatright{width: 50%; float: right;}
        footer{
            clear: both;
            background-color: blue;
        }
        
        #myfoot
        {font-size:18px}
        
        .button{
            color: blue;
            border: 10px solid black;
            padding: 15px 32px;
            font-size: 15px;
        }

Source