php echo css doesn't work

Question

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: php + chrome

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: php + 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:

html without echo

there isn't even 1 line of php code in the whole file except echo which in turn is useless here. why you are echoing? just use the same html writing native way. — itachi, Nov 12 '14 at 13:06
Can you post the source code that gets created? (CTRL+U in your browser). Maby you forgot to add — Chilion, Nov 12 '14 at 13:06
@itachi there is ofcourse more code but that's queries, connection to the database, ... and I don't think that's relevant? — Noosrep, Nov 12 '14 at 13:07
You can just code this in plain HTML. No need to echo everything. For example More html — Matheno, Nov 12 '14 at 13:08
The problem is not with php, the problem is with the code you generate with php. Just compare the generated html with your original one. — cor, Nov 12 '14 at 13:08
@Chilion It's there but there is some database stuff that comes before the echo so I didn't add it — Noosrep, Nov 12 '14 at 13:09
see source code, see your code.... find the difference. that's where the problem is. — itachi, Nov 12 '14 at 13:09
@TimothyPersoon you don't need all these `echo`, just remove them, write in plain html and whenever you will need to add some PHP then just use ``. — Dim13i, Nov 12 '14 at 13:09
Echoing everything makes a non-lineal DOM. Change that for provide a php file with an html-like format but with the tags ` php // Code here ?>` wherever you need it. — sospedra, Nov 12 '14 at 13:11
If there is a difference between what you see in different browsers, it is in most cases css related issue — , Nov 12 '14 at 13:11
So many similar comments. I think this echo thing is contagious! — rjdown, Nov 12 '14 at 13:11
well i gues the problem here is that there are no linebreaks like \n, try to use a single echo with multiline - second is that u include bootstrap js and css - there are known issues that this will modify ur code unexpected when not using there grid system - third seems that the border radius is to big so the form gets streched out + height, lower the radius and add a fixed padding to this div — UnskilledFreak, Nov 12 '14 at 13:12
I must be doing something wrong then because when I remove the echo, I just get a white page. There are a lot of comments so I'm going to try to follow each one — Noosrep, Nov 12 '14 at 13:32
you sould remove `` or ``) tag too and all echo-s because this seems to be a static page (so far...), Note: you can get nothing (blank page) too, if there is a php compile/syntax error and no error outputting is enabled. (see: http://stackoverflow.com/q/1053424/669677) — , Nov 12 '14 at 13:34
Alright everyone, got it working. Thanks for the (sometimes not so) constructive feedback. — Noosrep, Nov 12 '14 at 14:10
Timothy Persoon, please post the content from "includes/style.css" — Protomen, Nov 12 '14 at 17:46

score 0 · Answer 1 · answered Nov 12 '14 at 13:32

@Timothy Persoon use this css and change colors of this code :) !same class you used in menu bar "container" and search!

body{ background-color:#FFF;}
.container{
margin-left:20%;
width:520px;
height:20px;
padding:20px;
border: 5px #888888 solid;
background-color: #cbce2c;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

php echo css doesn't work

1 Answers1