line-height breekt verticaal letter af in internet explorer - Softwareontwikkeling

dinsdag 21 oktober 2008 02:19

Acties:

Verwijderd

Topicstarter

Het gaat om: http://www.personal-id.com.au/test/index.php?page=fees

Wat is het probleem: Bij het gebruik van line-height met 11px of lager breekt internet explorer verticaal de laatste letter af van een regel. De font-size is 10px. Dit gebeurd alleen op de pagina "Fees". Op de andere pagina's gaat het wel goed.

Ik heb voor de duidelijkheid even een border aangezet en een padding toegevoegd. Zodat jullie kunnen zien waar het probleem zich voordoet.

Om het probleem te ontwijken heb ik bij de live site de line-height op 12 gezet. Maar dit veranderd de hoogte van het hele blok tekst nogal. Ik weet dat de css met je browser kan over rulen. Maar wanneer dit niet gebeurd, heb ik het graag op 11px.

Googlelen en zoeken in dit forum leverde geen relevante topics op. Alleen topic over IE4 waar in stond dat mensen er inderdaad problemen mee hadden...

Wat relevante code:

HTML:

<table id="main_table" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <div class="main" id="<?php echo $page; ?>">
                <div id="menu">
                    <?php include ( "inc/menu.php" ) ?>
                </div>
                <div id="left_content">
                    <?php echo $left_content; ?>                
                </div>
                <div id="lower_left_content">
                    <span class="header2">No job is to small or to large.</span><br />&nbsp;<br />
                    Traditional to Contemporary styles of Decorating.
                </div>
                <div id="main_content">
                    <table id="main_content_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="bottom">
                                <?php echo $main_content; ?>                            
                            </td>
                        </tr>
                    </table>
                </div>              
            </div>          
        </td>
    </tr>
</table>

Cascading Stylesheet:

div.main {
    position: relative;
    border:#FFCC00 solid 3px;
    margin:0 auto;
    text-align:left;
    width: 1016px;
    height: 540px;

    font-family:Verdana, Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    word-spacing:normal;
    text-align:justify;
    letter-spacing: 0px;
    line-height: 11px;
    font-size: 10px;
    vertical-align: text-bottom;
}

#main_content {
    position: absolute;
    left: 395px;
    bottom: 85px;
    width: 580px;
    height: 430px;
    padding:5px;
    border: #33FF00 solid 1px;
}

dinsdag 21 oktober 2008 02:36

Acties:

Room42

• Ik heb hier geen IE dus zou je misschien een screenshotje willen plaatsen (bijv. via www.tinypic.com)?
• En welke versie van IE?
• En waarom die table "main_content_table"? Waarom ben je daar niet netjes met divs doorgegaan? (De fees_table staat er vervolgens wel weer goed. Dat is waar tables voor bedoeld zijn: Tabellen)

[ Voor 53% gewijzigd door Room42 op 21-10-2008 02:52 ]

"Technological advancements don't feel fun anymore because of the motivations behind so many of them." Bron

dinsdag 21 oktober 2008 10:13

Acties:

Da Weef

Misschien is het praktisch als je een stuk code plaatst dat ook dezelfde fout genereert? De code die je nu hebt geplaatst is in ieder geval onvolledig...

Op het eerste gezicht lijkt me goed mogelijk dat er ergens iets misgaat in je afwisselende keuzes voor tables en divs voor opmaak. Is er een specifieke reden dat deze door elkaar worden gebruikt?

.

donderdag 23 oktober 2008 17:53

Acties:

Verwijderd

Topicstarter

offtopic:
Sorry voor de late reply, ik was even vergeten dan got geen mail geeft bij een reply.

De rede dat ik die tabel gebruik is omdat ik de site in het "centrum" van het venster wil hebben. Ik heb dit een tijd geleden, met pijn en moeite, voor een andere site op deze manier voor elkaar gekregen. (cross-browser) Dus heb het nu weer gebruikt. Mochten jullie een goede <div> oplossing hebben, ik hoor het graag.

Het gebeurd iig bij IE6 en IE7 op Windows XP.

Hierbij nog even de code voor de desbetreffende pagina:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Personal-id.com.au</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table id="main_table" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            <div class="main" id="fees">

                <div id="menu">
                    <a href="index.php?page=fees" target="_self" >fees</a>
