SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast boboli's Avatar
    Join Date
    Mar 2003
    Location
    Venice - Italy
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Firefox issue with border [pls help]

    hi all and thanx for the help....
    I just started converting from tables to css layout (with the help of your book HTML Utopia...actually with the dloaded pdf awaiting the ordered original )

    I have a big problem with Firefox...
    I have 2 images that have to be surrounded together from a border and the code generates 4 couples of images to stay in a row (exactly as in the attached imgs)....

    the 2 images attached explain everything... and here is the code...

    Code:
    <body>
    <div id="container">
    	<div id="header">
    		<div id="logo"><?PHP echo "<img src='images/$logo'>\n";?></div>
    		<div id="gif"><?PHP echo "<img src='images/$gif_mid'>\n";?></div>
    	</div><!-- /header -->
    
    	<div id="squadre">
    	<div>
    		 <?PHP
    include("../dbinfo.inc.php");
    $db = mysql_connect("$dbhost", "$dbuser", "$dbpass") or die("Problem connecting");
    mysql_select_db("$dbname",$db)or die("Problem selecting database");
    $result = mysql_query("SELECT minilogo, invio FROM $infogirone WHERE id_s < 5 ORDER BY RAND()",$db);
    while($myrow = mysql_fetch_array($result))
    {
    $minilogo = $myrow["minilogo"];
    $invio = $myrow["invio"];
    $id_s = $myrow["id_s"];
    ?>
    <span class="minilogo"><? echo "$minilogo<img src='../images/$invio' align='absmiddle'>"; ?></span>
    
     <?
    }
    ?>
    </div>
     </div><!-- /squadre -->
    and this is the css file
    Code:
    div#content{background-color:#fff;
     padding: 1em;
     }
    div#squadre{background-color:#ddd;
    			padding: 10px;
    			text-align: center;
    		   }
    .minilogo {
    		   background-color:#fff;
    		   border:2px dashed #88f;
    		   margin: 5px;
    		   padding: 2px;
    		  }
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    From the look of your images it looks like you need to add a clear before the closing div of the parent. However theres not enough code above for me to see what you've done.

    If you can post the source code from the browser (view source) and all the css then it should be clearer.

    Paul

  3. #3
    SitePoint Enthusiast boboli's Avatar
    Join Date
    Mar 2003
    Location
    Venice - Italy
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    From the look of your images it looks like you need to add a clear before the closing div of the parent. However theres not enough code above for me to see what you've done.

    If you can post the source code from the browser (view source) and all the css then it should be clearer.

    Paul
    I realized that the SPAN is text dependant...

    you can see it here...
    http://www.legaforum.com/fantacalcio/boboli/sito_css/base.php

    now try this...using Mozzy change the text-size used from the browser and the border will enlarge this is how I understood that SPAN is "text related"

    I added a text-size:38px (actually the image height) to the .minilogo style and it's OK until the text size in Mozzy is set to standard....
    I tryed with line-height but it's not working...
    I'm looking for a better solution

    css code
    Code:
    /*stili per il layout fluido*/
    html,body{margin:0; padding:0;}
    body{background-color:#cdcdf9; font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 76%;}
    /*stili generici, su header e footer*/
    div#header{background-color:#cdcdf9; color: #fff; border-style: dashed;
      border-color: #88f; margin: 1em;
    }
    h1,h2{margin: 0;padding:0}
    h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
    h2{color: #999;font-size: 20px}
    div#logo{float: left; width: 130px;}
    div#gif{margin-left: 150px; text-align: center;}
    div#footer{text-align:center;padding: 10px;
    	background-color: #339; color: #88f}
    div#footer a{color: #fff;font-weight: bold;text-decoration: none}
     
    /*stili specifici per il layout*/
    div#navigation{
    background-color:#88f;
    }
    div#navigation1{
    background-color:#cdcdf9;
    }
    div#content{background-color:#fff;
     padding: 1em;
     }
    div#squadre{background-color:#ddd;
    			padding: 10px;
    			text-align: center;
    		   }
    
    /*stili per la navigazione*/
    div#navigation ul{margin: 0;padding: 0; text-align:center; list-style-type: none;}
    div#navigation li{display: inline; margin: 0 0 0 1em;padding: 0} /*nota display: inline*/
    div#navigation a{color:#339;font: normal bold 1.2em/2.5em arial,sans-serif;text-decoration: none}
    div#navigation a:hover{color: #fff;text-decoration: none}
    div#navigation a#activelink{color: #033;text-decoration: none}
    .logo_left {
      float: left;
      padding: 10px;
      background-color: #000;
      border: 1px solid #000;
      width: 150px;
      }
    .logo_right {
      float: right;
      padding: 10px;
      background-color: #000;
      border: 1px solid #000;
      width: 150px;
      }
    .minilogo {
    		   font-size: 38px;
    		   background-color:#fff;
    		   border:2px dashed #88f;
    		   margin: 5px;
    		   padding: 2px;
    		   vertical-align:middle;
    		  }
    ....
    thank you
    Roberto

  4. #4
    SitePoint Enthusiast boboli's Avatar
    Join Date
    Mar 2003
    Location
    Venice - Italy
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    another quick question...
    should I keep the tables for all the data coming from the mysql DB or should I try to convert also the tables ???
    I think that for these purposes we may keep tables ...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    If the tables hold tabular data then its fine to keep tables as thats what they are supposed to be used for .

    Regarding your other problem you will have problems with the span unless you float it because being an inline element it does not have to wrap its borders around its content.

    If your image blocks are the same size then I would float 4 of them in a container and then centre the container. You could possibly find a solution using display:table and display:table-cell also similar to this example:

    http://www.pmob.co.uk/temp/centremultipledivs.htm

    However you could always stick it in a table as a last resort

    Paul


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
  •