CSS Style sheet is applying to all pages, but is showing different results

Question

I am trying to get all pages to look the same and the DIVs connected.

Here is my code

footer{ 
height:auto;
padding:10px;
background-color:lightgray;
margin-right:auto;
margin-left:auto;
text-align:center;

}

article{
height:auto;
background-color:darkgray;
margin-right:auto;
margin-left:auto;
text-align:center;
}

h1,h2,h3,h4,h5,h6{
margin:0;
}

#wrapper{
width:80%;
margin-left:10%;    
margin-right:10%;
border:2px solid black;
background-color:lightgray;
box-shadow: 10px 10px 5px #888888;
border-top-left-radius:18px; 
border-top-right-radius:18px;   
border-bottom-left-radius:18px;    
border-bottom-right-radius:18px;
}

header{
height:140px;
background-color:lightgray;
background-image:url(logo1.png);
background-repeat:no-repeat;
background-position:20px center;
text-align:center;
border-bottom-left-radius:18px;    
border-bottom-right-radius:18px;
}

nav{
height:40px;
background-color:lightgray;
margin-left:auto;
margin-right:auto;
text-align:center;
width:auto;
}

I expect all the corners to be rounded and all margins to be the same.

The result I receive is a top corner rounded but bottom not, the margins on one page are great, but there are none on another, border not showing up on certain. I am positive the page is linked. The background colors are not following.

Here's the link to my assignment: https://iceconescafe.000webhostapp.com/index.html

I just want to let you know I fixed a majority of the issues, but the nav table is aligning different on most pages. Some pages don't have the div styling done yet so please focus on Kids Menu and Menu, as well as Index.

The issues are the margins on kids menu, and the nav table alignments, as well as the article not changing on testimonials (background).

Here is the html code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="icon" href="logo.png" type=" image/png">
<title> IceCones</title>
</head>

<body> 
<div id="wrapper">
<header>
<h1 id="t" class="l"> Ice Cones Cafe </h1>

</header>

<nav>
<table  id=navtable class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>

</nav>
<article class="setmin">
<br>
<img src="IceConesLog.jpg" border="3">

<br>
<blockquote>
<p > 



Ice Cones Cafe, established in 1880, is the best ice cream joint in town!  With desserts ranging from waffles to ice cream, Ice Cones only uses the purest  ice from Antarctica. With our wide selection of foods, and our expertise  chefs,  
you will never leave unhappy.  Only when you walk through our doors  will you taste the best ice cream the world has to offer! </p>
</blockquote>
</article>

<footer>

<h4><b> Contact Information </h4>

<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li> </b>

<audio autoplay loop>
  <source src="ice.mp3" type="audio/mpeg">
</footer>
</div>
</body>
</html>

Ignore this (Next page Menu)

<html>
<head>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
<title> Menu</title>
</head>
<body>
<div id="wrapper">
<header>


<h1 id="t"> Ice Cones Cafe </h1>
</header>
<nav>
<table class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>
</nav>


</tr>



<article>
<h2> Menu</h2>


<table>
<th colspan="3"> Menu </th>

<tr>
<th>Picture</th>
<th>Description</th>
<th>Price</th>
</tr>



<tr>
<td><img src="SnowConeMenu1.jpg"></td>
<td>The classic ice in a cup. Our Ice Cones come in flavors of lemon lime, blue berry, and cotton candy. This product is our cafe's specialty.</td>
<td>Small/$0.99 Large/$1.99</td>
</tr>

<tr>
<td><img src="IceCream.jpg"></td>

<td>Another famous classic using ice imported directly from the freshest and purest ice. 
With our different flavors of chocolate, vanilla, buttermilk, and pistachio, there are various flavors to try. We also come up with new flavors weekly. </td>
<td>1 scoop/$1.50    2 scoop/$2</td>
</tr>

<tr>
<td><img src="BananaSplit.jpg"></td>
<td> The banana split features a combination of banana, whipped cream, sprinkles, and even a cherry on top. The best part however, is that
warm, melting chocolate syrup.</td>
<td>$2.99</td>

<tr>
<td><img src="OreoShake.jpg"></td>
<td> The classic American favorite of Oreo cookies mixed with milk. A tasty, chunky, cold recipe that your taste buds won't soon forget.</td>
<td>$2.50</td>
</tr>

</table>
</article>
<footer>
<h4> Contact Information </h4>

<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li> </b>
</footer>
</div>
</body>
</html>

Kids Menu

<html>
<head>
<title> KidsMenu</title>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
<header>
<h1 id="t"> Ice Cones Cafe </h1>
</header>

<nav>
<table class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>

</nav>
<article>







<h2>Kids Menu</h2>

<table>
<th colspan="3"> Kid's Menu </th>

<tr >
<th>Picture</th>    
<th>Description</th>
<th>Price</th>
</tr>



<tr>
<td><img src="MiniWaffle.png"></td>
<td> Our chef specially makes these in sizes of 1/3 regular waffles. A great meal for you kid in the morning, or anytime.</td>
<td>$4.59</td>
</tr>