<a href="index.php?page=services" target="_self" >services</a>
<a href="index.php?page=home" target="_self" >home</a>              </div>
                <div id="left_content">
                    
<img src="images/01.jpg" width="103" height="114" alt="01a" id="img_1" />
<img src="images/02.jpg" width="103" height="114" alt="02" id="img_2" />
<img src="images/03.jpg" width="103" height="114" alt="03" id="img_3" />
<img src="images/04.jpg" width="103" height="114" alt="04" id="img_4" />                
                </div>

                <div id="lower_left_content">
                    <span class="header2">No job is too small or too large.</span><br />&nbsp;<br />
                    Traditional to Contemporary styles of Decorating.
                </div>
                <div id="main_content">
                    <table id="main_content_table" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="bottom">
                                

<p>
    <span class="header1">TWO DAY INTERIOR DECORATING COURSES AND WORKSHOPS.</span><br />
    This two-day weekend course gives an over-view on how to successfully decorate your own home. The course concentrates on  becoming familiar with the essential elements and principles of decorating and studying the concepts of space, proportion, colour, light, furniture, fabrics, decorating styles and basically, how to achieve balance and detail, incorporating your own personal taste and flair.
</p>

<p>
    This package includes lunch, morning and afternoon tea, a comprehensive booklet on the topics covered in the course. Cost $800 (inc. GST). Payment is required, prior to the commencement date. It is best to book early for a placement, as there is only a maximum of 15 participants per course. The venue and subsequent details will be sent to you beforehand.
</p>

<p>
    <span class="header1">TO BOOK FOR THE TWO DAY COURSE, DATE TO BE VERIFIED, YOU NEED TO:</span>

</p>
<ul>
    <li>Email your NAME and PHONE NUMBER to our email address and once we confirm that there is a vacancy available for you
in the next course.</li>
    <li>Make a payment by cheque or transfer the funds directly into the designated account given to you upon confirmation of
a placement.</li>
</ul>

<p>
    <span class="header2">For more details on the next available course, you can contact me personally on any of my contact details.</span>
</p>
<br />
<p>

    <img src="images/fees.png" width="38" height="19" alt="fees" title="fees" />
</p>
<p>&nbsp;</p>
<table id="fees_table" cellspacing="0" cellpadding="0"> 
  <tr>
    <td colspan="3"><span class="header2">Our Services</span></td>
  </tr>
  <tr>
    <td>Decoration consultancy</td>
    <td>Approx. 60 min.</td>

    <td>$&nbsp;100 per hour</td>
  </tr>
  <tr>
    <td>Budget service</td>
    <td>decorating on a budget</td>
    <td>$&nbsp;&nbsp;&nbsp;50 per hour</td>

  </tr>
  <tr>
    <td>Selling your home</td>
    <td>a personal appraisal</td>
    <td>$&nbsp;500 standard fee</td>
  </tr>
  <tr>

    <td>Two day course and workshop</td>
    <td>weekends from 9am to 4pm</td>
    <td>$&nbsp;800 for total package</td>
  </tr>
  <tr>
    <td colspan="3" class="gst_cell"><span class="header2">all prices are incl gst</span></td>

  </tr>  
</table>
                            
                            </td>
                        </tr>
                    </table>
                </div>          <!--    Address   -->
                
            </div>          
        </td>
    </tr>

</table>
</body>
</html>

En de screenshot:
http://www.personal-id.co...ages/Personal-idcomau.png

donderdag 23 oktober 2008 20:16

Acties:

DiSiLLUSiON

Je kunt negatieve margins gebruiken.

top: 50%;
left: 50%;
margin-top: -pixelhoogte px;
margin-left: -pixelbreedte px;

Maar weet je zeker dat je de pagina verticaal wilt centreren?

Een pagina verticaal centreren is namelijk highly overrated. Ik raad het je ten sterkste af. In het geval dat je nagenoeg alleen beeld hebt, zou je het kunnen gebruiken. Maar op het moment dat je website niet als hoofddoel het laten zien van enkele afbeeldingen heeft, gaat het niet meer werken. Je website is geen visitekaartje, het is een website! Op het moment dat je het over echte pagina's hebt, zijn bezoekers nagenoeg altijd comfortabeler bij een 'vaste' website.

[ Voor 37% gewijzigd door DiSiLLUSiON op 25-10-2008 10:40 ]