Embedded HTML losses style

[bgrzinic]

Hello guys,

 

I have a problem with embedded HTML. I have a php web page and few lines of HTML code (couple of div tags put in php variable.

The problem is once I echo php variable that displays those DIVs, the style from linked CSS is lost or not applied.

If I write HTML code to the same file directly, without embedding it into php, the style is applied correctly.

 

What am I missing here ?

 

Thanks!

 

[requinix]

What am I missing here ?

The code in your post that shows what you're talking about.

[bgrzinic]

Here You go:

 

style.css

-------------------

#send_img:{
background:url(images/send_msg2.png) 0 0 no-repeat;
}

#send_img:hover{
background:url(images/send_msg2.png) 0 -34px no-repeat;
}

 

 

index.php:

-----------------

<link href="style.css" media="screen, projection" rel="stylesheet" type="text/css" /> <!-- liked stylesheet -->

 

 $outputList .='
                <div id="my_div">        
                </div>';

 

 

echo  $outputList;

 

 

 

Result: Div is displayed, but without css applied, or without background img.

Edited July 26, 2013 by bgrzinic

[DavidAM]

There is no CSS style for #my_div. And there is no HTML element with id="send_img". So the posted CSS will have no impact on the posted HTML.

 

Note: please use

tags when posting code.

[bgrzinic]

I'm sorry, here is corrected code. This is an example. My point is that CSS - HTML relation is working fine in the same file, and style gets applied.

But once the same code is embedded in php variable and outputted, style is lost.

 

 

style.css

-------------------

#my_div:{
background:url(images/send_msg2.png) 0 0 no-repeat;
}

#my_div:hover{
background:url(images/send_msg2.png) 0 -34px no-repeat;
}

 

 

index.php:

-----------------

<link href="style.css" media="screen, projection" rel="stylesheet" type="text/css" /> <!-- liked stylesheet -->

 

 $outputList .='
                <div id="my_div">        
                </div>';

 

 

echo  $outputList;

 

 

 

Is anybody familiar with the problem ?

Edited July 26, 2013 by bgrzinic

[bgrzinic]

Of course if I write inline style like this, it works fine:

 

index.php

---------------------------------------

 $outputList .='
                <div id="my_div" style="background-color:#666;">        
                </div>';

 

 

echo  $outputList;

---------------------------------------

 

, but not if style is included and linked from files head tag.

Is this familiar thing how server side php generates code (without applying css to HTML) or You think I might have problem somewhere else ?

[DavidAM]

I am not an expert at CSS, but I have had problems with styles when there is a mixture of classes and ids involved in an HTML heirarchy. Is the DIV contained inside another HTML element? How are the containing elements styled?

 

PHP simply writes HTML for you, it has no control on how the HTML is interpreted. If there is a problem, it is with the generated HTML, not with the fact that PHP wrote it.

 

Use the View Source feature of the browser to check your HTML. Is the DIV shown there with the ID as it should be?

 

Check the validity of the HTML and the CSS (at W3C QA Toolbox). Invalid markup can cause problems.

 

Also, make sure the link for the style sheet is correct; and that the urls in the stylesheet are correct. Using relative paths, can lead to problems if the HTML is in a different directory than the style sheet. Since you are using a relative path for the HREF, it is relative to the path of the HTML url. The image paths are also relative, but they will be relative to the CSS url. I highly recommend using absolute (url) paths for all of these.

 

If the problem persists, you might post the HTML (from View Source) showing the DIV and its containing elements, along with your CSS.

[bgrzinic]

OK, i'm not an expert too, but think this should work with no problems. Since paths to the css and other files are ok, (checked in the same file with regular HTML code and it's working), as You suggest, think that might be problem in mixture of classes and ids involved in an HTML heirarchy since i have my code written is such way.  

 

Anyway, I'll check all of the above You mentioned.

 

Thank You on advices.

Edited July 26, 2013 by bgrzinic

[jazzman1]

Wrong css:

#my_div:{
background:url(images/send_msg2.png) 0 0 no-repeat;
}