Jump to content


Photo

Embedded HTML losses style

html css style php

  • Please log in to reply
8 replies to this topic

#1 bgrzinic

bgrzinic

    Member

  • Members
  • PipPip
  • 13 posts

Posted 26 July 2013 - 01:00 PM

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!

 



#2 requinix

requinix

    Transforming Moderator

  • Moderators
  • 6,125 posts
  • LocationWA

Posted 26 July 2013 - 01:18 PM

What am I missing here ?

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

#3 bgrzinic

bgrzinic

    Member

  • Members
  • PipPip
  • 13 posts

Posted 26 July 2013 - 01:37 PM

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 by bgrzinic, 26 July 2013 - 01:39 PM.


#4 DavidAM

DavidAM

    Advanced Member

  • Gurus
  • 1,974 posts
  • LocationSpring, TX USA

Posted 26 July 2013 - 01:43 PM

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 [code] [/code] tags when posting code.
-- I haven't lost my mind, it's backed up on tape ... somewhere!

#5 bgrzinic

bgrzinic

    Member

  • Members
  • PipPip
  • 13 posts

Posted 26 July 2013 - 01:50 PM

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 by bgrzinic, 26 July 2013 - 01:53 PM.


#6 bgrzinic

bgrzinic

    Member

  • Members
  • PipPip
  • 13 posts

Posted 26 July 2013 - 02:24 PM

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 ?



#7 DavidAM

DavidAM

    Advanced Member

  • Gurus
  • 1,974 posts
  • LocationSpring, TX USA

Posted 26 July 2013 - 02:34 PM

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.
-- I haven't lost my mind, it's backed up on tape ... somewhere!

#8 bgrzinic

bgrzinic

    Member

  • Members
  • PipPip
  • 13 posts

Posted 26 July 2013 - 03:11 PM

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 by bgrzinic, 26 July 2013 - 03:12 PM.


#9 jazzman1

jazzman1

    Advanced Member

  • Gurus
  • 2,659 posts
  • LocationMississauga, Canada

Posted 26 July 2013 - 03:37 PM

Wrong css:

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





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com