PHP page looks fine by itself, but CSS Divs fall apart on PHP include

Hi everyone. Thanks for your help in advance, this problem I'm having really has me puzzled.
The issue I'm having is, I have two php files. body.php with content to be included and index-3.php as the container. When I load body.php by itself in the browser, the layout looks fine. When I load the index-3.php file that uses the php include function to load body.php through itself, some of the divs in the body.php file come apart.
I'm old hat at building pages with tables and Iframes, but very new at using divs and php.
Here are the two files, so you can see for yourselves:
http://www.hitn.tv/index-3.php (the container)
http://www.hitn.tv/body.php (the included)
Is this a CSS issue, or a php issue?
The index:
The Body:
                                                                                                                            Content on this page requires a newer version of Adobe Flash Player.
    Temas de interés para la
comunidad hispana Hoy
debatiremos un interesante
asunto que afecta a nuestra
comunidad
7/27 - Venezuela en la mira
por   tráfico de drogas
    7/27 - Venezuela en la mira
    por   tráfico de drogas
      7/27 - Venezuela en la mira
      por   tráfico de drogas
        7/27 - Venezuela en la mira
        por   tráfico de drogas
          7/27 - Venezuela en la mira
          por   tráfico de drogas
            7/27 - Venezuela en la mira
            por   tráfico de drogas
The Stylesheet:
@charset "utf-8"; body { background-image: url(images/background.jpg); background-attachment: fixed; background-color: #FFE2BA; background-repeat: repeat-x; text-align: center; } .containerdiv { width: 953px; margin-left: auto; margin-right: auto; } .boxtext { font-size: 11px; color: #000; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: normal; text-align: center; } .rightside { width:762px; height:584px; float: left; overflow: hidden; } .sidebar { } .lowerbar { } #mainsitedivcontainer { width: 762px; } .latestvideos { width: 699px; height: 61px; margin-bottom: 5px; margin-top: 0px; margin-right: 0px; margin-left: 0px; } #leftbookend { float: left; } #rightbookend { float: right; width: 31px; height: 142px; } #videobox { float: left; width: 550px; } #mainsitevideotextblock { float: right; width: 212px; } #mainsitevideotextblock { background-color: #F4F4F4; height: 420px; } .videothumbnaildivframe { height: 61px; width: 82px; overflow: hidden; float: left; } .videotextboxdescription { height: 61px; width: 151px; overflow: hidden; float: right; background-color: #FFF; border-top-width: 0px; border-right-width: 3px; border-bottom-width: 0px; border-left-width: 3px; border-top-style: none; border-right-style: solid; border-bottom-style: none; border-left-style: solid; border-right-color: #D4D4D4; border-left-color: #D4D4D4; text-align: center; } .picdivleft { float: left; height: 61px; width: 233px; } .picdivright { float: right; height: 61px; width: 151px; } .picthenvid { height: 61px; width: 233px; } .centerboxdiv { width: 233px; height: 61px; float: left; } #doubemenucontainer { height: 122px; width: 699px; float: left; } #middlebar { height: 15px; width: 762px; clear: left; } .boxtext { font-size: 11px; color: #000; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: normal; } #finalvideowrap { height: 142px; width: 762px; background-color: #D4D4D4; overflow: hidden; }
Any help at all is much appreciated!
Thanks so much,
Evan

Hi there, and welcome to the forums!
Could you please provide a screenshot of the website when it is previewed in a browser/live view? This way I can better understand the conflicts that are occuring in your code.
It is always a good practice when coding a website to preview it in the browser as you code, to make sure there are no conflicts. It's important to remember that in the end, your viewers will be viewing your site in a browser, not in Dreamweaver's preview. : )

Similar Messages

Pages preview fine in DW, but CSS appears to be ignored on live website

