xsl alignment not working properly in ie9

lourdes villanueva 1 post 21 karma points

Sep 17, 2012 @ 05:06

xsl alignment not working properly in ie9

Hi All,

I have a problem with this site: http://bodayplaya.com/sitemap.xml ;

If you see it in Firefox/Chrome/Safari it works fine, but not in IE9... it is weird since it is getting the class properties properly but not the alignment part

The XSL is this:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
    <title>Boda y Playa. Wedding Planner</title>
    <link rel="icon" type="image/jpg" href="css/images/favicon.jpg" />
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="js/functions.js"></script>
    <script type="text/javascript">

        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-33352443-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();

    </script>
</head>
<body style="background-color:#fdf8e4">
<div id="wrapper">
    
    <div id="header">
        <div class="shell">
            <h1 id="logo"><a href="index.html">Boda y Playa. Wedding Planner</a></h1>
            
            <div id="navigation">
                <ul>
                    <li><a href="nosotros_boda_playa_wedding_planner.html">QUIÉNES SOMOS <span></span></a></li>
                    <li><a href="servicios_boda_playa_wedding_planner.html">SERVICIOS <span></span></a></li>
                    <li><a href="destinos_boda_playa.html">DESTINOS <span></span></a></li>
                    <li><a href="galeria_boda_playa.html">GALERÍA <span></span></a></li>
                    <li><a href="contacto_wedding_planner.html">CONTACTO <span></span></a></li>
                </ul>
            </div>
            
        </div>
    </div>
    
    <div id="main" class="shell">
        
        <div id="content">
            <div class="head">
                <h2>MAPA DE SITIO</h2>
            </div>
            
                <div class="tab">
                    <table style="font-size: 14px; line-height: 20px; color: #3f544b; font-family: 'EBGaramondRegular', arial, sans-serif; width: 700px; height: 330px; padding-right: 26px; float: left; display: inline;">
                        <xsl:for-each select="urlset/url">
                            <tr height="10">
                                <td style="text-align:left">
                                    <xsl:variable name="itemURL">
                                        <xsl:value-of select="loc"/>
                                    </xsl:variable>
                                    <a href="{$itemURL}"><xsl:value-of select="name"/></a>
                                </td>
                            </tr>
                        </xsl:for-each>
                    </table>
                </div>
            
        </div>
        
    </div>
    
</div>

<div id="footer">
    <div class="shell">
        <p><a href="destinos_boda_playa.html">Bodas en playa</a></p>
        <p>|</p>
        <p><a href="servicios_boda_playa_wedding_planner.html">Servicio de coordinación de bodas</a></p>
        <p>|</p>
        <p><a href="nosotros_boda_playa_wedding_planner.html">Coordinadores de bodas</a></p>
        <p>|</p>
        <p><a href="sitemap.xml">Mapa de Sitio</a></p>
        <p>                                      +52 (81) 1936.6995 - <a href="#">[email protected]</a></p>
        <p>Todos los derechos reservados.</p>
        <div class="socials">
            <a href="http://www.facebook.com/bodayplaya" target="_blank"><img src="css/images/f.png" alt="" /></a>
            <a href="https://twitter.com/bodayplaya" target="_blank"><img src="css/images/t.png" alt="" /></a>
            <a href="https://plus.google.com/102738224402475491109?prsrc=3" rel="publisher" style="text-decoration:none;" target="_blank"><img src="css/images/g.png" alt="" /></a>
            <div class="cl"> </div>
        </div>
    </div>
</div>

</body>
</html>
</xsl:template>
</xsl:stylesheet>

and the CSS is this:

