Problems with CSS and include function in PHP

Question

I am trying to develop a website in php. On my main page I use include function (in php) to include other files in it. But when load the main page the CSS in the other files get all screwed up. It is showing as if there is no CSS at all so everything is on top of each other. When I load the files separately everything works perfectly fine.

So in the index.php file I have

//code 
include 'toolbar.php';

Then in toolbar.php I have

div.fileinputs 
{
    position: relative;
}

div.fakefile 
{
    position: absolute;
    top:0px;
    left:0px;
    z-index: 10;
}
.text_computer
{
    position: absolute;
    top:80px;
    left:20px;
    z-index: 20;
    text-align:center
}
input.file 
{
    cursor: pointer;
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 30;
    width:317;
    height:202;
}
.text_upload
{
    position: absolute;
    top:6px;
    left:80px;
    z-index: 20;
    text-align:center
}
input.submit
{
    cursor: pointer;
    position: relative;
    text-align: right;
    -moz-opacity:0 ;
    filter:alpha(opacity: 0);
    opacity: 0;
    z-index: 30;
    width:330;
    height:50;
}
//code
<div class="fileinputs">
            <input type="file" class="file" name='image'/>
            <div class="fakefile">
                <img src='red_frame.png' width='330'>
            </div>
            <div class="text_computer">
                <a style='font-family:Arial;color:white;'><font size='6'>Choose a photo from<br> your Computer</font></a>
            </div>
        </div>
        <div class="des_box">
            <textarea name='description' cols='38' rows='4' placeholder='Enter a description here...' maxlength='500'></textarea><br>
        </div>
        <br>
        <div class="fileinputs">
            <input type="submit" class="submit" value='Upload'>
            <div class="fakefile">
                <img src='red_frame.png' width='330' height='50'>
            </div>
            <div class="text_upload">
                <a style='font-family:Arial;color:white;'><font size='6'>UPLOAD!!!!</font></a>
            </div>
        </div>

This isn't all of the code but this is the part that is piling on top of each other when I include it in index.php

When I just run toolbar.php everything is spaced out fine.

Is there a way to fix this?

Could there be some other sort of problem that is causing this?

Wait never mind i found this <!DOCTYPE html> at the top of my index.php and removed it to see if it would fix the problem and for some reason it did. I have no idea why that fixed it, but now everything works.

Please include the php, one of the included files, and the css — Jack Cole
– Jack Cole, Commented Aug 16, 2013 at 5:08

rushi · Accepted Answer · 2013-08-16 05:17:36Z

1

I suggest not to use 'include', please try in the following way-

<?php 
.
.
.
?>
<link href="../bootstrap/css/bootstrap-timepicker.min.css" rel="stylesheet" 
type="text/css"/>
<?php 
.
.
.
?>

answered Aug 16, 2013 at 5:17

rushi

346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

G.SINGH Over a year ago

Sorry, I dont know what this means.

Shankar Narayana Damodaran · Accepted Answer · 2013-08-16 05:22:05Z

0

Just include your CSS file through PHP. Its legitimate !

<?php include ('yourheader.php'); ?>
<style>
<?php include ('main.css'); ?>
</style>

answered Aug 16, 2013 at 5:22

Shankar Narayana Damodaran

68.6k43 gold badges102 silver badges129 bronze badges

2 Comments

rink.attendant.6 Over a year ago

Not only will the CSS be not cached, it will bloat every page.

Chris Herbert Over a year ago

True, but it does save an http request. It sounds like a terrible idea but I wonder if its actually faster in some cases.

krishna kinnera · Accepted Answer · 2013-08-16 05:44:16Z

0

You can use @import also to load the css styles.

    @import url('/css/styles.css');
    @import url('/css/main.css');
    @import url('/css/color.css');

/* All three CSS files above will be loaded from this single document. */

answered Aug 16, 2013 at 5:44

krishna kinnera

1,54312 silver badges10 bronze badges

Collectives™ on Stack Overflow

Problems with CSS and include function in PHP

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related