...

View Full Version : Big gap at top of page in Opera and Chrome (using CSS)



jaYKay
11-23-2009, 11:45 AM
Hi,

I'm using this CSS



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




<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?

vineet
11-23-2009, 01:00 PM
replace this body style class

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

jaYKay
11-23-2009, 02:05 PM
Nope, tried that and I still get the same problem.

abduraooft
11-23-2009, 02:23 PM
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.

jaYKay
11-23-2009, 05:28 PM
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.

jaYKay
11-24-2009, 11:21 AM
** Bump **

hdewantara
11-25-2009, 03:01 PM
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.

jaYKay
11-25-2009, 05:18 PM
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?

hdewantara
11-25-2009, 07:14 PM
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?
...

jaYKay
11-26-2009, 11:00 AM
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 :(



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum