SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Clear:Both in Firefox is driving me crazy...

    OK here is the page:

    http://www.evolutionmsport.com/evmCa...m_pages&pag=62

    If you look at it in IE 6.0 it is as it should be. In Firefox the thumbnails are smacked down on the bottom of the page. Now I know the problem has to do with clearing "both" on a float. The problem is I cannot for the life of me figure out where to put the clear and where to put the container div. I have read a ton of the posts on this and I cannot figure it out.

    The page is dynamically generated, so if you do a view source you will see a ton of div. I use them to turn thigs off an on. Here is the snippet of code I used to ogenerate the page. I have highlighte the div items with "####"

    Code:
    
    <ul id="subnav2">
    <li><a href="<?php echo $dd_Site."evmCart/index.php?main_page=evm_pages&pag=62"?>">Team Partners</a></li>
    <li><a href="<?php echo $dd_Site."evmCart/index.php?main_page=evm_pages&pag=63"?>">The Car</a></li>
    <li><a href="#">Our Driver</a></li>
    <li><a href="#">Race Schedule</a></li>
    <li><a href="#">Race Results</a></li>
    </ul>
    
     <style>
     .partner{
     position:relative;
     float:left;
    width:150px;
    
    padding:10px;
    }
     </style>
    
    
    
    while ($arr = @mysql_fetch_array($res)) {
    
    	$id=$arr['pageID'];
    if ($count==0){
    echo '<img style="float:right;padding:5px;" id="mainImg" src="/images/partners/'.$arr['image'].'" alt="Project Evolution" width="300" height="225" border="0" />';
    $count=1;
    }
    
    	if ($id==0) {$display="block";}
    	else {$display="none";}
    
    echo '<div id="'.$id.'" style="display:'.$display.';">'; ##############
    	
    
    	if (isset($arr['company']) && !empty($arr['company'])) {echo 
    	echo '<br /><br /><b>Contact Information:</b><br />';
    
    echo '<div class="partner">';  ###########################
    
    	if (isset($arr['company']) && !empty($arr['company'])) {echo    $arr['company'].'<br />';}
    	if (isset($arr['address1']) && !empty($arr['address1'])) {echo $arr['address1'].'<br 
    	if (isset($arr['country']) && !empty($arr['country'])) {echo $arr['country'].'<br />';}
    	echo '</div>';  #######################
    	
    	echo '<div class="partner">'; ########################
    	if (isset($arr['phone']) && !empty($arr['phone'])) {echo 'Tel: '.$arr['phone'].'<br href="mailto:'.$arr['email'].'">Email '.$arr['company'].'</a><br />';}
    	echo '</div>';  ##############################
    
    	
    	
    
    	echo '</p></div>'; ##########################
    
    	}
    		
    
    	echo '<br class="clearboth" />';#####################
    
    
    
    	echo '<img style="border:1px solid #666;margin:3px;" src="/images/partners/'.$tn.'" style="cursor: pointer;" onclick="changeImg(\'/images/partners/'.$img.'\'); switchDiv(\''.$id.'\');" />';
    	}
    
    ?>
    Here is the page that calls the code (I removed most of the extraneous stuff):

    Code:
    <body>
    
    
    
    <div id="minHeight"></div>
    <div id="outernew"> 
      <div id="headernew">
       		<a href="<?php echo $dd_Site."index.php"?>" title="EvM Home"><img src="http://www.evolutionmsport.com/images/header-2004.gif" alt="EvM Header Logo" width="700" height="84" border="0" /></a> 
    		<div id="cartdisplay">
    
    	
    </div>
    		
      </div>
      <div id="leftnew"> 
        <?php  include ($dd_Site."common/newLeft2.php") ?>
      </div>
      
      
      
    <div id="tabbar"> 
    
    				
    
          				</div>
    					
    					<div>
    
    					</div>
         		
    
    					
    				
    				
    
    
    </div>
    	
    	
    	
    	
    	
      <div id="rightnew"> 
        <?php  include ($dd_Site."common/newRight.php") ?>
      </div>
      <div id="centrecontent"> 
    
          <?php require($body_code); ?>
    
      </div>
      <div class="clearer"></div>
    </div>
    
    <div id="footernew">
    
    </div>
    </body>
    The css for the clearer and clear both classes is the same and looks something like this:
    Code:
    .clearboth{
    clear:both;
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    }
    Now the question is how do I get the space to go away in firefox. I tried placing a floated container div, then clearing it. After about 30 tries I gave up.

    Any ideas?

    Thanks...Mike
    Evolution Motorsport
    The Performance Company

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI Mike,

    I've given you the answer to this a number of times now Firefox will clear all floats in the document unless you containe the floats to be cleared within a float themselves. This restricts the clear the to all floast inside that parent float.

    Code:
    html>body #innercentre{width:98%;float:left;}
    Apply that element to the html and wrap it just inside the #centrecontent so that all centre content is inside #innercentre. Then it will work.

    Paul

    BTW That code awfully messy and any missing div will cause it to fail so try and keep it tidy

  3. #3
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Paul is this legal?

    Hey Paul ..... Ive got a question on this persons code..

    about 1/2 way down the page you will find this (right after some js):

    <style>
    .partner{
    position:relative;
    float:left;
    width:150px;

    padding:10px;
    }
    </style>

    Is that legal?????

    I ran the page thru the validator and the only complaint I could see about it was the type='text/css' from the style tag was missing (but then again I didnt spend a ton of time looking - too many errors)

    Not that Im thinking of doing this mind you. I prefer external styles 99.99% of the time ...... AND I know you can do this with js (even though again not a wonderful idea) ....... I was just really amazed that this worked at all..

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Is that legal?????
    No -Its mot legal but it doesn't seem to do any harm though

    I think its the result of some of the dynamic data but it should be cleaned up.

    As an aside you can actually use the fact that it does no harm to hide your css code from hotmail. Hotmail strips out most of the code from the head when you send html emails so you can put the style blocks in the body and preserve your styles. (most of them anyway as some hotmail accounts don't let any positioning work but colours and backgrounds etc work fine. I know this because I spent about 3 days trying to get this to work for a client. Had to use a table in the end but styled it with css lol)

    Paul

  5. #5
    SitePoint Addict
    Join Date
    Apr 2004
    Location
    PA
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    HI Mike,

    I've given you the answer to this a number of times now
    Yeah I realize that, but I could never get it working. I was always trying to change the included page. Finally, after this post I realized I needed to put the floated div in my template page. Now all works as expected.

    Also, I realize the code is in shambles. I am trying to port a tables based layout into CSS, so its an arduous process.

    As for the CSS populated throughout the code, I usually put it in there when I am testing. Eventually I move it out.

    Nevertheless, thanks for the help. Everything is working great now.

    Thanks...Mike
    Evolution Motorsport
    The Performance Company


Bookmarks

Posting Permissions

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