Log in

View Full Version : CSS and PHP interaction? - floating problem different on different pages


mondealenvers
09-17-2012, 10:15 PM
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.
bernie1227
09-17-2012, 10:38 PM
What have you tried in terms of moving it with CSS?
mondealenvers
09-17-2012, 10:58 PM
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.
djr33
09-17-2012, 11:21 PM
(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/
mondealenvers
09-18-2012, 12:58 AM
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.
traq
09-18-2012, 01:06 AM
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:
<!-- 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:
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 ###

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.
mondealenvers
09-18-2012, 02:09 AM
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. ??????????
traq
09-18-2012, 03:54 AM
...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.

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.phpthe 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.
mondealenvers
09-18-2012, 11:01 AM
Adrian, it was a missing </div> in the footer.php before the adSpace area. What's a few more gray hairs. Thankyou.
traq
09-18-2012, 02:21 PM
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].