I have created websites before, but this is my first experience with PHP, and through trial and error and just plain being stubborn I have managed to fix all but one of the problems I am having with my site.
I have a login section for my website, which works beautifully. Everything looks as it should. The only exception is on the pages after logging in, there appears to be an extra space above the menu bar.
I’m not sure what you might need to see in order to be able to assist me.
maybe u got a
somewhere
Could also have a css margin value set… post some code or markup for us to look at.
Below is the PHP code that I have at the top of the pages in question. All it is supposed to do is verify that the user is logged in, and then show the page if they are.
[php]
<?php require_once 'classes/Membership.php'; $membership = New Membership(); $membership->confirm_Member(); ?> [/php]Membership.php has the following code:
[php]
<?php require 'Mysql.php'; class Membership { function validate_user($un, $pwd) { $mysql = New Mysql(); $ensure_credentials = $mysql->verify_Username_and_Pass($un, md5($pwd)); if($ensure_credentials) { $_SESSION['status'] = 'authorized'; header("location: index.php"); } else return "Please enter a correct username and password"; } function log_User_Out() { if(isset($_SESSION['status'])) { unset($_SESSION['status']); if(isset($_COOKIE[session_name()])) setcookie(session_name(), '', time() - 1000); session_destroy(); } } function confirm_Member() { session_start(); if($_SESSION['status'] !='authorized') header("location: login.php"); } } [/php] Mysql.php has the following code: [php] <?php require 'Mysql.php'; class Membership { function validate_user($un, $pwd) { $mysql = New Mysql(); $ensure_credentials = $mysql->verify_Username_and_Pass($un, md5($pwd)); if($ensure_credentials) { $_SESSION['status'] = 'authorized'; header("location: index.php"); } else return "Please enter a correct username and password"; } function log_User_Out() { if(isset($_SESSION['status'])) { unset($_SESSION['status']); if(isset($_COOKIE[session_name()])) setcookie(session_name(), '', time() - 1000); session_destroy(); } } function confirm_Member() { session_start(); if($_SESSION['status'] !='authorized') header("location: login.php"); } } [/php] The CSS that affects the general layout of the pages is this: [code] .main { margin-top: 25px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 960px; } .bg1 { background:url(../images/bg_menu.png) 0 0 repeat-x } [/code] On the pages that do not require the user to login, the top margin is 25px...however, on the pages that dp require the user to be logged in, it is more like 50px. I would attach pictures of the top margin/menu bar if I could figure out how to. Hope this is the information you need to help as this is really starting to drive me nuts. I know it's only a visual thing, and something that most people probably wouldn't notice, but my OCD has kicked in and it is annoying the heck out of me because it doesn't line up as it should be.Well, you showed a CSS with a top margin of 25px, but, it is only set for classes marked “main”. This usually does not affect the of the page. So, somewhere near the top of the pages it affects, there must be some code that uses the “main” class of CSS. so, perhaps you can post a few lines of the beginning of one of the pages that are affected by this display error.
PHP code will NOT alter the page unless you are printing or echo’ing some HTML code that would cause a gap.
My guess is that your CSS is causing this. Post the first 20 lines or so of one page that is showing the gap.
(Of course, do not post any user ID’s or passwords!) Then, perhaps we can help… Thanks!
I have created a temp account to make it easier to view. If I was to put the code in here it would take up a lot of space.
http://www.illusionsclubsl.com
Username: Guest
Password: temp
The pages that do not require logging in view correctly. The login page as well as the pages that require the user to be logged in are the ones with the extra space.
Well, if you mean the gap above the menu bar, it is controlled by your CSS code as far as I could see…
You can view each page and VIEW-SOURCE of each and see how the page looks after PHP is done with.
In this manner, you can see what is different on each page and find the issue. I am fairly sure it is just the
margin pixels you have set up for the two main DIV’s. “bg1” and “main”. If they both have margins, the
total margin will be the combined value of these two.
Not sure if that help, but, hope so!
That isn’t the problem because pages that are not affected have both those DIVS as well.
There is no margin set for the bg1 DIV, that set the background image only. .main is the only DIV that has a margin set.
As another user mentioned, php can’t visually affect the page unless you echo/print something. When viewing the source of your various pages, one thing I notice is that on your login page, you don’t use internal CSS, you only reference some externally. But on the other public pages, you do have internal CSS as well. It has to be a CSS issue. Unfortunately my styling skills aren’t so good, but that’s my 2 cents.
There is no internal styling on the login page as there isn’t much there. The other pages have a lot more information and need of styling specific to those pages…mostly in the form of tables.
After studying the code I can’t seem to find what I’m looking for, but I had suspicions that you may have an empty block element floating around somewhere (not paired up) or something like that. I tried looking at the divs and seeing if there was an explanation for why you have that extra space at the top, and I wasn’t able to find it. You are more familiar with the code, maybe you could look for something like this? That’s my best guess.
I opened one of the pages in Notepad++…can’t see any extra tags, either opening or closing.
I also ran the code through the W3 Validator, minus the bit of PHP at the top. It passes with only 2 warnings.
[ol][li]Using experimental feature: HTML5 Conformance Checker.
The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.[/li]
[li]Using Direct Input mode: UTF-8 character encoding assumed
Unlike the “by URI” and “by File Upload” modes, the “Direct Input” mode of the validator provides validated content in the form of characters pasted or typed in the validator’s form field. This will automatically make the data UTF-8, and therefore the validator does not need to determine the character encoding of your document, and will ignore any charset information specified.
If you notice a discrepancy in detected character encoding between the “Direct Input” mode and other validator modes, this is likely to be the reason. It is neither a bug in the validator, nor in your document.[/li][/ol]
I am viewing the pages in question using Google Chrome. A friend of mine viewed them in Firefox and they appear correctly…verified by viewing his screen through Skype.
To make things more confusing, I am viewing them in Firefox and they are not appearing correctly (that is, some of them still have the space).
facepalms this is getting so crazy…I’m willing to bet it’s is something so stupid that once it is found I am going to be like “Why didn’t I see that already”
Two more suggestions:
Try printing some text above the two initial divs, then try printing some inside the first but not inside the second, then try just the second…and you get the point. See if it skips the space still. That might help eliminate parts of the code that could potentially be problems.
Second idea (hope it doesn’t come to this, but you could use this complete list of block elements
http://www.tutorialchip.com/tutorials/html5-block-level-elements-complete-list/
and do the same check as I suggested for div for all of these. Obviously the first idea is much easier, and the one I’d recommend trying first.
Ok, I think we are finally starting to possibly get somewhere. I added a after the first div of the body. This has moved the menu bar background up to where it belongs…however, the text has stayed where it was.
SUCCESS!!
I inserted the css styling for the main div onto one of the pages that are being affected and played with the top border. After changing it to -25px and adding the after the first div on the page, the page now appears as it should!
[code]
~ DJ Guidelines ~ .style1 { text-align: left; } .style2 { text-align: center; margin-right: auto; margin-left: auto; border-spacing: 30pt 10pt;} .style3 { height: 2px; background-color: #7532a9; } .style4 { text-align: center; } .main1 { margin-top: -25px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 960px; }Well, CONGRATS!
I am surprised the " " was needed, but, I did read somewhere that in a DIV, you need something for the CSS to grasp, so maybe that was part of it.
Always a nice warm fuzzy feeling solving a programming puzzle! See you at the next puzzle…