This is very basic, but I can't figure it out. I am the successor webmaster for a very simple 15-page website.   The site has some layout issues that need correcting, and I have rewritten the pages using more of a CSS-based layout since (among other reasons) I don't understand the original tables-based layout. I used the DW twoColFixedLtHdr.css pre-fab layout. The re-written pages look fine in the DW and preview fine in Safari and Firefox. The pages did not look right once I uploaded them, so I replaced the pages with the originals. It appears the stylesheet is being ignored. I changed the name of the css file to "newstylesheet" to get of the upper-case letters, and have looked over everything closely but can't find the issue.
This is a sample page. http://living4zachary.org/whowearetestpage.html
None of the CSS formatting is there, most notably the left sidebar should have a black blackground and the main text should wrap around it since the sidebar is floated left.
On the host site, all of the html pages are in a sub-directory called public_html. The newstylesheet.css file is a first-level file, right off the main root.
Here is the code, brought forward from a temple, attaching the style-sheet:
<link href="../newstylesheet.css" rel="stylesheet" type="text/css" />
Here is the code establishing at the beginning of the sidebar:
<div class="newstylesheet" id="sidebar1"><a href="index.html">Home</a>
      <p><a href="aboutzac.html">About Zachary</a></p>
      Who We Are</a></p>
      <p><a href="whatissca.html">What Is S.C.A.</a></p>
      <p><a href="#">How You Can Help!</a></p>
      <p><a href="upcomingevents.html">Upcoming Events
      </a>
      <p><a href="oursponsors.html">Our Sponsors</a></p>
      <p><a href="contactus.html">Contact Us</a></p>
      <p> </p> 
</div>

</div>
<div id="mainContent">
I don't think the problem is in this code, since DW is perfectly happy with it. Somehow, the css is linking up with the page on DW, but not on the server.
This has really got me baffled. Can somebody please help me?
Here is a picture of the root directory on the host server, where you can see the newstylesheet.css and the public_html sub-directory that contains all of the live pages and the whowearetestpage:

Ned and Nadia:
Your replies are very appreciated. They have solved my problem for the test page, and I'm very confident for the other 15 or so pages to follow.
Nadia: I wish the photo would have attached. The newstylesheet is there plain as day when I look on the server's file manager. But, I also couldn't pull it up when I tested it as you did. There are other css files there that I could access. They are all on the same file directory - some would open, some wouldn't. Not only is newestylesheet listed on the server, I can download it and open it up. This is very strange to me, but a wonderful piece of troubleshooting on your part. (I have looked a hundred times for some kind of typo, but it just isn't there.)
Ned: It worked like a charm when I moved the stylesheet to public_htm.   In my DW file directory, I have the css file on the main root and pages in public_htm sub-directory - and that's the same way DW uploaded them to the server. That's the way the original pages were organized, and that's the way they "appear" to be on the server. However, since the subject css file was "there but not there", it just wasn't working.
I'm not familiar with how this forum works, but I noticed a "Solved Problem" button. I'm going to try to click that for both answers.
You guys are great. I am so grateful for your help.
Steve J.
Plano, TX

Page looks fine in browser, but layout completely messed up in DW

I created a 2 column page in DW and it looks fine in my
browser, even at different resolutions and text sizes. However,
whenever I look at it in DW, the right column drops under the left
column. It basically looks like a mess, and the person who will be
adding content will freak out. How can I fix this?

Never mind. I fixed it.

Pages looks fine but prints blank

Using Pages in page layout mode, starting with a blank template, portrait 8.5 x 11.
The composed page looks fine on the screen but shows up completely blank on the printer. Tried PDF, Preview etc. all blank. The content even shows blank in the printer dialog. I'm baffled.

Duh! I have (embarassingly) solved my problem!
Somehow I had left the option "even Pages only" turned on and as there was only a single page I was printing a null set. Unfortunately the print dialog says something like 'using latest settings' and doesn't list them so it took me a while to realize the error. I've only been using a Mac since 1985 after all!

Dreamweaver text looks fine in Safari but not Firefox NEED HELP!!!

Dreamweaver text looks fine in Safari but not Firefox, all my text goes out of alignment and the fonts look like different sizes. Please let me know your thoughts. Here is a link to the page I'm having problems with. http://www.alexandrasantibanez.com/bio.html

I had the same problem for days what a waste of time trying
to figure out code... the code was fine. I was running flash player
7.0 Upgrade your flash plugin to 9.0 and it should work fine in
Firefox and IE. It did for me.

I made an iMovie, 6.0.3 using music from iTunes and photos from the Internet. It looked fine on iMovie, but when I uploaded it to youtube,some of the photo near the beginning was corrupted.What steps should I take to export iMovie for youtube?

I made an iMovie, 6.0.3 using music from iTunes and photos from the Internet. It looked fine on iMovie, but when I uploaded it to youtube, some of the photo near the beginning were corrupted on youtube. I tried a different photo, and the corruption took place at the same moment of the video. How do I prepare the video for export to get it ready for youtube? I wasn't sure whether to clik web or web streaming. Am I supposed to clik Quick Time after I clik Share?