@font-face {
    font-family: 'Gotham-Bold';
    src: url('font-face/gotham-bold.eot');
    src: url('font-face/gotham-bold.eot?#iefix') format('embedded-opentype'),
         url('font-face/gotham-bold.woff') format('woff'),
         url('font-face/gotham-bold.ttf') format('truetype'),
         url('font-face/gotham-bold.svg#gotham-bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'EBGaramondRegular';
    src: url('font-face/ebgaramond-webfont.eot');
    src: url('font-face/ebgaramond-webfont.eot?#iefix') format('embedded-opentype'),
         url('font-face/ebgaramond-webfont.woff') format('woff'),
         url('font-face/ebgaramond-webfont.ttf') format('truetype'),
         url('font-face/ebgaramond-webfont.svg#EBGaramondRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h2 { font-size: 22px; line-height: 22px; text-transform: uppercase; color: #3f544b; font-family: 'Gotham-Bold', arial, sans-serif; font-weight: normal; }

* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%; }

body {
    font-size: 12px;
    line-height: 1.3;
    font-family: arial, sans-serif;
    color: #000;
    background: #fff;
    min-width: 900px;
}

a { color: #0252aa; text-decoration: none; cursor: pointer; }
a:hover { text-decoration: underline; }
a img { border: 0; }

input, textarea, select { font-size: 12px; font-family: arial, sans-serif; }
textarea { overflow: auto; }

.cl { display: block; height: 0; font-size: 0; line-height: 0; text-indent: -4000px; clear: both; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.left, .alignleft { float: left; display: inline; }
.right, .alignright { float: right; display: inline; }

.shell { width: 900px; margin: 0 auto; position: relative; }

#wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -30px; }

#header { background: url(images/header.png) repeat-x 0 0; height: 96px; padding: 18px 0 0 0; }

h1#logo { width: 173px; font-size: 0; line-height: 0; float: left; display: inline; }
h1#logo a { background: url(images/logo.png) no-repeat 0 0; height: 72px; display: block; text-indent: -4000px; }

#navigation { float: right; display: inline; background: url(images/nav-border.png) no-repeat right 10px; margin-top: 19px; margin-right: 25px;}
#navigation ul { list-style: none; }
#navigation ul li { display: inline; float: left; font-family: 'Gotham-Bold', arial, sans-serif; padding: 0 14px; background: url(images/nav-border.png) no-repeat 0 10px; }
#navigation ul li a { float: left; display: inline; height: 38px; line-height: 38px; padding: 0 20px; color: #fff; font-size: 10px; position: relative;}
#navigation ul li a.active,
#navigation ul li a:hover { text-decoration:none; background: url(images/nav.png) no-repeat center 0; color: #b5985a; }
#navigation ul li a.active span,
#navigation ul li a:hover span { background: #b99e64; height: 3px; width: 100%; position: absolute; bottom: -39px; left: -12px; padding: 0 12px; }

.holder { width: 558px; float: right; display: inline; padding-top: 43px; padding-bottom: 25px; }

.gallery { width: 381px; height: 350px; padding: 17px 20px 0 20px; float: left; display: inline; background: url(images/gallery.png) no-repeat 0 0; }
.gallery h3 { font-size: 14px; line-height: 14px; text-transform: uppercase; font-family: 'Gotham-Bold', arial, sans-serif; font-weight: normal; color: #3f544b; padding-bottom: 7px;}
.gallery h3 { border-bottom: 1px solid #b5985a; width: 303px; }
.gallery .g-inner { height: 300px; width: 357px; }
.gallery .g-inner-cnt { padding-top: 9px; }
.gallery .g-inner-cnt a { margin: 0 20px 15px 0; float: left; display: inline; }

#content { float: right; display: inline; width: 535px; padding-top: 15px }
#content .head .back{ display: none; }

.head { min-height: 40px; border-bottom: 1px solid #b5985a; margin-bottom: 20px; width: 350px; }
.head h2 { padding-bottom: 6px; }
.head .back { font-size: 10px; line-height: 10px; text-transform: uppercase; color: #b5985a; text-shadow: 0 1px 0 #fff; font-family: 'Gotham-Bold', arial, sans-serif; }
.head .back { background: url(images/arrows.png) no-repeat 0 4px; text-decoration: none; padding-left: 11px; }

.section { font-size: 16px; line-height: 20px; color: #3f544b; font-family: 'EBGaramondRegular', arial, sans-serif; width: 350px; height: 330px; padding-right: 26px; float: left; display: inline; text-align:justify; }
.section p { text-indent: 18px; padding-bottom: 15px; }
.section .row { padding-bottom: 5px;}
.section .row label { float: left; display: inline; font-size: 14px; line-height: 14px; text-transform: uppercase; color: #6b6860; font-family: 'Gotham-Bold', arial, sans-serif; }
.section .row .field { float: right; display: inline; border: 0; border-bottom: 1px solid #bdc6b2; width: 189px; padding: 1px 10px 0 10px; color: #6b6860; }
.section .row textarea.field { height: 50px; }
.section .row select.field { width:209px; padding: 0 0 0 0 }
.section .tab ul { padding-left:30px;}
.section .row input.error{ border-color:Red; border-style:solid; border-width:1px; }

.contact { overflow: visible; height: 370px; }

.tab h3 { font-size: 18px; line-height: 18px; text-transform: uppercase; color: #b5985a; font-family: 'Gotham-Bold', arial, sans-serif; font-weight: normal; padding-bottom: 16px; }
.tab img.left { margin: 0 15px 0 0; -webkit-box-shadow: 4px 4px 2px 0px #a79170; box-shadow: 4px 4px 2px 0px #a79170; }
.tab img.right { margin: 0 0 0 15px; -webkit-box-shadow: -4px 4px 2px #a79170; box-shadow: -4px 4px 2px #a79170; }

.side-nav { width: 135px; float: left; display: inline; padding-left: 23px; }
.side-nav ul { list-style: none; }
.side-nav ul li { display: block; padding-bottom: 20px;}
.side-nav ul li a { display: block; width: 107px; height: 25px; line-height: 25px; background: url(images/side-nav.png) no-repeat center 0; text-align: center; color: #4d4d4d; }
.side-nav ul li a { text-transform: uppercase; font-family: 'Gotham-Bold', arial, sans-serif; }
.side-nav ul li a.active,
.side-nav ul li a:hover { text-decoration: none; color: #745a27; background-position: center bottom; }
.side-nav h5 { font-size: 14px; line-height: 14px; text-transform: uppercase; color: #3f544b; font-weight: normal; font-family: 'Gotham-Bold', arial, sans-serif; }
.side-nav h5 { text-shadow: 0 1px 0 #fff; margin-top: -40px; padding-bottom: 25px; position: relative;}
.side-nav ol { list-style: none; padding-left: 10px;}
.side-nav ol li { background: url(images/bullet.png) no-repeat 0 6px; padding-left: 14px; padding-bottom: 23px; }
.side-nav ol a { font-size: 13px; line-height: 13px; color: #3f544b; font-family: 'EBGaramondRegular', arial, sans-serif;}
.side-nav ol a:hover { text-decoration: none; color: #4d4d4d; }

.buttons-holder { padding: 30px 0 25px 141px; }
.buttons-holder .button { float: left; display: inline; background: url(images/button.png) no-repeat 0 0; width: 65px; height: 28px; cursor: pointer; border: 0; }
.buttons-holder .button { margin-right: 22px; color: #414141; font-size: 9px; text-transform: uppercase; font-family: 'Gotham-Bold', arial, sans-serif;}

.container { float: right; display: inline; width: 661px; padding-top: 15px; }
.container .head { margin-bottom: 17px; }

.box { float: left; display: inline; height: 360px; width: 505px!important; }
.box .jspPane { padding-right: 0!important; width: 485px!important; }
.box h4 { font-size: 16px; line-height: 16px; font-weight: normal; color: #b5985a; font-family: 'Gotham-Bold', arial, sans-serif; padding-bottom: 9px;}

.box .row { padding-bottom: 5px;}
.box .row label { float: left; display: inline; font-size: 14px; line-height: 14px; text-transform: uppercase; color: #6b6860; font-family: 'Gotham-Bold', arial, sans-serif; }
.box .row .field { float: right; display: inline; border: 0; border-bottom: 1px solid #bdc6b2; width: 209px; padding: 1px 10px 0 10px; color: #6b6860; }
.box .row textarea.field { height: 63px; }
.box .row select.field { width:209px; padding: 0 0 0 0; }
.box .row .fieldCheckbox { float: right; display: inline; border: 0; width: 209px; padding: 1px 0px 0 10px; color: #6b6860;}

.box .article { padding-bottom: 20px; }
.box .article .info { width: 423px; float: right; display: inline; padding-right: 10px; padding-top: 3px; }
.box .article .info p { font-size: 15px; line-height: 16px; font-family: 'EBGaramondRegular', arial, sans-serif; color: #3f544b; }
.box .article .info ol { list-style: none; float: right; display: inline; }
.box .article .info ol li { float: left; display: inline; padding-left: 15px;}
.box .article .info ol li a { font-size: 10px; line-height: 20px; color: #b5985a; font-family: 'Gotham-Bold', arial, sans-serif; text-decoration: underline; }
.box .article .info ol li a:hover { text-decoration: none; }

.b-txt p { font-size: 16px; line-height: 16px; font-family: 'EBGaramondRegular', arial, sans-serif; color: #3f544b; padding-bottom: 15px; padding-top: 2px; text-align:justify; }

.aside { float: left; display: inline; padding-left: 22px; padding-top: 11px; }
.aside ul { list-style: none; }
.aside ul li { padding-bottom: 15px; }
.aside ul li img { display: block; -webkit-box-shadow: 0px 0px 5px 0px #222; box-shadow: 0px 0px 5px 0px #222; }
.aside ul li a:hover img { -webkit-box-shadow: 0px 0px 5px 0px #000; box-shadow: 0px 0px 5px 0px #000; }
.aside .images { margin: 81px 0 0 25px; display: inline-block; }

.aside ol { list-style: none; float: left; display: inline; }
.aside ol li { float: left; display: inline; padding-left: 0px;}
.aside ol li a { font-size: 10px; line-height: 20px; color: #b5985a; font-family: 'Gotham-Bold', arial, sans-serif; text-decoration: underline; }
.aside a:hover { text-decoration: none; }

.testimonial { width: 457px; padding: 120px 0 0 47px; }
.testimonial p { font-size: 34px; line-height: 34px; color: #575552; font-family: 'EBGaramondRegular', arial, sans-serif; text-shadow: 0 1px 0 #fff; text-indent: 18px; padding-bottom: 6px;}
.testimonial p span { display: block; text-align: right; font-size: 18px; font-style:italic; }

#slide-list { list-style: none; float: left; position: absolute; top: 14px; left: 50%;}
#slide-list li { float: left; display: inline; padding-right: 25px; }
#slide-list li a { float: left; display: inline; width: 8px; height: 8px; background: url(images/slider-nav.png) no-repeat 0 0; }
#slide-list li a:hover,
#slide-list .current-slide a { background-position: 0 bottom; }

.push { height: 30px; font-size: 0; line-height: 0; text-indent: -4000px; }

#footer { height: 40px; padding: 5px 0 0 0; background: url(images/footer.png) repeat-x 0 0; position:fixed; bottom:0; width:100%; }
#footer .shell { padding: 0 0 0 0; width: 800px; }
#footer p { float: left; display: inline; font-family: 'EBGaramondRegular', arial, sans-serif; color: #fff; font-size: 13px; padding-left: 30px; }
#footer p a { color: #fff; }
#footer .socials { float: right; display: inline; padding-right: 0; }
#footer .socials a { margin-right: 9px; display: inline; float: left; }

.tab table{font-size:14px;}
.tab td{text-align:center;}
.tab .statement{text-align:left;}
.tab .pair{background-color:#e2d1ae;}
.tab .header{font-size:15px; font-weight:bold;}
.tab .header td {border-bottom: 1px solid #dac8a4;}

Can anyone tell me if there is a way to get this right?

Copy Link

is working on a reply...

This forum is in read-only mode while we transition to the new forum.

You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Flag this post as spam?

xsl alignment not working properly in ie9