Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member DrunkMunki's Avatar
    Join Date
    Aug 2010
    Posts
    9
    Member #
    23337
    Div displacement in IE8 Comp mode, and sometime Firefox (pictures)

    I am using Drupal 6, the front page is designed with Panels and therefore the divs cannot be changed. (i know, it's a mess)

    you can visit the site at Emerald Planet

    Problem i am having is the 2 boxes below the nav bar, these boxes (depending on the browser) loose position and change (see screenshots) i need to fix this soon as it looks very unprofessional (i moved the site from a windows propriety CMS to an open source one, did a good job except this small issue)

    I have tried position:relative,absolute, float:left,right and use z-index on the a3c2d6a2d411d326588272df457a4532.css and style.css file.

    The weird thing is in regards to Firefox, a few people have seen it out of position but when i use my pc, with the same version, it looks fine.

    Anyone have any idea whats displacing these divs?

    I am thinking with the firefox issue its something to do with the nav bar, as i think the contact link is pushed down forcing the div to separate and be pushed right.

    So if someone can find a solution to the IE issue it would be soooooo appreciated.
    Attached Images Attached Images

  2.  

  3. #2
    Junior Member
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    18
    Member #
    23193
    float everything to left

  4. #3
    Junior Member DrunkMunki's Avatar
    Join Date
    Aug 2010
    Posts
    9
    Member #
    23337
    Quote Originally Posted by iamchris View Post
    float everything to left
    they already are;

    HTML Code:
    .panels-flexible-region-3-topleft {
      position: relative;
      float: left;
      background-color: transparent;
      width: 520px;
    }
    
    .panels-flexible-region-3-topright {
      position: relative;
      float: left;
      background-color: transparent;
      width: 252px;
    }

  5. #4
    Junior Member
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    18
    Member #
    23193
    Not they.. everything..

    Basically make a div to act as a container for your page. This will be the div with the static width and have an automatic margin.

    The rest of the divs within your container such as the header, content and footer divs should be floated left.

  6. #5
    Junior Member DrunkMunki's Avatar
    Join Date
    Aug 2010
    Posts
    9
    Member #
    23337
    [RESOLVED] Div dispalcement in IE8 Comp mode, and sometime Firefox (pictures)

    actually I think i might have it (touch wood!)

    HTML Code:
    <div class="panels-flexible-region panels-flexible-region-3-topright panels-flexible-region-last">
    I added margin-right: -800px and position: relative

    HTML Code:
    <div class="panels-flexible-region panels-flexible-region-3-topright panels-flexible-region-last">
    I added position: absolute

    another issue i had was the position within the slideshow content were marked as absolute and relative, i changed them to inherit.

    now just need to tidy up some padding issues and its all good.

    I have tested it with FireFox and IE8 + compat mode and everything seems to be working.

    thanks for all your help

  7. #6
    Junior Member
    Join Date
    Aug 2010
    Location
    Netherlands
    Posts
    18
    Member #
    23193
    This might work but it's not the proper way of doing it.

    Here's a page I wipped up real quick for you to show you how to make use of float: left;

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
    
    * {
    	margin: 0px;
    	padding: 0px;
    	font-family: Arial, Helvetica, sans-serif;
    }
    
    body, html {
    	background: #000;
    }
    
    .full {
    	width: 966px;
    	float: left;
    }
    .half {
    	width: 483px;
    	float: left;
    }
    .third {
    	width: 322px;
    	float: left;
    }
    .two-thirds {
    	width: 644px;
    	float: left;
    }
    .sixth {
    	width: 161px;
    	float: left;
    }
    
    #wrap {
    	width: 966px;
    	margin: auto;
    }
    
    #container {
    	float: left;
    	background: #FFF;
    	padding: 20px;
    	border-radius: 10px;
    	margin-top: 20px;
    }
    
    #header h1 {
    	padding: 10px;
    	color: #030;
    }
    
    #navigation ul {
    	float: left;
    	background: #030;
    }
    #navigation ul li {
    	float: left;
    	margin-left: 5px;
    	margin-right: 5px;
    	list-style: none;
    }
    #navigation ul li a {
    	display: block;
    	color: #FFF;
    	text-decoration: none;
    	font-size: 28px;
    	padding: 5px;
    }
    #navigation ul li a:hover, #navigation ul li a.selected {
    	background: #093;
    }
    </style>
    </head>
    
    <body>
    
    	<div id="wrap">
        	<div class="full" id="container">
                <div id="header" class="full">
                    <h1>Emerald Planet</h1>
                </div>
                
                <div class="full" id="navigation">
                    <ul class="full">
                        <li><a href="#" class="selected">home</a></li>
                        <li><a href="#">about us</a></li>
                        <li><a href="#">products</a></li>
                        <li><a href="#">environment</a></li>
                        <li><a href="#">technology</a></li>
                        <li><a href="#">faq's</a></li>
                        <li><a href="#">contact us</a></li>
                    </ul>
                </div>
            
                <div class="two-thirds" style="height: 200px; background: #EEE;">
                </div>
                <div class="third" style="height: 200px; background: #093;">
                </div>
                
                <div class="third" style="height: 200px;">
                	<h2>solar</h2>
                </div>
                <div class="third" style="height: 200px;">
                	<h2>Promotions</h2>
                </div>
                <div class="third" style="height: 200px;">
                	<h2>Products</h2>
                </div>
                
                <div class="footer">
                footer
                </div>
            </div>
        </div>
    
    </body>
    </html>

  8. #7
    Junior Member DrunkMunki's Avatar
    Join Date
    Aug 2010
    Posts
    9
    Member #
    23337
    thanx for the info but I seem to have fixed it.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:08 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com