I unfortunately cannot remember where I got the 'trrndlines' plugin... I assume that it must have been from CFX (as it is located under /Users/Dom/Library/iMovie/Plug-ins/cfx/XXXtrrndlines.bundle).
As for what it does, I also do not know, as I do not think I ever used it in my previous video projects.
At this stage, I think I just need to uninstall it so that iMovie doesnt try to use it.
Do you know how to uninstall a CFX plugin in iMovie?
NOTE: I have re-installed iMovie 6.0.4 (instead of iMovie 6.0.3), but still encounter the same issue.

PDF looks fine on screen but text does not print

PDF created from Word looks fine on screen but text does not print (graphics do). Alos loses text on FTP or Email. Windows 8.1 64bit. Acrobat XI Std. Word2013. Print to PDF from Word 600dpi, use doc fonts, download as softfont. Arial, calibrai - all fonts lost. Same issue as Phillipio61 and alacker2?.

Problem not with all fonts. Problem with arial and calibri fonts - maybe others. Times New Roman, gil sans, viner are OK for example.

Why page looks fine in Design view but not live view?

I am new to DW. I created a page that looks fine in design view but now I cant get it to show up in live view or the browser preview. Can some one give me some areas to troubleshoot. Most of the code is from a previous page I created that still looks fine in every view. I am not sure what I could be doing different in setting up this site.

Thanks for taking the time to reply to question. Aftr taking a break. I came back realized I inserted the stylesheet before I changed site settings. I just needed to remove the forward slash from my stylesheet declaration. FYI for anyone else new to DW: if stuffs not showing in Live View and Browser Preview eg background images, Go to Manage Sites and check your site setting for Links relative to: You may have switched between document and site root. Thus breaking your links to images or in my case the entire style sheet.

When I load an index.html file, the page looks fine, but when I refresh, the page shrinks.

I am using Dreamweaver. I open an index.html file in Firefox and it looks fine. When I make changes, and then refresh in Firefox, the page will shrink. If I close out Firefox and open the file in Firefox, it's fine until it's refreshed and then it shrinks again.
The file has one background image that is 1024px by 768px. I made sure the browser was completely open and I have a 27 inch monitor, so there is no reason for it to shrink down.
I've opened the same file in Chrome and Explorer and this doesn't happen.
I've uninstalled and reinstalled Firefox hoping this would help, but it didn't.
Suggestions on how to make this stop?

Reset the page zoom on pages that cause problems: <b>View > Zoom > Reset</b> (Ctrl+0 (zero); Cmd+0 on Mac)
See [[Text Zoom]] and [[Page Zoom]] and http://kb.mozillazine.org/Zoom_text_of_web_pages

Page looks fine in live view but not fine in safari

my index.html page looks okay in live view, but when i open it in safari some of my text is unformated. My CSS page is correct so the problem lies in my code. I have attached the html file, any help will be appreciated. Thank you!

Thanks for taking the time to reply to question. Aftr taking a break. I came back realized I inserted the stylesheet before I changed site settings. I just needed to remove the forward slash from my stylesheet declaration. FYI for anyone else new to DW: if stuffs not showing in Live View and Browser Preview eg background images, Go to Manage Sites and check your site setting for Links relative to: You may have switched between document and site root. Thus breaking your links to images or in my case the entire style sheet.

Website site looks fine in Dreamweaver but...

