Databases
StackOverflow2013
Postsdbo
POCrazy problems with HTML and stylesheets: stuff is showing up that I didn't even write
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCrazy problems with HTML and stylesheets: stuff is showing up that I didn't even write
    text
    copied!<p>This problem is incredibly hard to describe. I feel like I've entered the twilight zone. However, I'm new to HTML and CSS, and there's a great chance I'm doing something completely wrong.</p> <p>I have multiple files in a folder, amongst them are: style.css, homePage.html, and addPerson.php</p> <p>I'm intending style.css to be an external style sheet to handle both pages. I wrote addPerson.php first and had no problems getting it to work with the external stylesheet. However, once I added the homePage.html file (which is linked to on the addPerson.php webpage), I'm having all sorts of crazy problems. On the left of the page of my addPerson.php page, there is an unordered list of links, stuck on the left using "float". In my homePage.html file, I want to have this same exact list. Thus, I copied and pasted the code into that file. Here's what that code looks like:</p> <p> </p> <pre><code>&lt;body&gt; &lt;div class="Links"&gt; &lt;p&gt; Add new content: &lt;ul&gt; &lt;li&gt;&lt;a href="addComments.php"&gt;Add comments to movies&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="addMovieInfo.php"&gt;Add movie information&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; Browse content: &lt;ul&gt; &lt;li&gt;&lt;a href="showActorInfo.php"&gt;Actors&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="showMovieInfo.php"&gt;Movies&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; Search: &lt;ul&gt; &lt;li&gt;&lt;a href="searchActorsOrMovies.php"&gt;Search&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/p&gt; &lt;/div&gt; </code></pre> <p>Here's what the "Links" class, from style.css looks like that was referenced: </p> <pre><code>.Links { float: left; background-color:#E6E6E6; height: 522px; } </code></pre> <p>That piece of code makes it so that there's a list of links with a grey background that runs down the left side of the page. It works just fine in addPerson.php. Here's a screenshot of that file: <a href="http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at104256PM.png?t=1303796942" rel="nofollow">http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at104256PM.png?t=1303796942</a></p> <p>However, when I copy and paste that piece of code into homePage.html, I find that it doesn't work. Rather, the class reference doesn't do a thing. It just shows up as an unordered list of links, without the grey background or anything. Thus, homePage.html looks like this: <a href="http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at104311PM.png?t=1303796993" rel="nofollow">http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at104311PM.png?t=1303796993</a> </p> <p>Thinking that was a little weird, I ran a few tests on homePage.html. I cut down the code to just this: </p> <pre><code>&lt;body&gt; &lt;div class="Links"&gt; &lt;p&gt; Add new content: &lt;ul&gt; &lt;li&gt;&lt;a href="addComments.php"&gt;Add comments to movies&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="addMovieInfo.php"&gt;Add movie information&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/p&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>However, I find that when doing this, things got very strange! Here's a picture: <a href="http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at104341PM.png?t=1303797030" rel="nofollow">http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at104341PM.png?t=1303797030</a></p> <p>That makes no sense at all to me.</p> <p>I then cut the code down even further, to:</p> <p> </p> <pre><code>&lt;body&gt; &lt;div class="Links"&gt; &lt;p&gt; Add new content: &lt;ul&gt; &lt;li&gt;&lt;a href="addComments.php"&gt;Add comments to movies&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/p&gt; &lt;/div&gt; &lt;/body&gt; </code></pre> <p></p> <p>Now with this change, it suddenly looked correct. The grey background was there, and the rest of the text was not. Here is what that looked like: <a href="http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at105119PM.png?t=1303797106" rel="nofollow">http://i1126.photobucket.com/albums/l610/cpatton1027/Screenshot2011-04-25at105119PM.png?t=1303797106</a></p> <p>What the heck is going on? Why is the Links class working perfectly in my initial file but horribly in this new file I'm creating? (note: there are a bunch of other weird things that has happened in trying to figure this out, but since I've already written a novel I decided to just slim it to this problem).</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload