Jump to content

Positioning for IE, FF and Opera


walkingbeard

Recommended Posts

HiIt's probably best if I just post the source and images of the effects, although you might be able to try them yourself if you've got IE, Ff and Opera.With IE, it's all fubar, and with Opera, just the bit with the arrow pointed at it. The most odd thing was that I fixed one problem, with the footer bar, by not floating the copyright message to right and postioning it manually instead. Once I had done that, the Bee Successful, which is stuck at the bottom in IE, suddenly lurched from the right-side of the screen to where it is now. Internet Explorer was written by monkeys.If anyone can help, I'd appreciate it a lot.The images:Firefox -OKIE 6 - Very badOpera 8.54 - Quite bad

<html>	<head>  <title>Bee Successful Test</title>  <link rel='stylesheet' type='text/css' href='./style/shell.css' />  <link rel='stylesheet' type='text/css' href='./style/bodyLooks.css' />  <link rel='stylesheet' type='text/css' href='./style/rightBoxLooks.css' />  <link rel='stylesheet' type='text/css' href='./style/themeStandard.css' />    <script language='javascript' type='text/javascript' src='./scripts/slideshow.js'></script>	</head>	<body>  <div id='blockWhole'>  	<div class='blockMenuBackground'></div>  	<div class='blockMenuText'>    <?php include("./internal/menuStandard.php"); ?>  	</div>  	  	<div class='blockEyeCatcher'>    <?php include("./internal/imageEyeCatcher.php"); ?>  	</div>  	  	<div class='blockBlob'></div>  	<div class='blockSignAndSearch'>    <?php include("./internal/signAndSearch.php"); ?>  	</div>      	<pre class='blockUtilMenu'><?php include("./internal/menuUtil.php"); ?></pre>  	  	<div class='blockDateBar'>    <div class='textDate'>    	<?php      print(date("F jS Y"));    	?>    </div>  	</div>  	  	<div class='blockBody'>    <?php include("./sections/home/body.php"); ?>  	</div>  	  	<div class='blockRightBox'>    <?php include("./sections/home/rightbox.php"); ?>  	</div>  	  	<div class='blockFootBar'>    <?php include("./internal/barFooter.php"); ?>  	</div>  	<div class='blockLogoBeeSuccessful' onClick='top.location = "./index.php"'>    <div class='blockLogoBee'>Bee</div>    <div class='blockLogoSuccessful'>Successful</div>    <div class='blockLogoIdeas'>Bringing Ideas and People Together</div>  	</div>  </div>	</body></html>