So I am creating my own website for the first time and after a bunch of problems, I've ran into one I am unsure of how to fix.
ngkevin-art.com/about.html
This is how it looks like in Dreamweaver and how I want it to look:
http://i.imgur.com/wlOIR.jpg
But when I go into Live View, or see it online, it falls apart. Any help would be appreciated.
CSS:
@charset "utf-8";
/* CSS Document */
/* General HTML Tag Rules */
body {
          width:auto;
          height:auto;
          background-image:url(images/bg_demo2.png);
          background-color:#2d2d2d;
          background-repeat:no-repeat;
          background-position:center;
          margin-top:30px;
@font-face {
    font-family: Harabara;
    src: url(Harabara.ttf);
    font-weight:200;
h1 {
          font-family: Harabara, Helvetica, Arial, sans-serif;
          font-size:150%;
          color:#CECEBC;
h2 {
          font-family: Harabara, Helvetica, Arial, sans-serif;
          font-size:100%;
          color:#CECEBC;
.text {
          margin-left:75px;
          width:auto;
          float:left;
#text2 {
          width:408px;
          text-align:center;
.text3 {
          margin-left:25px;
          width:auto;
          float:left;
#container {
          width:1280px;
          height:960px;
          margin-left:auto;
          margin-right:auto;
#wrapContact {
          width: 520px;
          height: 100px;
          margin-left:735px;
          margin-top: 10px;
          clear: both;
#linked {
          float:left;
          margin-top:35px;
          width: 175px;
#facebook {
          float:left;
          width: 200px;
          margin-left:32px;
          margin-top:25px;
#email {
          float:left;
          width:75px;
          margin-left:35px;
          margin-top:20px;
#wrapNav {
          width: 475px;
          margin-left:750px;
          margin-top:60px;
#demo {
          width: 500px;
          text-align:center;
          margin-top: 70px;
          margin-left:auto;
          margin-right:auto;
#flatbook {
          width:250px;
          margin-left:auto;
          margin-right:auto;
          margin-top:20px;
#wrapAbout {
          margin-left:auto;
          margin-right:auto;
          margin-top:75px;
          width: 1100px;
          height:auto;
#picture {
          width:408px;
          margin-top:100px;
          float:left;
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kevin Ng Art Portfolio</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8">
</script>
<link rel="stylesheet" type="text/css" href="default3.css"/>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link href="lightbox.css" rel="stylesheet" />
</head>
<body>
<div id="container">
                    <div id="wrapContact">
                  <div id="linked">
                <a href="http://www.linkedin.com/pub/kevin-ng/25/558/75b">
                <img src="images/logo_linked_large.png" width="auto" height="auto" border="0" alt="linkedin_logo" /> </a>
            </div>
            <div id="facebook">
                <a href="http://www.facebook.com/profile.php?id=1309131548">
                <img src="images/logo_fb_large.png" width="auto" height="auto" border="0" alt="facebook_logo" /> </a>
            </div>
                              <div id="email">
                      <a href="mailto: [email protected]">
                <img src="images/gmail.png" width="auto" height="auto" border="0" alt="email_icon" /> </a>
            </div>
                    </div> 
              <div id="wrapNav">
            <a href="index.html">
                            <img src="images/bg_tab_main.png" width="auto" height="auto" border="0" alt="Main" /> </a>
            <a href="demo.html">
                            <img src="images/bg_tab_demo.png" width="auto" height="auto" border="0" alt="Demo" /> </a>
            <a href="about.html">
                            <img src="images/bg_tab_about.png" width="auto" height="auto" border="0" alt="About" /> </a>
        </div>
              
        <div id="wrapAbout">
                              <div id="picture">
                      <img src="images/picture.jpg" width="auto" height="auto" alt="picture" />
                <div id="text2">
                    <h2> Me in the middle left, my buddies, Jordan Gabriel on the left and Edmund Zhu on the right,
                        and finally, Epic Games VIP, Cliff Bleszinski! Taken at GDC 2010. </h2>
                </div>
            </div>
            <div class="text">
                <h1> Resume: <br/>
                <br/> Email: <br/> <br/>
                <br/> About Me:</h1>
                                 </div>
            <div class="text3">
                        <h1> <a href="resume/Kevin Ng Resume2.doc"> Click Here </a>
                        <br/> <br/> <a href="[email protected]"> [email protected] </a> <br/>
                <br/> <br/> <font size="4">
                          My desire to be in the game development industry is to work with other individuals that take pride in creating a game,
                          something that can be enjoyed by a multitude of people. There is nothing I would like better than to lend my talents and
                    artistic skills for that purpose. <br/> <br/>
                    I believe the key to creating memorable game art, whether it be characters or environments, is the story.
                    Just like reading a good book or watching a thrilling movie, I loved to be immersed in the world of the game. As a result,
                    I had an affinity to Role-Playing Games. Classic games of my generation such as Chrono Trigger, Final Fantasy, and Zelda
                    showed me a world of endless imagination. <br/> <br/>
                    The characters which are the focal point of the story, their goals and motivations, their trials and tribulations,
                    their victories and defeats... These are the things I think about constantly when I look at them.
                    A character without depth doesn't exist, but if they do, I can only imagine how boring that would be.
                </font></h1>
            </div>
                      </div>
          </div>
</body>
</html>

Hi there, and welcome to the forums!
Could you please provide a screenshot of the website when it is previewed in a browser/live view? This way I can better understand the conflicts that are occuring in your code.
It is always a good practice when coding a website to preview it in the browser as you code, to make sure there are no conflicts. It's important to remember that in the end, your viewers will be viewing your site in a browser, not in Dreamweaver's preview. : )

TS3946 Aperture Book: images look fine in Aperture but not in PDF preview. OS 10.9, Aperture 3.4.5

Aperture 3.4.5, OS 10.9. When making a PDF prior to ordering a book, I note that images look fine within Aperture book module, but about 10 out of 100 images look terrible in the PDF. Shall I ignore this and go ahead and order the book?

Hi,
Strangely I'm now having exactly the same problem all of a sudden. I've been building the book for about a month now (I've made about 6 before without any trouble) and along the way have been producing a pdf of the book to see how it will look. Yesterday I noticed some of the images seemed to have lost colour when looking at the pdf version and then today, many pictures all of a sudden look exactly like the example you've supplied above.
I've tried shutting down my imac and restarting thinking it was a memory issue, have checked if I had any filters activated (which I don't and I haven't used filters in books before either), have tried repairing then rebuilding aperture, copying the book to a new library, new location, opening on a different mac and then printing again but none of this had any positive effect.
So from what I understand from your last post, the workaround you came up with was to revert to the original of each image that had the problem and then make the adjustments again?

Why do photos look fine on camera, but too dark on iphoto? Have to edit almost every indoor shot to lighten

Why do my photos look fine on the digital, but too dark on iphoto? I have to edit almost every indoor picture to lighten. camera is new. have ilife. iphoto is crowded-could that be problem?

No - iPhoto probbably is not crowded (it workd up to 250,000 photos) and even if it is that has no effect on the screen display
what color profile are you using? What calibration is your screen set to?
LN

DW Template created from existing page looks fine in IE7,FF,Opera,Netscape but Not IE6

I am working on a website that I want to make certain pages
into templates for re-use.. I have an existing page designed
outside of DW that looked great in IE6,IE7,FF,Opera, and Netscape
but the moment I saved it as a Template and then created a new page
and look at the new page in IE6 the css is off... Not so off that
the CSS is not being used but just not right, but If I look at it
in anyother browser it's fine... Is DW "fixing" my code for me?
I've looked through the settings and all the Code Rewriting options
are unselected or is this a bug and can I get around it...

Good luck. Looks like a bad site definition to me....
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"WhittleOne" <[email protected]> wrote in
message
news:f6lp83$pd3$[email protected]..
> Nevermind I found it... It changed my links to
stylesheets and js (which
> where
> flawed before not sure why IE6 was ok with them before)
> From (after convert)
> <link rel="stylesheet" type="text/css"
href="/--newWWW/css/nav/nav.css" />
> <link rel="stylesheet" type="text/css"
href="/--newWWW/css/main.css" />
> <script
type="text/javascript"src="/--newWWW/scripts/misc.js"></script>
> <script
type="text/javascript"src="/--newWWW/scripts/dates.js"></script>
> To (actually work)
> <link rel="stylesheet" type="text/css"
href="../css/nav/nav.css" />
> <link rel="stylesheet" type="text/css"
href="../css/main.css" />
> <script
language="JavaScript"src="../scripts/misc.js"></script>
> <script
language="JavaScript"src="../scripts/dates.js"></script>
>
> thanks for the feed back I just needed someone to tell
me my code was crap
> and
> that it wasn't DW.... 8^)
>

Pages look fine in Design mode but Preview and Publish Distorted Footers

I'm experiencing some unusual issues with Muse. Footers on some of my pages are either not displaying content or distorting them..for example:
http://lawtechpartners.com/consulting.html
In muse Design mode it looks ok - screenshot here:
https://dl.dropboxusercontent.com/u/11434055/muse-screenshot.PNG
But live and in preview mode the issue shows.
I went so far as to delete ALL the files on the server and upload the entire site and all files from scratch to make sure nothing was colliding.
Can anyone help?
Thanks in advance.

Yes - I'm sorry I should have come back in and closed the question. It was all being caused by a very simple and short Google+ code that was to display the Google+ logo. As soon as I removed it, the footer rendered correctly. Here is the offending code:

<div class="g-plusone" data-size="medium"></div>

<script type="text/javascript">
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
</script>

PHP page looks fine by itself, but CSS Divs fall apart on PHP include

Similar Messages

Maybe you are looking for