PHP error styling with css

D

Dobby

Member
Nov 8, 2010
156
5
Okay i have a working login register etc but when an error is displayed i want to to have some css styling to it but it wont for some reason.

I have been working on it for ages but i have no idea. could someone help.

The PHP
PHP: 
function output_errors($errors) {
    $output = array();
    foreach($errors as $error) {
        $output[] = '<li>'. $error .'</li>';
    }
    return '<div class="validation">' . implode('', $output) . '</div>';
}
?>

The CSS
Code: 
}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}

It will work correctly by adding the <div> and <li> into the code but for some reason it just won't show up. Any ideas?
The css is linked correct as the rest of the website shows up perfect.
 
Sort by date Sort by votes
IntactDev

IntactDev

Member
Nov 22, 2012
399
71
Try "echo output_errors($errors) or die('There is an error in your code!');" If it says there's an error in your code, then your function isn't returning any data because something is messed up. I'm on my phone atm, so I can't help all that much, sorry.
 
Upvote 0 Downvote
D

Dobby

Member
Nov 8, 2010
156
5
It just says 1

The php is all fine the errors it gets show up. The style from the css wont show though :s
The css is linked right as everything else shows up
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Have you tried using the errors elsewhere on your page, without any PHP involved? If that works then it'll be your PHP, if not your stylesheet may have been cached in the browser so you may need to add a version in your HTML.
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Dobby said:
Okay tried to just put on the page using
<div class="error"> Hey </div>
and it didnt show up.
Click to expand...
Okay, could be one of two things:

1) The stylesheet is cache'd, simple fix for this which involves you editing the way you link to your stylesheet. For example:
Code: 
<link href="css/global.css" rel="stylesheet">
Is the normal way, however you can add versions on to the end of it like so:
Code: 
<link href="css/global.css?v=12" rel="stylesheet">
Notice the ?v=12 onto the end of the link? Try doing something along the lines of this to your stylesheet.

2) Is no text showing at all? If so then just mention that. If text is showing, but isn't styled, the chances are it may be the first option. Give a try and let me know.
 
Upvote 0 Downvote
D

Dobby

Member
Nov 8, 2010
156
5
Okay i tried the

Code: 
<link href="css/global.css?v=12" rel="stylesheet">

but i am still not getting the style. The text shows but not the style. Note: this is only the style of my error box as the rest of the website is showing.
 
Upvote 0 Downvote
Sysode

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Dobby said:
Okay i tried the

Code: 
<link href="css/global.css?v=12" rel="stylesheet">

but i am still not getting the style. The text shows but not the style. Note: this is only the style of my error box as the rest of the website is showing.
Click to expand...
Have you checked your CSS in the browser to see that it has updated?
 
Upvote 0 Downvote
D

Dobby

Member
Nov 8, 2010
156
5
Sysode said:
Yes, but are all of your styles there for the errors etc?
Click to expand...

Yea i went to the url and it show me them
Code: 
footer {
    border-top:1px dashed #ddd;
    color:#999;
}

.clear {
    clear:both;
{

}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}
 
Upvote 0 Downvote
D

Dobby

Member
Nov 8, 2010
156
5
Dobby said:
Yea i went to the url and it show me them
Code: 
footer {
    border-top:1px dashed #ddd;
    color:#999;
}

.clear {
    clear:both;
{

}
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}
Click to expand...

Could it be something to do with the document type at the top of the page?
 
Upvote 0 Downvote
D

Dobby

Member
Nov 8, 2010
156
5
Everything in my css file works except these things:

Code: 
.info {
color: #00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color: #4F8A10;
background-color: #DFF2BF;
background-image:url('success.png');
}
.warning {
color: #9F6000;
background-color: #FEEFB3;
background-image: url('warning.png');
}
.error {
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
.validation {
color: #D63301;
background-color: #FFCCBA;
background-image: url('validation.png');
}


.button {
    display: inline-block;
    background: #66ab04;
    -webkit-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
    -moz-box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
    box-shadow: 0px 1px 0px 0px #82ba31 inset, 0px 0px 0px 4px #e6e6e6;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    text-shadow: 0px 1px 1px #497a03;
    padding: 6px 30px;
    border-color: #5b9904;
    border-width: 1px;
    border-style: solid;
    font-family: Arial, Helvetica, Sans-serif;
    font-size: 14px;
    color: #ffffff;
    font-weight: bold;
}
.button:hover {
    background: #9bce00;
    -webkit-box-shadow: 0px 1px 0px 0px #add72e inset, 0px 0px 0px 4px #d5efab;
    -moz-box-shadow: 0px 1px 0px 0px #add72e inset, 0px 0px 0px 4px #d5efab;
    box-shadow: 0px 1px 0px 0px #add72e inset, 0px 0px 0px 4px #d5efab;
    text-shadow: 0px 1px 1px #698c00;
    border-color: #93c300;
}

I have no idea why
 
Upvote 0 Downvote

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)
☀️  Switch to Light Theme

Latest posts

Top