Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Any idea why my site goes bonkers in IE but fine in FF and Chrome?

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.


    ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brisk (02-08-2012)

  • #3
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brisk (02-08-2012)

  • #5
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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

  • #6
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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. 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 -
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brisk (02-08-2012)

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Quote Originally Posted by brisk View Post
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brisk (02-08-2012)

  • #9
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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. 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 -
    Code:
    <!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?

    Code:
    <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'; ?>
    PHP Code:
        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';                
                        
                            
                    }
        }

  • #10
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    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.
    This is works in IE and Firefox now. IE is putting a scroll on my banner though too.

    Not working in Chrome.
    Last edited by brisk; 02-08-2012 at 06:37 PM.

  • #11
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    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

  • #12
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,748
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    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 that is messing up the centering of #banner
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    brisk (02-08-2012)

  • #13
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    Your social icons have a 200px bottom margin 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.

  • #14
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    I just used a different scroll command and it works fine

    overflow-y:scroll;

  • #15
    New Coder
    Join Date
    Feb 2012
    Posts
    15
    Thanks
    5
    Thanked 0 Times in 0 Posts
    Browsers sure have a funny way of acting..
    I just shut down IE and opened it a fresh and now it's auto centring..


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •