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.
Results 1 to 10 of 10
  1. #1
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Big gap at top of page in Opera and Chrome (using CSS)

    Hi,

    I'm using this CSS

    Code:
        body
    {
    	background-image: url('../Images/background.png');
    	background-color: White;
    	background-repeat:repeat-x;
    }
    
    
        .content 
    {
    	background-color: White;
    	margin: auto auto auto;
    	margin-top: 2px;
    	width: 992px;
    	position: relative;
    } 
    
    
    
    	.mainDiv
    {
    	text-align: center;
    	position: relative;
    	border-color: Red;
    	border-style: solid;
    	border-width: 1px;
    	font-family: Verdana;
    	font-size: large;
    	color: Black ;
    	z-Index: 0;
    }
    
    	.footerButtons
    {
    	text-align:center;
    	position:relative;	
    	margin-top: -30px;
    	z-Index:1;
    
    }
    
    	.footer
    {
    	text-align:center; 
    	font-family: Verdana; 
    	font-size: x-small; 
    	color: #C0C0C0;	
    
    }
    on this HTML

    Code:
    <body>
    
      <form id="Form1" runat="server" class="content">
        
       <div class = "mainDiv"> 
      
    ** Some objects **
        
        <br /> 
        <br /> 
        </div>
      
      <div class ="footerButtons" >
     
        ** A image button 
      </div>
      
        <br /> 
                
        <div class="footer">
            <hr />
            © 2009 Red Gecko UK. All rights reserved.  
        </div>
        
      </form>
      
    </body>
    When viewed in IE it's fine, but when viewed in Chrome or Safari there is a huge gap at the top of the page before the MainDiv. I've validated the CSS with WC3 and it's come up compliant. Any ideas?

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    replace this body style class

    body
    {
    background-image: url('../Images/background.png');
    background-color: White;
    background-repeat:repeat-x;
    margin:0px;
    padding:0px;
    }

  • #3
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Nope, tried that and I still get the same problem.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,854
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Nope, tried that and I still get the same problem.
    Please post your complete code including DOCTYPE, or a link to your page would be much better.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    http://www.redgeckouk.com/

    Just to point out, I am using a EmulateIE7 meta tag so I can use floating in IE8 (could not get it to work).

    The Flash is not visible in Firefox and the layout is as I described in Safari, Chrome and Opera. The contact page also looks wrong in these browsers (image in at the bottom of the page)


    Thanks.

  • #6
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    ** Bump **

  • #7
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Hmm,
    could you access function AC_Generateobj(objAttrs, params, embedAttrs){...} ?

    If can, insert the window.alert(str) into the non-IE, non-opera conditional statement. See if the attributes of <embed> element is correct?

    Regards,
    Hendra D.

  • #8
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    I've sorted out the gap... I moved the scripts out of the head section and added them beneath the form tag and the gap has gone in the other browsers.

    Still not sure about the contact page layout? Does IE render floating layouts different to other browsers? Is that why my envelope image is at the bottom instead of floating to the right?

  • #9
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    354
    Thanks
    9
    Thanked 52 Times in 51 Posts
    Guess you could see your flash now in FF,
    by modifying the script a bit:

    <script language="JavaScript" type="text/javascript">
    AC_FL_RunContent(
    ...
    'movie', 'flash/RedGeckoIntro2', //since your swf is in flash directory?
    ...

  • #10
    New Coder
    Join Date
    Oct 2009
    Posts
    31
    Thanks
    4
    Thanked 0 Times in 0 Posts
    That didn't work, but using swfobject did it uses a javascript file to detect, works great on all browsers.

    http://code.google.com/p/swfobject/

    Still got a layout issue on the contact and Clent Area pages though
    Last edited by jaYKay; 11-26-2009 at 11:02 AM.


  •  

    Posting Permissions

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