I'm having a weird problem with my css in combination with php.
This is my normal html + css (so no php) and that's the layout I want
The PHP code
not relevant anymore, see below
When I run the script in Chromium, I get his:
As you can see the background of the body (the salmon color) doesn't run through to the bottom and the textboxes and search button are pressed against the bottom.
However, when I run the script in Firefox:
The background of the body runs through to the bottom (I cut a piece of it because what's under it isn't important now) but the textboxes and search button are still pressed against the bottom.
I have tried escaping changing ' to " and escaping them but to no avail. I don't think there's something wrong with the css and html seeing as it works without the php but I find it odd that it gives different styling. When I browse to the regular html in Firefox and Chromium there's no difference
Note: I have some experience in programming but am a noob when it comes to PHP or HTML/CSS so it could be that I'm just looking at this the wrong way
New HTML code without echo but this gives just exactly the same:
<html lang="en">
<head>
<meta charset="utf-8">
<!-- Set the viewport so this responsive site displays correctly on mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ComicDB</title>
<!-- Include bootstrap CSS -->
<link href="includes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="includes/style.css" rel="stylesheet">
</head>
<body>
<!-- Site header and navigation -->
<header class="top" role="header">
<div class="container">
<a href="index.html" class="navbar-brand pull-left">ComicDB</a>
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="glyphicon glyphicon-align-justify"></span>
</button>
<nav class="navbar-collapse collapse" role="navigation">
<ul class="navbar-nav nav">
<li><a href="issue.html">Issue</a></li>
<li><a href="series.html">Series</a></li>
<li><a href="writer.html">Writer</a></li>
<li><a href="editor.html">Editor</a></li>
<li><a href="letterer.html">Letterer</a></li>
<li><a href="colourist.html">Colourist</a></li>
<li><a href="coverartist.html">Cover Artist</a></li>
<li><a href="inker.html">Inker</a></li>
<li><a href="penciler.html">Penciler</a></li>
<li><a href="tpb.html">Trade Paper Back</a></li>
<li><a href="publisher.html">Publisher</a></li>
</ul>
</nav>
</div>
</header>
<!-- Banner section -->
<div class="banner">
<div class="container">
<form class="searchbox" action="getIssue.php" method="get">
<input id="search" type="text" size="35" placeholder=" Series" name="seriesName">
<input id="search" type="text" placeholder=" Volume" name="volumeName">
<input id="search" type="text" size="5" placeholder=" NR" name="issueNR">
<input id="submit" type="submit" value="Search">
</form>
</div>
</div>
<!-- Include jQuery and bootstrap JS plugins -->
<script src="includes/jquery/jquery-2.1.0.min.js"></script>
<script src="includes/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
The result:
