So, I'm making a website. Working on a layout for the Register page at the moment. But, for some reason, this is happening (two pics):
Spoiler:
What is should look like
What it looks like
In Firefox, Safari, and Opera, it looks like the first image, but in IE7 (which idc about) and Chrome it looks like the second image. It surprised me about Chrome; it's actually my primary browser.
See, it actually looks fine until I put a <form> tag around it, then it does it. Even weirder, if I press the register button (which doesn't have any PHP functionality yet), then the page *loads fine*. It's like the fact of whether or not there is $_POST data is affecting my layout. Is this just a glitch in Chrome I can't hope to fix?
So, I'm making a website. Working on a layout for the Register page at the moment. But, for some reason, this is happening (two pics):
[spoiler][img]http://i62.tinypic.com/ae8f1v.png[/img]
What is should look like
[img]http://oi59.tinypic.com/2ed1rwx.jpg[/img]
What it looks like[/spoiler]
In Firefox, Safari, and Opera, it looks like the first image, but in IE7 (which idc about) and Chrome it looks like the second image. It surprised me about Chrome; it's actually my primary browser.
See, it actually looks fine until I put a <form> tag around it, then it does it. Even weirder, if I press the register button (which doesn't have any PHP functionality yet), then the page *loads fine*. It's like the fact of whether or not there is $_POST data is affecting my layout. Is this just a glitch in Chrome I can't hope to fix?
I'll post my code. The things you'll probably find most relevant are div.left-side and div.right-side, also perhaps div.body and div.fill since they're also inside the <form> tag.
(the form goes to "register" and not "register.php" but I'm using htaccess for that)
<div class="body"> <div class="head">Register an account</div> <div class="fill">
<div class="left-side">
Username <span class="smaller">[ Must be between 3 and 32 characters long ]</span><br> ERROR: Username is blank<br> <input type="text" name="username" value="Username" onfocus="if(this.value=='Username') this.value='';"> <br><br>
Password <span class="smaller">[ Must be at least 6 characters long ]</span><br> <input type="text" name="password" value="Password" onfocus="if(this.value=='Password') this.value=''; if(this.type='text') this.type='password';">
</div>
<div class="right-side">
Email address <span class="smaller">[ Must be a valid email address ]</span><br> <input type="text" name="email" value="example@domain.com" onfocus="if(this.value=='example@domain.com') this.value='';"> <br><br>
<input type="checkbox" name="agree" id="agree" style="width:auto;"> <label for="agree">I agree to the</label> <a href="terms">Terms of Service</a>
It looks like you have to manually set the margin, I see the margin class is automatically positioned (which can be troublesome depends on certain browser). As for the email box, try to mess around with margin-top and padding-top and see what happens.
It looks like you have to manually set the margin, I see the margin class is automatically positioned (which can be troublesome depends on certain browser). As for the email box, try to mess around with margin-top and padding-top and see what happens.
I'm able to fix it, half of the time... but the other half it's up too high. It's strange, it's like the page is rendering inconsistently. I even made a script that compared the source of the page when it rendered correctly and when it rendered incorrectly, and they're identical.
I'm able to fix it, half of the time... but the other half it's up too high. It's strange, it's like the page is rendering inconsistently. I even made a script that compared the source of the page when it rendered correctly and when it rendered incorrectly, and they're identical.
You cannot post new topics in this forum You cannot reply to topics in this forum You cannot edit your posts in this forum You cannot delete your posts in this forum You cannot post attachments in this forum