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 7 of 7
  1. #1
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,005
    Thanks
    58
    Thanked 10 Times in 10 Posts

    Question firefox the form is displayed outside to the right of divs

    OK folks for this example I can't show you a website. (confidential)

    What I have is a form div thats inside a contaner div thats centered in the screen(margins right, left auto). However in firefox the form is displayed outside to the right of both divs. However in IE7 and Ie6 the form is displayed properly.

    Any ideas fellow coders?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Quote Originally Posted by nikos101 View Post
    OK folks for this example I can't show you a website. (confidential)
    Then post html of your div-s, form and their CSS.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,005
    Thanks
    58
    Thanked 10 Times in 10 Posts
    The weird thing is that when I show div order in firefox web developer it displays as I want!

    this is the problem div, in fact the bodywrapbigcss doesn't effect anything
    Code:
    <div id="bodywrapbig" onLoad="<?php	echo $onload; ?>" bgcolor="#cccccc"><?php
    
    /*
     * Compose the form output by including a HTML form template with PHP code
     * interleaved with calls to insert form input field parts in the layout
     * HTML.
     */
    
    	$form->StartLayoutCapture();
    	$title="Form class test";
    	$body_template="php/forms/templates/form_auto_layout_body.html.php";
    	require("php/forms/templates/form_frame.html.php");
    	$form->EndLayoutCapture();
    
    /*
     * Output the form using the function named Output.
     */
    	$form->DisplayOutput();
    ?></div>
    Code:
    #bodywrapbig {
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    Code:
    <div bgcolor="#cccccc" onload="document.forms['subscription_form']['email'].focus()" id="bodywrapbig"><form onsubmit="return ValidateForm(this)" name="subscription_form" action="" method="post">
    <script defer="defer" type="text/javascript">
    <!--
    form_submitted=false
    function ValidateEmail(theinput)
    {
    	var s=theinput.value
    	if(s.search)
    	{
    		return (s.search(new RegExp('^([-!#$%&\'*+./0-9=?A-Z^_`a-z{|}~'+unescape('%7F')+'])+@([-!#$%&\'*+/0-9=?A-Z^_`a-z{|}~'+unescape('%7F')+']+\\.)+[a-zA-Z]{2,6}$','gi'))>=0)
    	}
    	if(s.indexOf)
    	{
    		var at_character=s.indexOf('@')
    		if(at_character<=0 || at_character+4>s.length)
    			return false
    	}
    	if(s.length<6)
    		return false
    	else
    		return true
    }
    function ValidateForm(theform)
    {
    	var e='', i={}, f='', r, s
    	r=theform['email']
    	r.className=''
    	r=theform['user_name']
    	r.className=''
    	r=theform['password']
    	r.className=''
    	r=theform['confirm_password']
    	r.className=''
    	r=theform['agree']
    	r.className=''
    	if(!i['email']
    	&& (ValidateEmail(theform['email'])==false))
    	{
    		r=theform['email']
    		r.className='invalid'
    		if(e=='')
    			f='email'
    		else
    			e+='\n'
    		e+='It was not specified a valid e-mail address.'
    		i['email']=true;
    	}
    	if(!i['user_name']
    	&& (theform['user_name'].value==''))
    	{
    		r=theform['user_name']
    		r.className='invalid'
    		if(e=='')
    			f='user_name'
    		else
    			e+='\n'
    		e+='It was not specified a valid name.'
    		i['user_name']=true;
    	}
    	if(!i['password']
    	&& (theform['password'].value==''))
    	{
    		r=theform['password']
    		r.className='invalid'
    		if(e=='')
    			f='password'
    		else
    			e+='\n'
    		e+='It was not specified a valid password.'
    		i['password']=true;
    	}
    	if(!i['confirm_password']
    	&& (theform['confirm_password'].value!=theform['password'].value))
    	{
    		r=theform['confirm_password']
    		r.className='invalid'
    		if(e=='')
    			f='confirm_password'
    		else
    			e+='\n'
    		e+='The password is not equal to the confirmation.'
    		i['confirm_password']=true;
    	}
    	if(!i['agree']
    	&& (theform['agree'].checked==false))
    	{
    		r=theform['agree']
    		r.className='invalid'
    		if(e=='')
    			f='agree'
    		else
    			e+='\n'
    		e+='You have not agreed with the subscription terms.'
    		i['agree']=true;
    	}
    	if(e!='')
    	{
    		if(theform[f].focus)
    			theform[f].focus()
    		alert(e)
    		form_submitted=false
    		return false
    	}
    	return true
    }
    // -->
    </script>
    <noscript>
    <div style="display: none"><!-- dummy comment for user agents without Javascript support enabled --></div>
    </noscript>
    <div style="text-align: center;" id="feedback"/>
    <br/>
    <div id="wholeform">
    <center><table cellspacing="1" cellpadding="2" border="1" bgcolor="#fffff4" summary="Form table">
    <tbody><tr>
    <td bgcolor="#000080" style="border-style: none;"><font color="#ffffff"><b>Form class test</b></font></td>
    </tr>
    
    <tr>
    <td style="border-style: none;"><table><tbody><tr><th align="right"><label accesskey="E" for="email"><u>E</u>-mail address</label>:</th><td valign="top"><input type="text" accesskey="E" id="email" onchange="new_value=value; if(new_value.toLowerCase) new_value=new_value.toLowerCase() ;  if(new_value!=value) value=new_value ;" maxlength="100" name="email" style="background-color: rgb(255, 255, 160);"/> </td></tr><tr><th align="right"><label accesskey="P" for="user_name"><u>P</u>ersonal name</label>:</th><td valign="top"><input type="text" accesskey="P" id="user_name" maxlength="60" name="user_name"/> </td></tr><tr><th align="right"><label accesskey="d" for="password">Passwor<u>d</u></label>:</th><td valign="top"><input type="password" accesskey="d" id="password" onchange="if(value.toLowerCase) value=value.toLowerCase()" name="password"/> </td></tr><tr><th align="right"><label accesskey="C" for="confirm_password"><u>C</u>onfirm password</label>:</th><td valign="top"><input type="password" accesskey="C" id="confirm_password" onchange="if(value.toLowerCase) value=value.toLowerCase()" name="confirm_password"/> </td></tr><tr><th align="right"><label accesskey="t" for="agree">Agree with the <u>t</u>erms</label>:</th><td valign="top"><input type="checkbox" accesskey="t" id="agree" value="Yes" name="agree"/> </td></tr><tr><td colspan="2"><hr/></td></tr></tbody></table><center><input type="image" style="border-width: 0px;" id="image_subscribe" onclick="if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=true ; form_submitted_test=form_submitted ; form_submitted=true ; form_submitted=(!form_submitted_test || confirm('Are you sure you want to submit this form again?')) ; if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=false ; sub_form='' ; return true" alt="Submit subscription" src="http://www.phpclasses.org/graphics/add.gif"/> <input type="submit" accesskey="u" id="button_subscribe" onclick="if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=true ; form_submitted_test=form_submitted ; form_submitted=true ; form_submitted=(!form_submitted_test || confirm('Are you sure you want to submit this form again?')) ; if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=false ; sub_form='' ; return true" value="Submit subscription"/><input type="hidden" value="1" name="doit"/></center></td>
    </tr>
    </tbody></table></center>
    </div></form>
    </div>
    Last edited by nikos101; 10-20-2007 at 03:46 PM.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Sorry, what you have to do is, save your html by any browser and then open the saved file. Keep all necessary codes(containing the code for tha above specified divs and form) and its CSS, while removing all other unnecessary code in this particular context.
    Thus we can reproduce your problem and say some suggestions/solution since you can't send us the url.
    (The CSS of your form is not in the above post, check it's width. Firebug is your friend!)
    Last edited by abduraooft; 10-21-2007 at 11:23 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,005
    Thanks
    58
    Thanked 10 Times in 10 Posts
    I see ok heres the html (i had to split it up because of character limit, You can just paste the css code into the head)

    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" xml:lang="en" lang="en"><head><!-- InstanceBegin template="/Templates/index.dwt.php" codeOutsideHTMLIsLocked="false" --><!-- InstanceBeginEditable name="doctitle" --><title>Metaneva</title><!-- InstanceEndEditable --> 
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <meta name="author" content="David Soussan">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="distribution" content="global">
    <meta name="resource-type" content="document">
    <meta http-equiv="Content-Language" content="en-gb">
    <meta name="robots" content="all">
    <meta name="mssmarttagspreventparsing" content="true">
    <meta http-equiv="imagetoolbar" content="no">
    <meta http-equiv="MSThemeCompatible" content="no">
    
    <meta name="Rating" content="General">
    <meta name="revisit-after" content="30 Days">
    <meta name="doc-class" content="Living Document">
    
    <link rel="shortcut icon" href="http://localhost/Metaneva/images/metaneva_icon.ico" type="image/x-icon">
    
    <link rel="stylesheet" type="text/css" href="register.php_files/master.css" title="combined">
    
    <script language="JavaScript">
    <!--
    
    function SymError()
    {
      return true;
    }
    
    window.onerror = SymError;
    
    var SymRealWinOpen = window.open;
    
    function SymWinOpen(url, name, attributes)
    {
      return (new Object());
    }
    
    window.open = SymWinOpen;
    
    //-->
    </script>
    
    <script type="text/javascript" src="register.php_files/prototype.js"></script>
    <script type="text/javascript" src="register.php_files/one.js"></script><!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable --><link href="register.php_files/highlighter.css" type="text/css" rel="stylesheet"></head><body>
    <!-- container -->
    <div id="container">
    	<!-- main content -->
    	<div id="content">	
    	<h1>Home 1</h1>
    <p>Testing menu js</p>	</div>
    	<!-- end of content -->
    	<!-- navigation -->
    	
    <br>
    	<!-- end of navigation -->
    	
    	<!-- banner -->
    	<div id="top" style="left: 20px; width: 100px;">
    	  
    	</div>
    	<!-- end of banner -->
    	
    	
    
    	<!--
    	<div id="formsingle">
    		<form action="welcome.php" method="post">
    			<p>my first go at a form for single unit</p>
    		
    			Area: <input type="text" name="area" />
    			Species: <input type="text" name="species" />
    			Total Time: <input type="text" name="totaltime" />
    			Overall Time: <input type="text" name="overalltime" />
    			Top Spikes: <input type="text" name="topspikes" />
    			Bottom Spikes: <input type="text" name="bottompikes" />
    			# Neurons: <input type="text" name="neurons" />
    			<input type="submit" />
    		</form>
    	</div>
    	-->
    
    
    		
        <div id="topPan">
          	<div id="wordlogo"><img src="register.php_files/metanlogo.png" alt="Metaneva"></div>
        	<div id="logo"><img src="register.php_files/metaneva_logoA2.gif" alt="Metaneva"></div>
        </div>
        
    <div id="bodyPan">
    <div id="nav_wrap">	
    	<ul id="nav">
        	<li><a href="#">About</a>
            	<ul>
                	<li><a href="#">Metaneva within neuroinformatics</a></li>
                	<li><a href="#">Goals</a></li>
                    <li><a href="#">License</a></li>
                    <li><a href="#">Collaborations</a></li>
                    <li><a href="#">FAQ</a></li>
    			</ul>           
    		</li>
            <li><a href="#">Members</a>
                 <ul>
                 	<li><a href="#">Institutions</a></li>
                    <li><a href="#"> Individuals</a> </li>
                 </ul>
            </li>
                    <li><a href="#">Documents</a>
                        <ul>
                            <li><a href="#">Publications</a></li>
                            <li><a href="#">Other</a></li>
                        </ul>
               </li>
                 
                    <li><a href="#">Contact</a>
                        <ul>
                            <li><a href="#">General Questions</a></li>
                            <li><a href="#">Licensing</a></li>
                        </ul>
    	    </li>
                      <li><a href="#">Login</a></li>
                      <li><a href="#">Links</a></li>
    </ul>
      </div>
    <!-- InstanceBeginEditable name="main content" -->
    <div id="bodywrapbig" onload="document.forms['subscription_form']['email'].focus()" bgcolor="#cccccc"><form method="post" action="" name="subscription_form" onsubmit="return ValidateForm(this)">
    <script type="text/javascript" defer="defer">
    <!--
    form_submitted=false
    function ValidateEmail(theinput)
    {
    	var s=theinput.value
    	if(s.search)
    	{
    		return (s.search(new RegExp('^([-!#$%&\'*+./0-9=?A-Z^_`a-z{|}~'+unescape('%7F')+'])+@([-!#$%&\'*+/0-9=?A-Z^_`a-z{|}~'+unescape('%7F')+']+\\.)+[a-zA-Z]{2,6}$','gi'))>=0)
    	}
    	if(s.indexOf)
    	{
    		var at_character=s.indexOf('@')
    		if(at_character<=0 || at_character+4>s.length)
    			return false
    	}
    	if(s.length<6)
    		return false
    	else
    		return true
    }
    function ValidateForm(theform)
    {
    	var e='', i={}, f='', r, s
    	r=theform['email']
    	r.className=''
    	r=theform['user_name']
    	r.className=''
    	r=theform['password']
    	r.className=''
    	r=theform['confirm_password']
    	r.className=''
    	r=theform['agree']
    	r.className=''
    	if(!i['email']
    	&& (ValidateEmail(theform['email'])==false))
    	{
    		r=theform['email']
    		r.className='invalid'
    		if(e=='')
    			f='email'
    		else
    			e+='\n'
    		e+='It was not specified a valid e-mail address.'
    		i['email']=true;
    	}
    	if(!i['user_name']
    	&& (theform['user_name'].value==''))
    	{
    		r=theform['user_name']
    		r.className='invalid'
    		if(e=='')
    			f='user_name'
    		else
    			e+='\n'
    		e+='It was not specified a valid name.'
    		i['user_name']=true;
    	}
    	if(!i['password']
    	&& (theform['password'].value==''))
    	{
    		r=theform['password']
    		r.className='invalid'
    		if(e=='')
    			f='password'
    		else
    			e+='\n'
    		e+='It was not specified a valid password.'
    		i['password']=true;
    	}
    	if(!i['confirm_password']
    	&& (theform['confirm_password'].value!=theform['password'].value))
    	{
    		r=theform['confirm_password']
    		r.className='invalid'
    		if(e=='')
    			f='confirm_password'
    		else
    			e+='\n'
    		e+='The password is not equal to the confirmation.'
    		i['confirm_password']=true;
    	}
    	if(!i['agree']
    	&& (theform['agree'].checked==false))
    	{
    		r=theform['agree']
    		r.className='invalid'
    		if(e=='')
    			f='agree'
    		else
    			e+='\n'
    		e+='You have not agreed with the subscription terms.'
    		i['agree']=true;
    	}
    	if(e!='')
    	{
    		if(theform[f].focus)
    			theform[f].focus()
    		alert(e)
    		form_submitted=false
    		return false
    	}
    	return true
    }
    // -->
    </script>
    <noscript>
    <div style="display: none"><!-- dummy comment for user agents without Javascript support enabled --></div>
    </noscript>
    <div id="feedback" style="text-align: center;"></div>
    <br>
    <div id="wholeform">
    <center><table summary="Form table" bgcolor="#fffff4" border="1" cellpadding="2" cellspacing="1">
    <tbody><tr>
    <td style="border-style: none;" bgcolor="#000080"><font color="#ffffff"><b>Form class test</b></font></td>
    </tr>
    
    <tr>
    <td style="border-style: none;"><table><tbody><tr><th align="right"><label for="email" accesskey="E"><u>E</u>-mail address</label>:</th><td valign="top"><input style="background-color: rgb(255, 255, 160);" name="email" maxlength="100" onchange="new_value=value; if(new_value.toLowerCase) new_value=new_value.toLowerCase() ;  if(new_value!=value) value=new_value ;" id="email" accesskey="E" type="text">&nbsp;</td></tr><tr><th align="right"><label for="user_name" accesskey="P"><u>P</u>ersonal name</label>:</th><td valign="top"><input name="user_name" maxlength="60" id="user_name" accesskey="P" type="text">&nbsp;</td></tr><tr><th align="right"><label for="password" accesskey="d">Passwor<u>d</u></label>:</th><td valign="top"><input name="password" onchange="if(value.toLowerCase) value=value.toLowerCase()" id="password" accesskey="d" type="password">&nbsp;</td></tr><tr><th align="right"><label for="confirm_password" accesskey="C"><u>C</u>onfirm password</label>:</th><td valign="top"><input name="confirm_password" onchange="if(value.toLowerCase) value=value.toLowerCase()" id="confirm_password" accesskey="C" type="password">&nbsp;</td></tr><tr><th align="right"><label for="agree" accesskey="t">Agree with the <u>t</u>erms</label>:</th><td valign="top"><input name="agree" value="Yes" id="agree" accesskey="t" type="checkbox">&nbsp;</td></tr><tr><td colspan="2"><hr></td></tr></tbody></table><center><input src="register.php_files/add.gif" alt="Submit subscription" onclick="if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=true ; form_submitted_test=form_submitted ; form_submitted=true ; form_submitted=(!form_submitted_test || confirm('Are you sure you want to submit this form again?')) ; if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=false ; sub_form='' ; return true" id="image_subscribe" style="border-width: 0px;" type="image"> <input value="Submit subscription" onclick="if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=true ; form_submitted_test=form_submitted ; form_submitted=true ; form_submitted=(!form_submitted_test || confirm('Are you sure you want to submit this form again?')) ; if(this.disabled || typeof(this.disabled)=='boolean') this.disabled=false ; sub_form='' ; return true" id="button_subscribe" accesskey="u" type="submit"><input name="doit" value="1" type="hidden"></center></td>
    </tr>
    </tbody></table></center>
    </div></form>
    </div>
    <!-- InstanceEndEditable -->
    <div id="footermainPan">
        <div id="footerPan">
          <p class="copyright">© Metaneva. All right reserved.</p>
          <div id="footervalid"> <img src="register.php_files/valid-xhtml10-blue.gif" alt=""></div>
        </div>
      </div>
    </div>
      <!-- not decided what upload form I like
        <form id="theform" action="action.php" enctype="multipart/form-data" method="post">
                <fieldset id="pt1">
                    <legend><span>Step </span>1. <span>: Login details</span></legend>
                    <h3>Enter basic data</h3>
                    <div class="help">Your login will be part of your website URL.</div>
                    <label for="loginname">Login / Sitename</label>
                    <input type="text" id="loginname" tabindex="1" />
                </fieldset>
                <fieldset id="pt2" >
                    <legend><span>Step </span>3. <span>: Email details</span></legend>
                    <h3>Enter your email address.</h3>
                    <div class="help">You must enter a valid email address to activate your account.</div>
                    <strong class="error">An email address is required!</strong>
                    <label for="email1">Email</label>
                    <input type="text" id="email1" tabindex="4" />
                    <label for="email2">Repeat Email</label>
                    <input type="text" id="email2" tabindex="5" />
                </fieldset>
                <fieldset id="pt4">
                    <legend>Step 4  : Submit form</legend>
                    <h3>Terms of Service</h3>
            
                    <div id="disclaimer">By clicking the “Complete Signup” button,
                        I am attaching my electronic signature to and agreeing to the Squarespace
                        Terms of Service Agreement; I understand that if I do not agree to these
                        terms of use and privacy statements, I should refrain from using Squarespace.</div>
                    <input type="submit" id="submitform" tabindex="6" value="Complete Signup &raquo;" />
                </fieldset>
            <div id="copyright">All content Copyright © 2003-2005, Squarespace, Inc. unless otherwise noted. All rights reserved.</div>
        </form>
        -->
    </div>
    <!-- end of container -->
    <!-- InstanceEnd --><script language="JavaScript">
    <!--
    var SymRealOnLoad;
    var SymRealOnUnload;
    
    function SymOnUnload()
    {
      window.open = SymWinOpen;
      if(SymRealOnUnload != null)
         SymRealOnUnload();
    }
    
    function SymOnLoad()
    {
      if(SymRealOnLoad != null)
         SymRealOnLoad();
      window.open = SymRealWinOpen;
      SymRealOnUnload = window.onunload;
      window.onunload = SymOnUnload;
    }
    
    SymRealOnLoad = window.onload;
    window.onload = SymOnLoad;
    
    //-->
    </script>
    
    </body></html>
    Last edited by nikos101; 10-20-2007 at 04:04 PM.

  • #6
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,005
    Thanks
    58
    Thanked 10 Times in 10 Posts
    css
    Code:
    <style type="text/css">
    #nav, #nav ul {
    	float: left;
    	width: 850px;
    	list-style: none;
    	line-height: 1;
    	background: white;
    	font-weight: bold;
    	padding: 0;
    	border: solid #6B9EE9;
    	border-width: 1px 0;
    	margin-top: 0;
    	margin-right: auto;
    	margin-bottom: 1em;
    	margin-left: auto;
    }
    * {
    	margin: 0px;
    	padding: 0px;
    }
    
    #nav li li {
    	padding-right: 1em;
    	width: 13em
    }
    
    
    #nav a {
    	display: block;
    	width: 10em;
    	w\idth: 4em;
    	text-decoration: none;
    	padding: 0.25em 2em;
    }
    
    #nav a.daddy {
    	background-image: url(../images/rightarrow2.gif);
    	background-repeat: no-repeat;
    	background-position: right center;
    }
    
    #nav li {
    	float: left;
    	padding: 0;
    	width: 8em;
    	color: #000;
    }
    
    #nav li A:visited {
    	font-size:24;
    	font-weight:bold;
    	color: #000;
    }
    
    #nav li ul {
    	position: absolute;
    	left: -999em;
    	height: auto;
    	width: 14.4em;
    	w\idth: 13.9em;
    	font-weight: normal;
    	border-width: 0.25em;
    	margin: 0;
    }
    
    #nav li ul a {
    	width: 13em;
    	w\idth: 9em;
    	color: #000;
    	font-weight: bold;
    }
    
    #nav li ul ul {
    	margin: -1.75em 0 0 14em;
    }
    
    #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
    	left: -999em;
    }
    
    #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
    	left: auto;
    }
    
    #nav li:hover, #nav li.sfhover {
    	background: #6B9EE9;
    }
    
    
    
    /*main layout stuff*/
    
    /* CSS Document */
    /*body{padding:0px; margin:0px; background:url(images/mainbg.gif) 0 0 repeat-x #fff; color:#5E5E5E; font:13px/18px Arial, Helvetica, sans-serif;}*/
    div, p, ul, h2, h3, img{
    	padding:0px;
    	margin:0px;
    }
    ul{list-style-type:none;}
    
    /*----TOP PANEL----*/
    #topPan{
    	width:850px;
    	height:158px;
    	position:relative;
    	margin:0 auto;
    	color:#fff;
    	padding:0px;
    	clear: left;
    }
    #topPan img.logo{width:245px; height:37px; position:absolute; top:33px; left:43px;}
    #topPan img.book{width:158px; height:99px; position:absolute; top:20px; right:46px;}
    
    #topPan p{font-size:16px; padding:70px 0 0 43px;}
    
    #topContactPan{
    	width:159px;
    	height:51px;
    	position:absolute;
    	top:46px;
    	right:240px;
    }
    #topContactPan p.callus{background:#0C71A4; color:#fff; width:64px; height:14px; line-height:14px; font-size:14px; font-weight:bold; text-transform:uppercase; padding:0px;}
    #topContactPan p.no{font-size:26px; padding:4px 0 0;}
    /*----BODY PANEL----*/
    #bodyPan{
    	width:850px;
    	position:relative;
    	margin:0 auto;
    }
    #logo {
    	float: right;
    }
    
    /*----BODY LEFT PANEL----*/
    #bodyLeftPan{
    	width:410px;
    	float:left;
    	padding:12px 36px 0 0;
    }
    #bodyLeftPan h2{width:410px; height:30px; background:url(images/border1.gif) 100% 70% no-repeat #fff; color:#00111A; font:28px/28px Georgia, "Times New Roman", Times, serif;}
    #bodyLeftPan h2 span{background:#fff; color:#046598;}
    
    #bodyLeftPan h3{width:410px; height:30px; background:url(images/border2.gif) 100% 70% no-repeat #fff; color:#00111A; font:28px/28px Georgia, "Times New Roman", Times, serif;}
    
    #bodyLeftPan h3 span{background:#fff; color:#046598;}
    
    #bodyLeftPan p{padding:7px 0 0;}
    
    #bodyLeftPan p span{background:#fff; color:#046598; font-weight:bold;}
    
    #bodyLeftPan ul{width:410px; margin:10px 0 0;}
    #bodyLeftPan ul li{width:410px; height:20px;}
    #bodyLeftPan ul li a{width:390px; height:20px; background:url(images/button.gif) 0 6px no-repeat #fff; color:#1A1A1A; text-decoration:underline; padding:0 0 0 20px;}
    #bodyLeftPan ul li a:hover{width:390px; height:20px; background:url(images/button-hover.gif) 0 6px no-repeat #fff; color:#676363; text-decoration:underline;}
    
    #bodyLeftPan p.more{background:#F3F3F3; color:#003D5C; width:410px; height:11px; margin:25px 0; padding:0px; line-height:11px; font-size:11px; }
    #bodyLeftPan p.more a{display:block; width:44px; height:11px; background:#fff; color:#003D5C; text-decoration:none; margin:0 0 0 246px; line-height:11px; text-align:center; padding:0px; text-transform:uppercase;}
    #bodyLeftPan p.more a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;}
    
    #bodyLeftNextPan{width:410px; clear:both; padding:10px 0 0;}
    #bodyLeftPan p.next{background:#F3F3F3; color:#003D5C; width:410px; height:11px; padding:0px; line-height:11px; font-size:11px; clear:both; }
    #bodyLeftPan p.next a{display:block; width:44px; height:11px; background:#fff; color:#003D5C; text-decoration:none; margin:0 0 0 246px; line-height:11px; text-align:center; padding:0px; text-transform:uppercase;}
    #bodyLeftPan p.next a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;}
    
    #bookcatagories{width:410px; position:relative; margin:0 auto; padding:5px 0 0;}
    #namePan{width:156px; float:left; background:url(images/name-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase;}
    #nameonePan{width:156px; float:left;}
    #nameonePan ul{width:156px;}
    #nameonePan ul li{width:140px; height:20px; background:url(images/arrow.gif) 0 6px no-repeat #fff; color:#03537D; padding:0 0 0 10px;}
    
    #pricePan{width:106px; float:left; background:url(images/price-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase;}
    #priceonePan{width:143px; float:left;}
    #priceonePan ul{width:143px;}
    #priceonePan ul li{width:133px; height:20px; background:url(images/price-border.gif) 100% 50% no-repeat #fff; color:#00111A; line-height:20px; font-size:12px; font-weight:bold; padding:0 0 0 10px;}
    
    #discountPan{width:126px; float:left; background:url(images/discount-dot.gif) 100% 85% no-repeat #fff; color:#4F4F4F; font-size:14px; text-transform:uppercase; padding:0 0 0 12px;}
    #discountonePan{width:110px; float:left;}
    #discountonePan ul{width:110px;}
    #discountonePan ul li{width:100px; height:20px; background:url(images/dicount-border.gif) 100% 50% no-repeat #fff; color:#00111A; font-size:12px; font-weight:bold; padding:0 0 0 10px;}
    
    /*----/BODY LEFT PANEL----*/
    /*----BODY RIGHT PANEL----*/
    #bodyRightPan{
    	width:400px;
    	float:left;
    	border:1px solid #DADADA;
    	background:#F3F3F3;
    	color:#1A1A1A;
    	padding:0 0 28px;
    }
    
    #bodyRightPan h2{width:195px; height:35px; display:block; border:1px solid #DADADA; background:#fff; color:#00111A; font:24px/34px Georgia, "Times New Roman", Times, serif; margin:6px 8px 16px; padding:0 0 0 20px;}
    #bodyRightPan h2 span{background:#fff; color:#046598;}
    
    #bodyRightPan h3{width:195px; height:35px; display:block; border:1px solid #DADADA; background:#fff; color:#00111A; font:24px/34px Georgia, "Times New Roman", Times, serif; margin:6px 8px 0; padding:0 0 0 20px;}
    #bodyRightPan h3 span{background:#fff; color:#046598;}
    
    #bodyRightPan ul{width:180px; margin:0 0 17px 29px;}
    #bodyRightPan ul li{width:180px; height:18px;}
    #bodyRightPan ul li a{width:160px; height:18px; display:block; background:url(images/button.gif) 0 6px no-repeat #F3F3F3; color:#1A1A1A; text-decoration:none; padding:0 0 0 20px;}
    #bodyRightPan ul li a:hover{background:url(images/button-hover.gif) 0 6px no-repeat #F3F3F3; color:#797878; text-decoration:none;}
    
    #bodyRightPan p{padding:0px 29px 0px 29px;}
    #bodyRightPan p.boldtext{padding:10px 29px 0px; font-size:14px; background:#F3F3F3; color:#1A1A1A; font-weight:bold;}
    
    #bodyRightPan p.more{background:#fff; color:#003D5C; width:175px; height:11px; margin:10px 29px 10px; padding:0px; line-height:11px; }
    #bodyRightPan p.more a{display:block; width:44px; height:11px; background:#F3F3F3; color:#003D5C; text-decoration:none; margin:0 0 0 97px; font-size:11px; line-height:11px; text-align:center; text-transform:uppercase;}
    #bodyRightPan p.more a:hover{display:block; width:44px; height:11px; background:#E0DEDE; color:#003D5C; text-decoration:none;}
    /*----/BODY RIGHT PANEL----*/
    /*----/BODY PANEL----*/
    /*----FOOTER PANEL----*/
    #footermainPan{height:85px; background:url(images/footerbg.gif) 0 0 repeat-x #fff; color:#010101; clear:both; padding:72px 0 0;}
    
    #footerPan{width:683px; position:relative; margin:0 auto; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif}
    
    #footerPan ul{width:624px; position:relative; margin:0 auto;}
    #footerPan li{float:left; }
    #footerPan ul li a{padding:0 10px 0; color:#010101; background:#F3F3F3; text-decoration:none;}
    #footerPan ul li a:hover{text-decoration:underline;}
    
    #footerPan p.copyright{width:204px; background:#F3F3F3; color:#04496D; position:absolute; top:23px; left:40px; font-size:12px;}
    
    #footerPan ul.templateworld{width:250px; background:#F3F3F3; color:#444; display:block; position:absolute; top:40px; left:40px; font-size:10px;}
    #footerPan ul.templateworld li{height:20px;}
    #footerPan ul.templateworld li a{background:#F3F3F3; display:block; color:#444; text-decoration:none;}
    #footerPan ul.templateworld li a:hover{text-decoration:underline;}
    
    #footerPanhtml{width:60px; height:13px; display:block; position:absolute; top:26px; left:260px;}
    #footerPanhtml a{width:48px; height:11px; display:block; background:url(images/blue-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px;}
    #footerPanhtml a:hover{background:url(images/gray-arrow.gif) 85% 60% no-repeat #fff; color:#4F4F4F;}
    
    #footerPancss{width:50px; height:13px; display:block; position:absolute; top:26px; left:320px;}
    #footerPancss a{width:40px; height:11px; display:block; background:url(images/blue-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F; border:1px solid #DEDEDE; line-height:11px; font-size:11px; font-weight:bold; text-decoration:none; padding:1px 0 0 10px; text-transform:uppercase;}
    #footerPancss a:hover{background:url(images/gray-arrow.gif) 35px 3px no-repeat #fff; color:#4F4F4F;}
    #bodywrapbig {
    	margin-right: auto;
    	margin-left: auto;
    	margin-top: 0px;
    	margin-bottom: 0px;
    }
    
    #footerPanvalid {
    	position: relative;
    	right: 300px;
    	padding-left: 360px;
    	z-index: 23;
    }
    #footervalid {
    	position: relative;
    	top: 25px;
    	float: right;
    }
    #wordlogo {
    	float: left;
    }
    </style>
    is that enough
    Last edited by nikos101; 10-20-2007 at 04:01 PM.

  • #7
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,005
    Thanks
    58
    Thanked 10 Times in 10 Posts
    Solved it, the problem was that I should have had a div clear left and I had a strange browser caching issue


  •  

    Posting Permissions

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