<tr>
<td><img src="SmoresKids.jpg"></td>

<td> These smores are a small, but tasty item for your kids. Includes chocolate syrup, marshmallows, graham crackers, and whipped cream. </td>
<td>$3.99 <br> with whip/$4.50</td>
</tr>

<tr>
<td><img src="FrozenHotChoco.jpg"></td>
<td> Although you're probably thinking warm at a ice cream place is crazy, we have added a frozen aspect to hot chocolate for your kids. They will love
the whipped cream and added syrup.</td>
<td>$3.50</td>

<tr>
<td><img src="KidsCrepe.jpg"></td>
<td> A small, warm crepe filled with whatever your child desires. Banana, Nutella, and strawberry are all viable options, along with
syrups and creams on top.</td>
<td>$4.99</td>
</tr>
<br>
</table>


<h1>Kiddie Activity</h1>
<br>
<img src="Danykmem84.png">
</article>
<footer>
<br>
<br>
<h4> Contact Information </h4>

<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li> </b>
</ul>
</footer>
</div>












</body>
</html>

lastly, testimonials
<html>
<head>
<link rel="icon" href="IceConesfavicon.ico" type=" image/png">
<link rel="stylesheet" type="text/css" href="index.css">
<title> IceCones</title>
</head>
<body>
<div id="wrapper">


<div id="header">
<h1 id="t"> Ice Cones Cafe </h1>
</div>
<div id="nav">
<table class="tr">
<tr>
<td class="td"><a href="index.html" class="b3">Home</a></td>
<td class="td"><a href="menu.html" class="b3">Menu</a></td>
<td class="td"><a href="kids.html" class="b3">Kids Menu</a></td>
<td class="td"><a href="nutrition.html" class="b3">Nutrition</a></td>
<td class="td"><a href="testimonials.html" class="b3">Testimonials</a></td>
<td class="td"><a href="orderonline.html" class="b3">Order Online</a></h5></td>
</tr>
</table>
</div>
<div id="article">
<h2>Testimonials</h2>





<p> Below are some testimonials from our CEO and a trusted customer:</p>


<p> Testimonial~CEO Abdu Hijazi</p>


<video controls>
<source src="Test1.mp4" type="video/mp4">
</video>



<p> Testimonial~Satisfied Customer Sara Hijazi</p>


<video controls>
<source src="Test2.mp4" type="video/mp4">
</video>
</div>
<div id="footer">
<h4>Contact Information </h4>

<ul>
<li> Abdu Hijazi </li>
<li>contact_support@icecones.com</li>
<li>(313)962-7906</li>
</div>
</div>
</body>
</html>

border radii in wrapper and header are probably conflicting. we can't do much without any html. please update your question so that it shows your relevant code in a http://stackoverflow.com/help/mcve minimal, complete, and verifiable example. It would also be helpful if you could let us know what you have http://meta.stackoverflow.com/questions/261592 tried so far to solve your problem. For further information, please refer to the help article regarding http://stackoverflow.com/help/how-to-ask how to ask good questions, and take the http://stackoverflow.com/tour tour of the site. :) — wazz, Dec 05 '17 at 02:31
Will do tomorrow, I am sorry first time posting on this website. I do have a semi outdated version if you would like to see what it looks like. As I tried to fix the issues, many of them started to rise. — AbduHijazi, Dec 05 '17 at 02:46

score 0 · Answer 1 · answered Dec 05 '17 at 02:54

1) Make sure the HTML you are applying your CSS to does not have any inline styling (style="...") or any embedded CSS already that is overriding your linked style sheet.

Or if their are other linked style sheets, consider removing them or making the main style sheet above the last link so it overrides any conflicting rules in the others.

2) If you still have issues, try using Chrome devtools (F12) or right-click on the page where it doesn't look right and select "inspect element". The right-hand side of the window that pops up shows how the browser is interpreting the CSS. So you can use that to debug why it's not showing up right.

3) And/or try adding the !important rule (What does !important in CSS mean?) to any rule in your style sheet that seems to be getting ignored. But it's generally better form to remove the overriding style rules in the HTML and/or fix any issues in your stylesheets

Hope that helps!

Thank you!! Will definitely try – AbduHijazi Dec 05 '17 at 03:13 — AbduHijazi, Dec 05 '17 at 03:13

score 0 · Answer 2 · answered Dec 05 '17 at 05:01

0

Clear your Internet Browser history and Cache from beginning of time, then test your web pages. If it doesn't work, check the 'class' and 'id' of CSS is given in proper way. Here you are not using class. To use class:

Example:

In CSS:

.nav{ }

In html:

<div class="nav"></div>

answered Dec 05 '17 at 05:01

JWC May

605
8
14

The
has to be a class?
– AbduHijazi Dec 06 '17 at 22:04
Another nav css may be defined in any other css code segment. I said to use nav class inside
to avoid such an instance.
– JWC May Dec 07 '17 at 05:41

CSS Style sheet is applying to all pages, but is showing different results

2 Answers2