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>
