Problem with padding in IE and FF

nati · 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">

</head>

<body>

<?php include 'header.php';?>

<?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;

?>

<?php

$kategorija = $_GET['kategorija'];

$tekucakategorija = $kategorija;

include 'leftsidebar.php';

?>

<?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);

?>

<?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'>

<h6>".$row_art['naziv']."</h6>

<a href="."detail.php?artikal=".$row_art['id']."".">".'Detalji'."</a>

</div>";

echo "<div class='h_divider'> </div>";

}

?>

</div>

</div>

<?php include 'footer.html';?>

</div>

</body></html>

Sign In

Problem with padding in IE and FF

Recommended Posts

nati

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information