How to get this page layout correct

Theo
Theo used Ask the Experts™
on
I have a Drupal site at http://theorichel.nl/stralingshormese . There are two problems:
1. The grey background (I have never set any backgroundcolor, the page used to be white). It is not connected to the theme color, when I change that, the purple background remains
2. On the bottom of the page is a block that actually belangs in the right column.

Any suggestions are most welcome

Thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Line 6 of your stylesheet has this

body {
	color: #000;
	background-color: #8596AA;
}

Open in new window


That's where the colour is coming from, the stylesheet in question is a packed CSS file so cannot tell what the ultimate source is.

The sidebar looks like it has been added to the wrong section.

Author

Commented:
Thank you!
Wrt the background color, shouldnt that imply that other pages, e.g. theorichel.nl have that background as well. They do not. And, on these other pages the blocks do have a background color and not the main content. And, strange enough, on good looking pages the blocks do have a background color, not the body.

But I did find the cause, not the solution though. It is in the story: Evacuatie van de bevolking dodelijker dan de straling bij Fukushima . As soon as I put that story on another page, that page displays this problem.

Author

Commented:
Sorry for that double line.
I have set the stylesheets so that they are not packed anymore.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
The background is coming from this stylesheet

@import url("http://theorichel.nl/sites/all/themes/newsflash/css/violet.css?ojxtp7");

First line

Author

Commented:
Yes, but I think it is not on that level, but something went wrong in that article I mentioned. An unclosed div or something like that

Author

Commented:
If you look at the page you see that there is no horizontal line at the end of the article I mentioned, and at the bottom of the page there are two.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
Yes, but I think it is not on that level, but something went wrong in that article I mentioned. An unclosed div or something like that
That won't cause a stylesheet to be included - your background colour issue is in that stylesheet.

Author

Commented:
Then why are other pages on the site white? And I do not understand what you mean by 'stylesheet included', Where is it included?

Author

Commented:
Sorry. I do understand what you mean by stylesheet included, but that still leaves the other question.

Author

Commented:
OK, then I should say, the background color spills in the body. The bg should be the color as you say, but the body text should be in white.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
Dealing with one aspect at a time.
Sorry. I do understand what you mean by stylesheet included,
In your OP you said
The grey background (I have never set any backgroundcolor, the page used to be white). It is not connected to the theme color, when I change that, the purple background remains

We found that the colour was being set in a stylesheet that was packed.
You released a version with an unpacked stylesheet
When I checked the body colour again it was coming from a stylesheet - violet.css.
I did a view source on your page and found the line I pasted above.
You have now gone back to the packed CSS so it is no longer visible in the source.

Now, having looked at the site again and your references to white on the other page it transpires that the background colour is correct - the issue is why your referenced page does not have a white background.

I ran your page through https://validator.w3.org and it shows a missing <div> tag - that might be what is causing the problem.

Other than that the structure of the html is such that being able to work out what the actual problem is - is going to be very time consuming.

I suggest you do the following
Do a view source on a working page and the broken page
Copy the source from each and run it through an HTML formatter (http://www.freeformatter.com/html-formatter.html)
Save the result of both to separate files
Use a file comparison tool to compare the two and see where they are different

The issue I see with the "broken" page is that something is causing the <div id="page"> to terminate early. As the #page style is what controls the white background this is why you are not getting a white background on the broken page. To find the exact issue though is going to take some slog work.

Author

Commented:
That was it, thanks very much.  With your suggestions I could narrow it down to what we both suspected, missing or superfluous div tags. It solved both problems. Thanks very much.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial