Page un-aligns...

mjrzasa

New Member
So I have followed this guide on youtube to make a contact form and I finished today. I have a problem, though. When I load everything up to the server, the page comes up differently aligned than my other pages on the site, and different than if I just had previewed the page in DW or a browser, so what is the problem? Please help.
mjrwebdesign.net/contact.php
That is my problem, if you go to contact.html, that is the page before I added any javascript or php and slightly different CSS.

The only thing I can think of as to why it changes after I put it up on a server is the php or javascript in the file changes it, or the JS validation file that is linked to. Notice even my nav bar is screwy.
 

CaldwellYSR

Member
EDIT: Before I go any further why is all of your html inside a script tag??? Even worse a misspelled script tag called scrpit????? When I spell it correctly your page completely breaks and disappears... I'm confused as to what you're doing here.

Your problem is not putting px after your px values in the CSS file. Margin, padding, font-size.... it seems like half the places you need to put a px value you're just putting the number. When you do this the value is completely ignored. Which is what you're seeing here. Oh and also all of your html is inside a script tag.... wha?!
 
Last edited:

Phreaddee

Super Moderator
Staff member
I've already flagged to mjrzaza that he needs to use px values. seems he is ignoring this advice.
also a script for the whole page is just funny.
 

mjrzasa

New Member
Firstly, I do greatly appreciate your advice, guys, and I don't remember hearing I need px after values. I learned that when using something like "margin" for more than one direction, to neglect the "px". So ill do:
margin-top: 2px; ... but for more than one...
margin: 5 10 5 10; .... when using more directions.. that's just what I picked up on my own, and it DOES work. There is no doubt it works without the "px" at least for paddings and margins.

However, I will start to use "px" all the time if you two think that's better.

I fixed the mis-spelled "script", thank you for finding that, that's the type of thing I love coming here for, small things I miss and I can count on guys like you to help me out. It can be frustrating finding small things and it's a great relief to have some help.

Now, I'm confused as to what you mean when you say I use a script for the entire page. I followed a tutorial with this so I'm just beginning to insert their php and js for this. Also that is the reason for misspelling, as I was trying to quickly follow the video.


EDIT: Also did you guys look at: www.mjrwebdesign.net/contact.html
That shows up fine, but is without the js/php I inserted...
Thanks again guys, I do appreciate it.
 
Last edited:

Phreaddee

Super Moderator
Staff member
wherever you learnt that its wrong
Code:
margin: 5 10 5 10;
should always be
Code:
margin: 5px 10px 5px 10px;
or in that example it should be
Code:
margin: 5px 10px;
 

CaldwellYSR

Member
and it DOES work. There is no doubt it works without the "px" at least for paddings and margins.


No obviously it DOESN'T work since your site didn't show up correctly AT ALL. You use px because if you don't use px then the computer doesn't know if you mean pxs or ems or pts or boobies because you're just putting numbers in there and the numbers mean NOTHING without a unit just like they taught us in grade school.

When we said your page was all in a script we meant you had....

HTML:
<script type="text/javascript" scr="path/to/file.js">
  <!-- Moar script tags -->
  <div id="container>
    <!-- All your other html -->
  </div>
</script>

notice how all the html is inside the script tag? That's a problem.
 

mjrzasa

New Member
All my other pages work just fine with me not using "px" everywhere.

When you say everything is in <script> , are you referring to:

<body onload="MM_preloadImages ('contact/images/x.png')">

?
Because they said that was to load the image before the page so it does not take time for the image to load when validating the form.
I am not seeing where I fail to close a script tag before the body or container sections..
 

Phreaddee

Super Moderator
Staff member
All my other pages work just fine with me not using "px" everywhere.

OK, sure. dig your head in the sand.

some browsers are forgiving of these small issues, others are not.

are you testing in FF, chrome, safari, IE789, opera, iOS and android?
methinks not.
 

CaldwellYSR

Member
When you say everything is in <script> , are you referring to:

I don't know how to be any more clear... it looks to me like you've fixed it because there are no more script tags in the body. Here is what you had, I'm going to make the problem area bold.

HTML:
<!-- By the way this throws an error in the console saying MM_preloadImages is never defined -->
<body onload="MM_preloadImages ('contact/images/x.png')">

<SCRIPT type="text/javascript">
  <div id="container">
    <!-- Other html -->
  </div>
</SCRIPT>

</body>

There script tag is closed yes but notice how the div#container is INSIDE the opening and closing script tag? This is wrong.
 

mjrzasa

New Member
I never meant for my script to go around my body, obviously, I think fixing the misspelled script made it better.

I didn't realize different browsers needed the px, thanks for that.
 

mjrzasa

New Member
So I added "px" to everything and for the php file, it did indeed work, thanks. But one thing is still not right. Above my nav, there are 3 hr lines under my logo, but only 1 shows. So that makes me think I have a missing closing tag for something above that. If you guys could spot anything I'd greatly appreciate it. Thanks again.

EDIT: I just took 5px less of top-margin for the lines so they would move up and it looks good now, just confused as to why they moved in the first place..
 
Last edited:

CaldwellYSR

Member
So I added "px" to everything and for the php file, it did indeed work, thanks. But one thing is still not right. Above my nav, there are 3 hr lines under my logo, but only 1 shows. So that makes me think I have a missing closing tag for something above that. If you guys could spot anything I'd greatly appreciate it. Thanks again.

EDIT: I just took 5px less of top-margin for the lines so they would move up and it looks good now, just confused as to why they moved in the first place..

They were probably hidden under something.
 

mjrzasa

New Member
Can someone test my contact form, I'm not sure if they are still sending the messages to me, I only changed some inline styles for the thank you message so I think the anit spam stuff the guy has in the php might be stopping me from testing it with my same info/computer/ip.
 
Top