.blockFootBar {  	margin: 0px;  	border: 0px;  	background-image: url("../media/images/util/barFooter.png");  	background-position: bottom left;  	background-repeat: no-repeat;  	height: 25px;  	width: 812px;  	font-family: Verdana, sans-serif;  	font-size: 0.55em;	font-weight: bold;	position: absolute;	z-index: 0;	top: 550px;}.menuFooter {	border: 0px;	position: relative;	top: 3px;	left: 135px;}.noticeCopyright {	border: 0px;	padding-right: 5px;	position: relative;	top: 3px;	left: 250px;	}a.linkFooter:link {  	color: black;}a.linkFooter:visited {	color: black;}a.linkFooter:hover {  	color: rgb(100,100,100);}/*--------------------------------------------------------------------*//*|    Main Menu                                                      *//*--------------------------------------------------------------------*/.blockMenuBackground {	width: 125px;	height: 555px;	background-image: url("../media/images/util/menuStandard.gif");	filter: alpha(opacity=55);	-moz-opacity: 0.55;	opacity: 0.55;	z-index: 1;	position: absolute;}.barMenu {  	position: relative;  	left: 18px;	width: 91px;	background-color: #333333;	height: 1px;	margin-top: 0.6em;	margin-bottom: 0.6em;}.blockMenuText {	width: 125px;	height: 555px;  	text-align: center;	padding-top: 125px;	z-index: 2;	position: absolute;	top: 30px;}a.textMenu {	display: block;	font-family: Verdana, sans-serif;	font-size: 0.7em;	line-height: 1.9em;}a.textMenu:link {	color: #333333;}a.textMenu:visited {  	color: #333333;}a.textMenu:hover {  	color: white;}/*=================================================================================*//*  Whole thing                                                                    *//*=================================================================================*/#blockWhole {	width: 820px;	padding: 0px;	margin-left: 100px;	margin-top: 16px;	z-index: -2;}/*=================================================================================*//*  Eye catcher                                                                    *//*=================================================================================*/.blockEyeCatcher {  	padding: 0px;	position: absolute;	top: 16px;	left: 240px;	z-index: 1;}/*=================================================================================*//*  Body                                                                           *//*=================================================================================*/.blockBody {	position: absolute;	left: 245px;	top: 150px;	width: 487px;	height: 390px;	overflow: auto;}/*=================================================================================*//*  Right box                                                                      *//*=================================================================================*/.blockRightBox {	position: absolute;	left: 742px;	top: 140px;}/*=================================================================================*//*  Blob, email, search                                                            *//*=================================================================================*/.blockBlob {  	background-image: url("../media/images/util/blobStandard.gif");	width: 178px;	height: 70px;	filter: alpha(opacity=55);	-moz-opacity: 0.55;	opacity: 0.55;	position: absolute;	top: 16px;	left: 742px;}/*=================================================================================*//*  Date/wisdom bar                                                                *//*=================================================================================*/.blockDateBar {	text-align: right;	background-image: url("../media/images/util/barWisdom.gif");	width: 812px;	height: 37px;	position: absolute;	top: 105px;}.textDate {	font-family: "Trebuchet MS", sans-serif;	font-size: 0.7em;	position: relative;	left: -48px;	top: 7px;}/*=================================================================================*//*  Utility Menu                                                                   *//*=================================================================================*/.blockUtilMenu {	text-align: center;	position:absolute;	left: 742px;	top: 74px;	width: 178px;	font-family: "Verdana", sans-serif;	font-size: 0.8em;	font-weight: bolder;	}.linkUtil:link {	color: black;}.linkUtil:visited {	color: black;}.linkUtil:hover {	color: #666666;}/*=================================================================================*//*  Sign up and search                                                             *//*=================================================================================*/.blockSignAndSearch {	position: absolute;	width: 178px;	left: 742px;}.blockSignUp {	font-family: Verdana, sans-serif;	font-size: 0.7em;	position:relative;	left: 5px;	top: 5px;}.blockSearch {	font-family: Verdana, sans-serif;  	font-size: 0.7em;	position: relative;	left: 5px;	top: 27px;}.form_box {	width: 115px;}/*=================================================================================*//*  Logo                                                                           *//*=================================================================================*/.blockLogoBeeSuccessful {	width: 380px;	height: 100px;	font-family: "Trebuchet MS", sans-serif;	font-weight: normal;	position:absolute;	z-index: 2;}.blockLogoBee {	font-size: 2.3em;	color: rgb(51, 102, 0);	position: relative;	left: 62px;	top: 16px;}.blockLogoSuccessful {	font-size: 2.3em;	color: white;	position: relative;	left: 140px;	top: -30px;}.blockLogoIdeas {	font-size: 0.9em;	font-weight: bold;	color: rgb(153, 0, 0);	position:relative;	top: -32px;	left: 140px;}

Edited by aspnetguy
Link to comment
Share on other sites

<html>	<head>  <title>Bee Successful Test</title>  <link rel='stylesheet' type='text/css' href='./style/shell.css' />  <link rel='stylesheet' type='text/css' href='./style/bodyLooks.css' />  <link rel='stylesheet' type='text/css' href='./style/rightBoxLooks.css' />  <link rel='stylesheet' type='text/css' href='./style/themeStandard.css' />    <script language='javascript' type='text/javascript' src='./scripts/slideshow.js'></script>	</head>	<body>  <div id='blockWhole'>  	<div class='blockMenuBackground'></div>  	<div class='blockMenuText'>    <a class="textMenu" href="index.php?section=about_us">About Us</a>	    <a class="textMenu" href="index.php?section=our_clients">Our Clients</a>        <div class="barMenu"></div>    <a class="textMenu" href="index.php?section=services">Services</a>        <a class="textMenu" href="index.php?section=consulting">Consulting</a>     <a class="textMenu" href="index.php?section=meeting_support">Meeting Support</a>    <a class="textMenu" href="index.php?section=away_days">Away Days</a>    <a class="textMenu" href="index.php?section=training">Training</a>    <div class="barMenu"></div>    <a class="textMenu" href="index.php?section=scenario_centre">Scenario Centre</a>    <a class="textMenu" href="index.php?section=education">Education</a>    <a class="textMenu" href="index.php?section=scottish_focus">Scottish Focus</a>        <div class="barMenu"></div>    <a class="textMenu" href="index.php?section=visual_thinking">Visual Thinking</a>    <a class="textMenu"  href="index.php?section=idon_tools">Idon Tools</a>    <div class="barMenu"></div>    <a class="textMenu"  href="index.php?section=resources">Resources</a>	    <a class="textMenu"  href="index.php?section=links">Links</a>  	</div>  	  	<div class='blockEyeCatcher'>    <img src='./media/images/util/topDroplets.png' alt='Closeup of water droplets' />      	</div>  	  	<div class='blockBlob'></div>  	<div class='blockSignAndSearch'>    <div class="blockSignUp">    	<a href='./sign_up/index.php'>Sign up</a> to our newsletter    </div>    <div class="blockSearch">    	<form method='GET' action='http://www.picosearch.com/cgi-bin/ts.pl'>      <input type="HIDDEN" name="index" value="416445" />          <input class="form_box" type="text" name="query" size="20" />      <input type="SUBMIT" value="Find" name="SEARCH" />    	</form>    </div>  	</div>      	<pre class='blockUtilMenu'><a class='linkUtil' href='./index.php'>home</a>  <a class='linkUtil' href='./index.php?section=news'>news</a>  <a class='linkUtil' href='.index.php?section=contact_us'>contact us</a></pre>  	  	<div class='blockDateBar'>    <div class='textDate'>    	May 30th 2006    </div>  	</div>  	  	<div class='blockBody'>    <div id='divBodyContained'>    	<div class='titlePage'>Welcome to Bee Successful</div>    	    	<div class='titleParagraph'>Facilitators of Better Thinking and Creative Collaboration</div>        	    	<div class='textParagraph'>From strategic consulting to supporting meetings, we work closely with clients to help them achieve the results they are looking for in a fraction of the time thought possible. The secret of our success - often delivering results that exceed expectations - lies in the creative way in which we bring ideas and people together. A combination of highly effective Idon Visual Thinking tools and methods, insights into design and years of research into how people think and interact optimise conditions for meaningful interactions and innovative solutions.</div>    	    	<div class='textParagraph'>The purpose of this site is to give you an overview of our services, who we are and what we do. Learn more about our approach and how we can help you achieve your ideal solution.<br />Call us for a free consultation on +44(0)1796474433 or email us at <a class='linkBody' href="mailto:info@beesuccessful.com">info@beesuccessful.com</a>.</div>    	    	<div class='textParagraph'>Bee Successful are constantly innovating and developing. To be kept informed of exclusive offers and upcoming events and to recieve our free Newsletter, sign up <a class='linkBody' href='./sign_up/index.php'>here</a>.</div>    	    	<div class='textParagraph'><span class='textEmbolden'>Enjoy Life and Bee Successful!</span></div>    </div>  	</div>  	  	<div class='blockRightBox'>    <div class='boxImage'>    	<script type='text/javascript'>    	<!--      var fadeimages=new Array()      fadeimages[0]=["./media/images/home/home_1.png"]      fadeimages[1]=["./media/images/home/home_2.png"]      fadeimages[2]=["./media/images/home/home_3.png"]      fadeimages[3]=["./media/images/home/home_4.png"]      fadeimages[4]=["./media/images/home/home_5.png"]            new fadeshow(fadeimages, 178, 110, 0, 3000, 1)    	-->    	</script>    	<noscript>      <img src='./media/images/home/home_1.png' alt='A man giving a presentation' />    	</noscript>    </div>    <div class='boxQuotes'>    	<div class='boxQuote'>          <div class='quoteText'>"…£15million to £50million in less than 2 years and all well handled."</div>      <div class='quoteCreds'>Tony Whelan</div>      <div class='quoteCreds'>CEO, Whelan</div>    	</div>    	    	<div class='boxQuote'>      <div class='quoteText'>"…greater understanding and tangible output… than any other approach I have tried."</div>      <div class='quoteCreds'>Dr. Dale S. Rothman</div>          <div class='quoteCreds'>Co-Coordinator United Nations Environment Programme GEO-4</div>    	</div>    	    	<div class='linkQuotes'>      <a href='quotes.html' onClick='window.open(this.href, "wndQuotes", "width=500,height=400,status=false"); return false;'>View full quotes</a>    	</div>    </div>    <div class='boxRelated'>    	<div class='titleRelated'>News</div>        	<div class='textRelated'>Away Days with a real difference [More]</div>    	<div class='textRelated'>New Scenario Centre [More]</div>    	<div class='textRelated'>Newsletter Launch [More]</div>    </div>  	</div>  	  	<div class='blockFootBar'>    <span class='menuFooter'>¦ <a class='linkFooter' href='./index.php'>Home</a> ¦ <a class='linkFooter' href='./index.php?section=news'>News</a> ¦ <a class='linkFooter' href='./index.php?section=contact_us'>Contact Us</a> ¦ <a class='linkFooter' href='./index.php?section=terms_and_conditions'>Terms and Conditions</a> ¦</span><span class='noticeCopyright'>Copyright © 2006 Bee Successful Ltd. all rights reserved.  	</div>  	<div class='blockLogoBeeSuccessful' onClick='top.location = "./index.php"'>    <div class='blockLogoBee'>Bee</div>    <div class='blockLogoSuccessful'>Successful</div>    <div class='blockLogoIdeas'>Bringing Ideas and People Together</div>  	</div>  </div>	</body></html>

Edited by aspnetguy
Link to comment
Share on other sites

OPERA SOLVE: I think that the use of "position:absolute; top: xxx;" should take this problem. Note no "left:xxx" or all will be put on top of each other, I wouldn't recommend it that much.IE SOLVE: Haven't got this one yet...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...