nati Posted December 14, 2008 Share Posted December 14, 2008 Hello everybody, This is common problem and I have read a lot about it and applied many suggestions and some of them helped me in some way but not completely. As I became clueless after so many trials, I decided to post here, hoping for help. The problem is next: I have php page with header, menu under the header, left sidebar and main content area with some dynamic content. After choosing a category in left sidebar, products should be displayed in main content area (an image + product name + price + link to details) and under every line there is a horizontal divider. In IE everything looks fine, but in FF price is not vertically aligned with image, product name and link. It is under the horizontal divider and I cannot get in aligned at all. Here is part of my css file and php page, I hope someone will be able to tell where I am wrong ???. style.css * { margin: 0px; padding: 0px; } body { height: 100%; background-color: #ffffff; color: #85859c; font-family: tahoma, arial, sans-serif; font-size: 10px; text-align: center; } a { color: #85859c; text-decoration: underline; } a:hover { color: #69699c; } span { display: none; } img { border: none; } p { margin: 10px 0px 5px; text-align: justify; line-height: 14px; } .clearthis { margin : 0px; height : 1px; clear : both; float : none; font-size : 1px; line-height : 0px; overflow : hidden; } #container { margin: 0px auto; width: 780px; border-color: #9e9ec3; border-width: 0px 1px 1px; border-style: solid; } input { padding-left: 2px; background-color: #fff; color: #85859c; font-family: tahoma, arial, sans-serif; font-size: 11px; } /* Main Content Area */ #main_content { margin-right: 2px; width: 644px; text-align: center; float: right; } #main_content .h_divider { margin-bottom: 2px; height: 1px; background-color: #c2c2cd; overflow: hidden; width: 644px; } /* Products */ .product { width: 644px; color: #660066; } #product h1 { padding: 20px 0px 0px 25px; margin-bottom: 0px; width: 574px; font-family: tahoma; color: #FF0099; font-size: 20px; font-weight: bold; text-align: left; } .red{ margin-top: 0px; margin-bottom: 0px; width: 644px; height: 80px; font-family: tahoma; color: #660066; text-align: left; float: left; } #red img{ width: 60px; height: 40px; padding-left: 10px; padding-top:10px; padding-bottom:10px; float: left; } #red h6{ width: 434px !important; width: 304px; padding-left: 15px; text-align: left; color: #660066; font-size: 11px; font-weight: bold; float: left;; padding-top: 25px; padding-bottom: 10px; height: 30px; } #red h6.price{ padding-left: 100px !important; padding-left: 15px; padding-right: 15px; width: 50px; text-align: right; color: #660066; font-size: 13px; font-weight: bold; float: none; } #red a{ margin-top: -65px; margin-right: 25px !important; margin-right: 0px; width: 20px; padding-right: 10px; padding-left: 15px; text-align: right; color: #ff0099; font-size: 13px; text-decoration: underline; float: right; font-weight: bold; padding-top: 25px; padding-bottom: 10px; height: 30px; } #red a:hover{ color: #778899; } product.php <!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"><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /><title>Online kompjuterska prodavnica</title> <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> </head> <body> <div id="container"> <!-- Start of Page Header --> <?php include 'header.php';?> <!-- End of Page Header --> <!-- Start of Page Menu --> <?php $menu=file_get_contents("menu.php"); $base=basename($_SERVER['PHP_SELF']); $menu=preg_replace("|<li><a href=\"".$base."\">(.*)</a></li>|U", "<li class=\"current\">$1</li>", $menu); echo $menu; ?> <!-- End of Page Menu --> <!-- Start of Left Sidebar --> <?php $kategorija = $_GET['kategorija']; $tekucakategorija = $kategorija; include 'leftsidebar.php'; ?> <!-- End of Left Sidebar --> <?php include 'veza.php'; $query_kat = "select naziv from kategorija where id = '$kategorija'"; $result_kat = mysql_query($query_kat); $row_kat = mysql_fetch_array($result_kat); $query_art = "select a.id, a.naziv, a.slika, a.cena from artikal a, marka m where m.id = a.marka_id and a.kategorija_id = '$kategorija' and a.raspoloziva_kolicina > 0 order by m.kratki_naziv, a.cena"; $result_art = mysql_query($query_art); $broj_redova_art = mysql_num_rows($result_art); $query_bod = "select id, vrednost_boda from bod where datum = (select max(datum) from bod)"; $result_bod = mysql_query($query_bod); $row_bod = mysql_fetch_array($result_bod); ?> <!-- Start of Main Content Area --> <div id="main_content"> <!--Start Products --> <?php echo "<div id='product'>"; echo "<h1>".$row_kat['naziv']."</h1>"; echo "<br><br><br>"; echo "<div class='h_divider'> </div>"; for ($i=1; $i<=$broj_redova_art; ++$i) { $row_art = mysql_fetch_array($result_art); $cena = $row_art['cena']*$row_bod['vrednost_boda']; $cena = number_format($cena, 2, '.', ','); echo "<div id='red'> <img src='".$row_art['slika']."' alt='' height='40' width='60' /> <h6>".$row_art['naziv']."</h6> <h6 class='price'>".$cena."</h6> <a href="."detail.php?artikal=".$row_art['id']."".">".'Detalji'."</a> </div>"; echo "<div class='h_divider'> </div>"; } ?> <br><br><br><br> <div class="clearthis"> </div> </div> <!-- End of Products --> <div class="clearthis"> </div> </div> <!-- End of Main Content Area --> <div class="clearthis"> </div> <!-- Start of Page Footer --> <?php include 'footer.html';?> <!-- End of Page Footer --> </div> </body></html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.