...

View Full Version : Any idea why my site goes bonkers in IE but fine in FF and Chrome?



brisk
02-08-2012, 04:07 PM
Hey guys,
I'm not too sure what the best way is to explain this so I'll post images below. Quite obvious what's wrong but not got a clue how to fix it! If you need code please let me know which bits exactly so I don't spam you all.

Thanks for any help :)

http://imageshack.us/photo/my-images/546/74267272.png/
http://imageshack.us/photo/my-images/545/48506417.png/


Ed

Excavator
02-08-2012, 04:23 PM
Good morning brisk,
Since this site is all about code it's fine to post code here. An image really doesn't give us any idea why your site doesn't display correctly.

When posting code in the forum, please use the code tags, [code][/code] - available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

It's actually best to give a link to the test site, that way we can see your most current version and we have the images as well.

Since it doesn't work in IE, my first guess would be you lack a DocType. See the link about DocTypes in my signature line below.


...

brisk
02-08-2012, 04:27 PM
Good morning brisk,
Since this site is all about code it's fine to post code here. An image really doesn't give us any idea why your site doesn't display correctly.

When posting code in the forum, please use the code tags,
- available with the # button in the post edit window.
This will wrap your code in a scroll box which greatly helps the readability of your post.

It's actually best to give a link to the test site, that way we can see your most current version and we have the images as well.

Since it doesn't work in IE, my first guess would be you lack a DocType. See the link about DocTypes in my signature line below.


...

Okay :)

Thanks for your prompt reply.

Please find the test website below. It's just that form that goes screwy in IE.

http://80.229.125.67/budgie/organised/index.php

Excavator
02-08-2012, 04:40 PM
I'm not sure what <img align="budgie logo is supposed to do.
It would be better to float that image left instead.

You have a few odd errors in your code as well. It looks like some leftover stuff from copying and pasting. Check your code in the validator, see the links in my signature line.

brisk
02-08-2012, 04:42 PM
I'm not sure what <img align="budgie logo is supposed to do.
It would be better to float that image left instead.

You have a few odd errors in your code as well. It looks like some leftover stuff from copying and pasting. Check your code in the validator, see the links in my signature line.

I'm not too sure either.

I'll delete that align, I think I meant to write ALT instead.

I'll run my code through the validators and check stuff, I never used those tools before but i'll come back once I've correct my code.

Thank you

brisk
02-08-2012, 04:54 PM
I got 11 errors down to 9. It's saying I'm missing a lot of tags but I'm not :-S

For some reason too it seems like my site looks fine in IE.

But either way I would like to know how to correct these errors if they are needed.

Another thing I do need help with is something that happens across browsers if that if you click the 'image' section. The whole site shifts to the left slightly :-S

Excavator
02-08-2012, 04:56 PM
You also have an issue with the height of your header. It's set at 162px but your form is taller than that. See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.



Have a look at this approach -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>budgie - welcome</title>
<base href="http://80.229.125.67/budgie/organised/" />
<style type="text/css">
body {
background: #10260f;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#banner {
width: 800px;
margin: 0 auto;
overflow: auto;
background: #42592c;
}
#linked {
float: left;
margin: 0 0 0 50px;
}
.login {
float: right;
width: 300px;
}
</style>
</head>
<body>
<div id="banner">
<a href="index.php" id="linked"><img src="Images/logo.png" alt="logo" width="277" height="162" /></a>
<div class="login">
<form action='' method='POST'>
<p class="form-align">Username:</p>
<p><input type="text" name="username" class="username_field" /></p>
<p class="form-align">Password:</p>
<p class="pass"><input type="password" name="password" class="password_field" />
<input id="input_submit_button" type="submit" name="submit" value="Log in" /></p>
<p class="forgotten">Have you forgotten your username?</p>
</form>
<!--end .login--></div>
<!--end banner--></div>
</body>
</html>

Excavator
02-08-2012, 04:59 PM
Another thing I do need help with is something that happens across browsers if that if you click the 'image' section. The whole site shifts to the left slightly :-S

