IE Problem: Marginal/padding för stor när texten inte går ända ner

stephanMedlem sedan feb. 2006117 inlägg

Frågan9 maj 2006 14:57#1

Jag har problem med en marginaler/padding i IE (som vanligt :( ). Se bifogad bild.

Om jag skalar om browserfönstret så att texten går nedanför bilden så blir marginalen/paddingen korrekt.

Inga problem med FF.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Test</title>
<style type="text/css">
body, td, th {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
}
h3 {
	font-size:10px;
}

table  {
	border-collapse: collapse; border-spacing: 0;
}

p {
	margin-top:0px;
}

td, th {
	padding:0px;
	white-space:nowrap;
}

.clearfix {
	clear:both;
}

div.product {
	position:relative;
	zoom:1;
	border:10px solid #F7F7F7;
	overflow:hidden;
	margin-bottom:20px;
	padding:4px;
}

div.product .header {
	margin:4px;
}

div.product .header, div.product .extra, div.product .productParts {
	clear:both;
}

div.product .extra {
	margin:4px -4px 0px -4px;
	padding: 4px 4px 0px 4px;;
	border-top:#F7F7F7 solid 10px;
}

div.product .productParts {
	margin: 4px 0px 4px 0px;
}

div.product h3 {
	margin:0px;
	padding:0px;
	float:left;
}

div.product h3 {
	margin-left:150px;
}

* html div.product h3 {
	margin-left:75px; /* IE-fix */
}

div.product .destinationName, div.product .resortName, div.product .rating {
	white-space:nowrap;
	float:left;
}

div.product .destinationName {
	position:relative;
	left:4px;
}

div.product .resortName {
	position:relative;
	left:4px;
}

div.product .rating {
	position:relative;
	left:8px;
}
div.product .rating img {
	margin-left:2px;
}

div.product .image {
	clear:both;
}
div.product .image img {
	float:left;
	margin:4px 4px -20px 0px;
	width:150px;
	position:relative;
	top:-20px;
}
div.product div.descr {
	margin:4px 4px 0px 0px;
}
div.product div.link {
	position:absolute;
	top:4px;
	right:8px;
	margin:4px 4px 0px 0px;
}

div.product .extra table, div.product .productParts table {
	width: 100%;
}

div.product .extra td, div.product .productParts td, div.product .extra th, div.product .productParts th {
	padding:4px 10px 4px 10px;
	text-align:left;
}

div.product .extra th  {
	background-color:#EDEDED;
}

div.product .productParts th {
	background-color:#999999;
	color:#FFFFFF;
}

div.product .oddRow td {
	background:#F7F7F7;
}

div.product .evenRow td {
	background:#FFFFFF;
}

div.product .extra .productName {
	width:95%;
}
div.product .extra .description {
}
div.product .extra .fromDate {
}
div.product .extra .toDate {
}
div.product .productParts .fromDate {
}
div.product .productParts .productType {
}
div.product .productParts .description {
	width:95%;
}
div.product .productParts .size {
	text-align:center;
	white-space:nowrap;
}
div.product .productParts .available {
	text-align:right;
}
div.product .productParts .price {
	text-align:right;
}
div.product .productParts th.price {
	text-align:center;
}

div.product .productParts .extraNight {
	text-align:right;
}
div.product .productParts .extraBedDiscount {
	text-align:right;
}
div.product .productParts .extraBedAdd {
	text-align:right;
}
div.product .productParts .vacantBed {
	text-align:right;
}
div.product .productParts .totalPrice {
	text-align:right;
}
div.product .productParts .cartPrice {
	text-align:right;
}
div.product .productParts .book {
	text-align:center;
}

</style>
</head>
<body >
<div class="product">
          <div class="header">
            <h3 class="name"><a href="javascript:productInfo('SE','ARN','STO','CATS');" target="main">W3C China
Office Opens</a></h3>
            <div class="destinationName">Beijing</div>
            <div class="resortName">, China</div>
            <div class="clearfix"></div>
          </div>
          <div class="image"><img src="http://www.w3.org/2006/04/27-office.jpeg" alt=""></div>
          <div class="descr"> The W3C China
Office is open in Beijing, China, hosted at the School of Computer Science
& Engineering of Beihang University. For more information on
the opening ceremonies on 27-28 April, please refer to the press release. W3C Offices assist with promotion efforts in
local languages, broaden W3C's geographical base, and encourage. </div>
          <div class="clearfix"></div>
          <div class="extra">
            <table>
              <tr>
                <th class="productName">Paketet inkluderar följande boende</th>
                <th class="description">Beskrivning</th>
                <th class="fromDate">Från</th>
                <th class="toDate">Till</th>
              </tr>
              <tr class="oddRow">
                <td class="productName"><a href="#">Hotell 1</a></td>
                <td class="description">Rum</td>
                <td class="fromDate">06-06-22</td>
                <td class="toDate">06-06-25</td>
              </tr>
            </table>
          </div>
          <div class="productParts">
            <table>
              <tr>
                <th class="fromDate">Datum</th>
                <th class="description"> Arrangemangstyp </th>
                <th class="totalPrice"> Totalpris </th>
                <th class="book"> </th>
              </tr>
              <tr class="oddRow">
                <td class="fromDate">06-06-23</td>
                <td class="description"> Balkong</td>
                <td class="totalPrice"> 2735.00 </td>
                <td class="book"><a href="#">Boka</a></td>
              </tr>
            </table>
          </div>
          <div class="extra">
            <table>
              <tr>
                <th class="productName">Paketet inkluderar följande boende</th>
                <th class="description">Beskrivning</th>
                <th class="fromDate">Från</th>
                <th class="toDate">Till</th>
              </tr>
              <tr class="oddRow">
                <td class="productName"><a href="#">Hotell 2</a></td>
                <td class="description">Dubbelrum</td>
                <td class="fromDate">06-06-22</td>
                <td class="toDate">06-06-25</td>
              </tr>
            </table>
          </div>
          <div class="productParts">
            <table>
              <tr>
                <th class="fromDate">Datum</th>
                <th class="description"> Arrangemangstyp </th>
                <th class="totalPrice"> Totalpris </th>
                <th class="book"> </th>
              </tr>
              <tr class="evenRow">
                <td class="fromDate">06-06-23</td>
                <td class="description"> Parkett </td>
                <td class="totalPrice"> 1970.00 </td>
                <td class="book"><a href="#">Boka</a></td>
              </tr>
            </table>
          </div>
        </div>
</body>
</html>

MozfanMedlem sedan okt. 2005541 inlägg

9 maj 2006 17:59#2

Varför har du
<div class="extra">
<table>
när du kan ha <table class="extra"> likaväl som du har <th class="productName">

Genom att ta bort div'en och lägga klassen i table krymper mellanrummet.

stephanMedlem sedan feb. 2006117 inlägg

10 maj 2006 06:52#3

Den HTML-koden jag använder ska vara samma på en massa olika sajter men utseendet kommer vara olika beroende på CSS:en. Därför tyckte jag det var bra att först dela in alla delar i div-element, och sen fylla divvarna med innehåll, så att varje del av allt innehåll har en egen div. Detta för att skapa bättre förutsättningar för oförutsedda krav på utseendet i framtiden. Med en div runt tabellen tror jag man lättare kan få till olika utseenden/layouter.

Ska prova att ta bort den divven och se hur det fungerar. Det låter ju rimligt att det kan börja funka i IE då.

stephanMedlem sedan feb. 2006117 inlägg

10 maj 2006 07:04#4

Hmm, njae det funkade inte riktigt som jag tänkt. Jag behöver nog ha kvar divven runt för att få till 4px margin mellan bordern och tabellen. Allt mellanrum ska inte bort, utan det blir för stort i IE. Kolla Firefox så ser du hur det ska se ut.