CSS div positionning problem in different browsers/OS

Discussion in 'Web Design' started by GregoryCo, Dec 13, 2008.

to remove all ads.
  1. GregoryCo

    GregoryCo New Member

    Messages:
    5
    Hi
    I have a problem with my divs, in some browsers and different OS my divs change from position. On most browsers it is as it should be.

    CSS (these are the 3 divs that change their position)
    Code:
    #homeLinks {
    	width: 150px;
    	height: 280px;
    	margin-left:6%;
    	margin-top:2%;
    	background-color: #ffffff;
    	border-color:#878787;
    	border-style:solid;
    	border-width:1px;
    	float:left;
    }
    #homeIllu {
    	width:48px;
    	height:58px;
    	background-image: url(images/illu_home2.png);
    	position: absolute;
    	left:3%;
    	bottom:5%;
    }
    #homeRechts {
    	width: 355px;
    	height: 280px;
    	margin-right: 5%;
    	margin-top: 2%;
    	float: right;
    	background-color: #ffffff;
    	border-color: #878787;
    	border-style: solid;
    	border-width: 1px;
    	padding-left: 5px;
    	padding-right: 5px;
    } 
    HTML
    Code:
    <body>
    	<div id="container">
    		<div id="grijsVlak">
            
    <div class="menu">
    				<ul>
    					<li><a href="index.htm"><img src="http://www.webdesignforum.com/images/menu_home_active.jpg" alt=""></a></li>
    					<li><a href="illustraties.htm"><img src="http://www.webdesignforum.com/images/menu_illustraties.jpg" alt=""></a></li>
    					<li><a href="ontwerpen.htm"><img src="http://www.webdesignforum.com/images/menu_ontwerpen.jpg" alt=""></a></li>
    					<li><a href="mezelf.htm"><img src="http://www.webdesignforum.com/images/menu_mezelf.jpg" alt=""></a></li>
    				</ul>
    			</div>
    			<div id="homeIllu"></div>
    <div id="homeLinks">
    				<h1>-UPDATES EN NIEUWS-</h1>
    				<p>&nbsp;</p>
    			  <p>Stage: Periode 22/09 - 31/10<br>
    			  &amp; 20/04 - 05/06 bij het bedrijf<br>
    			      <strong>speelokee - skateconstruct</strong> te Kortrijk</p>
    			  <p>&nbsp;</p>
    			  <p><strong>Laatste update schetsen<br>
    			  7/11/2008</strong><strong><br>
    		      </strong></p>
    		  </div>
    		  
    <div id="homeRechts">
    				<h1>-ABOUT-</h1>
    				<p>&nbsp;</p>
    				<p>Deze portfolio bevat een selectie uit de werken die ik tot nu toe heb gemaakt. </p>
    				<p>&nbsp;</p>
    				<p>° illustraties: Daar kun je de illustraties bekijken die ik in de afgelopen 4 jaar heb gemaakt met behulp van illustrator.</p>
    				<p>&nbsp;</p>
    				<p>° ontwerpen: Je kunt de ontwerpen en schetsen bekijken die ik heb gemaakt tot nu toe in het kader van mijn opleiding Industrieel Productontwerpen.</p>
    				<p>&nbsp;</p>
    
    </div>
    	  
    	  </div>
          
    </div>
    
    
    </body>
    
    http://users.skynet.be/fa314098/ this is the website how it should be

    image of issue:

    [​IMG]

    Thanks in advance!
     
    Last edited: Dec 13, 2008
  2. adx

    adx New Member

    Messages:
    220
    Change the margins from percentages to pixels, i.e. margin-left: 10px;
    I think that should do the trick. Give word if it doesn't.
     
  3. GregoryCo

    GregoryCo New Member

    Messages:
    5
    Well, originally it was like that, with pixels, but it showed exactly the same problem, so I tried to put it in percentages, but without success.
    Thanks for reply
     
  4. adx

    adx New Member

    Messages:
    220
    Hm, It's really hard to tell what's going on even with the source available.
    It seems like a simple layout that should work fine without any problems. Have you
    tried switching the container's padding for 'container p {margin: px;}. Padding can
    cause the cell to expand in certain browsers. Never touch the stuff myself :)
    What language is that, Dutch? Most cryptic language ever! :p
     
  5. GregoryCo

    GregoryCo New Member

    Messages:
    5
    Dutch indeed :D

    but it won't work :( it's even worse
    oh god I hate those different browsers :p
     
  6. adx

    adx New Member

    Messages:
    220
    Word! All I can think of is that you start from scratch.
    What happens if you float all the containers to the left? Just a thought.
     
  7. conor

    conor New Member

    Messages:
    348
  8. adx

    adx New Member

    Messages:
    220
    He isn't trying to. He's just floating a couple of Div's.
     
  9. adamblan

    adamblan New Member

    Messages:
    234
    Layout with tables terrible idea. Don't do it.

    Try to absolutely position these elements instead of floating them.
     
  10. conor

    conor New Member

    Messages:
    348
    He seems to have fixed his problem so all is good! :)

    It's not clear from what he provided but he is trying to. If you go to http://users.skynet.be/fa314098/index.htm you will see what I mean.

    I'm refering to this code which had a float and was an inline element. He has obviously since removed the float:
    Code:
    #grijsVlak {
    background-color:#F8F8F8;
    border:1px solid #878787;
    display:inline;
    height:350px;
    left:50%;
    margin-left:-300px;
    margin-top:-175px;
    position:absolute;
    top:50%;
    width:597px;
    }
     
  11. adx

    adx New Member

    Messages:
    220
    Ah, I see. My bad! Glad it's fixed! :)
     
  12. GregoryCo

    GregoryCo New Member

    Messages:
    5
    hmm I haven't changed anything, I still have the same problem, I tried everything but nothing seems to work :(
     

Share This Page