It's shifting over the width of the y scrollbar that appears on that page. The usual solution is to force a scrollbar on all pages, like this (http://nopeople.com/CSS%20tips/vertical_scrollbar/index.html).

brisk
02-08-2012, 05:24 PM
You also have an issue with the height of your header. It's set at 162px but your form is taller than that. See the box model here (http://www.w3.org/TR/CSS2/box.html). The box model says that whatever you put inside an element cannot be larger than that element. margin/padding/border all count when figuring width/height.



Have a look at this approach -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>budgie - welcome</title>
<base href="http://80.229.125.67/budgie/organised/" />
<style type="text/css">
body {
background: #10260f;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
}
#banner {
width: 800px;
margin: 0 auto;
overflow: auto;
background: #42592c;
}
#linked {
float: left;
margin: 0 0 0 50px;
}
.login {
float: right;
width: 300px;
}
</style>
</head>
<body>
<div id="banner">
<a href="index.php" id="linked"><img src="Images/logo.png" alt="logo" width="277" height="162" /></a>
<div class="login">
<form action='' method='POST'>
<p class="form-align">Username:</p>
<p><input type="text" name="username" class="username_field" /></p>
<p class="form-align">Password:</p>
<p class="pass"><input type="password" name="password" class="password_field" />
<input id="input_submit_button" type="submit" name="submit" value="Log in" /></p>
<p class="forgotten">Have you forgotten your username?</p>
</form>
<!--end .login--></div>
<!--end banner--></div>
</body>
</html>


I tried that and now my banner doesn't auto center in Firefox, but works okay in Chrome and IE.

My form in IE is still screwed up. Maybe this bit of code will help with the 2nd issue?


<div id="banner">

<a href="index.php" id="linked"><img src="Images/logo.png" alt="logo" width="277" height="162" /></a>


<div class="login">

<?php

loggedin_check();

?>
</div>

</div>

<?php include 'navbar.php'; ?>


function loggedin_check() {

session_start();

if (isset($_SESSION['username'])) {

$username = $_SESSION['username'];
?><p> You are logged in - <?php echo (ucfirst($username)); ?>!<p>
<p><a href="logout.php">Logout?</a><p>
<p>Click <a href="profile.php">here</a>to view your profile <?php
fetch_avatar();
?> </p> <?php

} else{

include 'display-form.php';


}
}

brisk
02-08-2012, 05:25 PM
It's shifting over the width of the y scrollbar that appears on that page. The usual solution is to force a scrollbar on all pages, like this (http://nopeople.com/CSS%20tips/vertical_scrollbar/index.html).

This is works in IE and Firefox now. IE is putting a scroll on my banner though too.

Not working in Chrome.

brisk
02-08-2012, 05:35 PM
Oh hang on, seems like IE is now working with the form, now I just need to get the banner to auto center in IE and Firefox

Excavator
02-08-2012, 05:38 PM
I tried that and now my banner doesn't auto center in Firefox, but works okay in Chrome and IE.

Your social icons have a 200px bottom margin :eek: that is messing up the centering of #banner

brisk
02-08-2012, 05:40 PM
Your social icons have a 200px bottom margin :eek: that is messing up the centering of #banner

hahaa omg good find!!

Okay that has sorted Firefox out now..

Now it's just IE, it's not auto centering.

brisk
02-08-2012, 05:56 PM
I just used a different scroll command and it works fine

overflow-y:scroll;

brisk
02-08-2012, 05:57 PM
Browsers sure have a funny way of acting..
I just shut down IE and opened it a fresh and now it's auto centring..

brisk
02-08-2012, 06:00 PM
I'd be grateful if you tested it on your end..but I think everything is sorted now.

I dont know if you can give me any tips in general about my code, I'm a first time web site maker so I'm just mish mashing everything I've picked up. Been doing it for about 4 months or so.

I really dont know what to say but thank you, so kind and quickly of you to help..



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum