Results 1 to 10 of 10

Thread: CSS and PHP interaction? - floating problem different on different pages

  1. #1
    Join Date
    Feb 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS and PHP interaction? - floating problem different on different pages

    This is not a site that I built but must edit.

    Here are two different examples where the ad banner is in the wrong and different position, called with footer.php

    On the index.php page, http://www.jcmc.neu.edu/index.php, the ad banner is at the bottom of the page, but should float at the top right side of the main content area.
    On all the other site pages, the same ad banner floats left, hiding under page content, when it should float top/right of main content area. See this example: page: http://www.jcmc.neu.edu/john_coltrane.php

    The ad banner is part of a footer.php file: http://www.jcmc.neu.edu/footer.php

    I've tried every conceivable variation for nearly 6 hours and can't figure this out. I haven't edited any of the exterior .css files, so am not sure why this is happening.


    Just tearing my hair out. Any help would be greatly appreciated.

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    What have you tried in terms of moving it with CSS?
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Feb 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It didn't seem like I would need to edit anything within the footer since it was originally working.
    It seems to function differently within the <body> on different pages, but I don't know why.
    I haven't touched the external .css files at all.
    What I have done is edit the index.php page info contents: concert information, background etc...

    Honestly, I am terrified to touch anything at this point.

  4. #4
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    (This is intended to be friendly helpful advice. It's phrased directly to be clear, not as an insult of any kind. This stuff can be tricky when you first start.)

    CSS and PHP interaction?
    That's a logical contradiction. They do not interact.

    PHP generates the CSS, then the CSS does whatever it does. They work separately and can never have any sort of problem/interaction.

    But if your CSS doesn't work, then there are two possibilities:
    1) Your CSS doesn't work.
    2) Your PHP is causing the CSS to not work because it is generating the wrong CSS.

    To solve this, what you need to do is eliminate the PHP by looking at the generated source code:
    1) View your page (with the PHP), and click view>source.
    2) Copy and paste all of that into a new test page.

    Now, you can debug the CSS without worrying about the PHP. At this point you just have plain CSS. We'll worry about the PHP later.

    The next steps are:
    1) Fix the plain non-PHP page (find the CSS errors and correct them). Pay close attention.
    2) After you know what you fixed and how you fixed it, then you can fix the PHP so that it will generate this target CSS.


    Does that all make sense?

    Unfortunately it's not really something we can help you with as an overall process because it requires using your server to do all of the steps. But if you have questions with either 1) why the [generated] CSS isn't working, or 2) why your PHP is generating unexpected CSS, let us know.


    Finally, this may be all irrelevant. Look carefully to be sure that the PHP isn't just combining two pages that don't integrate well-- the CSS may be fine in both, but have problems when combined. [If that's the case, you'll need to rewrite the CSS/HTML to work in an integrated page. There's no standard method of doing this, just trial and error.]

    The first step in all of this is to validate your page! This will ensure that you don't have obvious problems like (as can often happen when using PHP includes) two <html> tags, or anything else that might confuse the browser and possibly change how CSS works (at a deep level); if that's not the problem, you still might have invalid CSS (maybe an unclosed <div>) and the validator will find it. Once you know your page is valid, it will be a lot easier to fix everything, and you can be relatively certain that it will work similarly in most browsers as well.

    Validator: http://validator.w3.org/
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  5. #5
    Join Date
    Feb 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    So having created a test.html page, all of the elements come in correctly with the exception of the ad banner, which still hides behind everything on the left when it should float right. The validator shows a lot of niggling errors which aren't in the html when I go to correct it.
    I don't know how to get the <div class="adArea"> in the footer.php to float left of everything on the page. Should it be forced right? I'm confused because there is no container vessel, or so it would seem, containing all the elements of the page.

  6. #6
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    It kinda struck me as odd that almost all of your page's content is inside a div named "header." This might (meaning maybe, maybe not; I don't know) indicate that you, or others, have done a lot of cut-n-paste editing over time, or something similar - are you sure your HTML is all in the intended order? As Daniel says, I'd make sure your HTML is all correct before trying to fix the CSS.

    Speaking of fixing HTML, a large portion of the errors you get validating that page are a result of using the XHTML doctype with lots of non-xhtml syntax. For example, while html allows uppercase attribute names, xhtml does not. That issue by itself accounts for almost half of your validation errors. I also see a problem with your div.adArea:
    HTML Code:
    <!-- this:
    
    <div class="adArea" style="float:left>
    
    SHOULD be: -->
    <div class="adArea" style="float:left;">
    As far as your positioning problems go, I see the ad in the same position -behind the main content- on both pages (whereas you describe them as being in different positions). This might mean you've been tinkering, or that you also have some cross-browser issues (I'm using Chrome).

    If I understand correctly, try removing the float from div.adArea and add the following rules:
    Code:
    position: relative;
    left: 100%;
    If not, can you describe further (or post a pic?) exactly where you expect the ad to be?

    A suggestion for when you start tinkering: do not work on the "live" page! Either copy the html source and work locally, as Daniel suggests, or simply use the inspector (firebug, whatever) to change the css properties from your browser. Make sure you keep track of what you do.

    ### EDIT ###
    Quote Originally Posted by mondealenvers
    I'm confused because there is no container vessel, or so it would seem, containing all the elements of the page.
    there is a div named "container" as well as another, unnamed child div (with "width: 815px") that contain everything inside the body, except an anchor and a few scripts at the top.

    See my comment above about the validator issues.

    ### EDIT#2 ###
    also (and this probably has nothing to do at all with your current problems),

    your page says it uses UTF-8, but a few characters are showing as <?> - an indication that you're using the wrong charset.
    It would *appear* that your page is actually encoded with ISO-8859-1.

    I know this is not something that seems critical, but it should be corrected, if for no other reason than making those characters display correctly.
    Last edited by traq; 09-18-2012 at 02:22 AM.

  7. #7
    Join Date
    Feb 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Adrian,

    Can I just say, I did not make this site; it seems bloated with code for such a small site. I would have made it very differently. That said, I agreed to edit and update it and it's a nightmare.

    I fixed the <div class="adArea" style="float:left;">.

    Please kindly compare these two pages: http://www.jcmc.neu.edu/index.php
    and one of the other site pages, say: http://www.jcmc.neu.edu/press.php

    The ad banner appears on the right, CORRECTLY, on the index.php page, however all of the sponsor information at the bottom of the page DOES NOT.
    THe reverse is true on the other pages: i.e. Adbanner hides, but sponsor info comes in. ??????????

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    Quote Originally Posted by mondealenvers View Post
    ...Can I just say, I did not make this site; it seems bloated with code for such a small site. I would have made it very differently. That said, I agreed to edit and update it and it's a nightmare.
    that's okay. wasn't blaming. at some point, though, it may become "worth it" to do a rewrite instead of an edit.
    Quote Originally Posted by mondealenvers View Post
    Please kindly compare these two pages: http://www.jcmc.neu.edu/index.php
    and one of the other site pages, say: http://www.jcmc.neu.edu/press.php
    the pages are different.
    I'd start looking for problems right above div.footer.

    On one page, this div is inside div.header; on the other, it follows div.header. This affects how all the floats are cleared around it.

  9. #9
    Join Date
    Feb 2010
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Adrian, it was a missing </div> in the footer.php before the adSpace area. What's a few more gray hairs. Thankyou.

  10. #10
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    you're welcome.

    If your question has been answered, please mark your thread "resolved":
    • On your original post (post #1), click [edit], then click [go advanced].
    • In the "thread prefix" box, select "Resolved".
    • Click [save changes].

Similar Threads

  1. Resolved zendframework dB interaction
    By ggalan in forum PHP
    Replies: 1
    Last Post: 06-05-2011, 06:34 PM
  2. Replies: 1
    Last Post: 06-04-2009, 08:37 PM
  3. Replies: 1
    Last Post: 11-21-2008, 10:14 PM
  4. client server interaction
    By sukanya.paul in forum PHP
    Replies: 6
    Last Post: 05-10-2008, 02:39 PM
  5. AJAX interaction
    By city_coder in forum JavaScript
    Replies: 6
    Last Post: 04-15-2008, 05:41 PM

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •