PDA

View Full Version : Layout compatibility issues Firefox/IE with CSS and XSL



venatio
Aug 17th, 2007, 08:37 PM
I've been working on a transformation of XML using XSLT, the transformation part is fine and I can get a result I'm happy with using IE but in Firefox the alignments of the elements are completely wrong. The problems involve the span elements 'left', 'right' and 'center'. I want them to align with a lefthand span column, a central column and a righthand column. In Firefox the righthand column doesn't seem to work and the element merely follows on from the central column's element. Meanwhile the central column places only the first line of the text of each span element in the correct place and then the text wraps round to the extreme left.

Any ideas? The css code is below. I can post the XSL if necessary but I realise that's not really for this board.

Cheers.


body {
font-family: Verdana, sans-serif;
font-size: 10pt;
}

h1 {
background: #C00;
color: yellow;
padding: 0 0.2em;
margin: 0;
font-size: 2em;
}

h2 {
background: #C00;
color: white;
padding: 0 0.2em;
margin-left: 20px;
font-size: 1.8em;
}

h3 {
margin-left: 40px;
font-size: 1.6em;
}

.left {
position: absolute;
margin-left: 60px;
padding: 0px;
width: 10%;
}

.center {
margin-left: 15%;
padding-right: 0px;
width: 70%;
font-weight: bold;
}

.right {
margin-left: 100px;
position: absolute;
margin-right: 0px;
padding: 0px;
}

.scopecontent {
margin-left: 15%;
padding-right: 0px;
width: 70%;
}

venatio
Aug 17th, 2007, 09:01 PM
Here's a link to the page that doesn't render correctly:

http://homepage.ntlworld.com/huntandco/testcompiled3c.html

Fang
Oct 25th, 2007, 06:02 PM
strong {
float:left;
}

.left {
float:left;
margin:0 -5% 0 5%;
width: 15%;
}

.center {
overflow:hidden;
margin-bottom:1em;
}

.scopecontent{
float:left;
padding:0;
margin:0;
margin-left: 15%;
width: 60%;
}

.right {
float:right;
width:15%;
}


<h3>Barkby</h3>
<div class="center">
<span class="left">BH1</span>
<strong>Conveyance of land in north end of Thurmaston.</strong><span class="right">25 May 1842</span>
<p class="scopecontent">Conveyance of land in north end of Thurmaston.
1) Midland Counties Railway Company
2) Elizabeth Pochin of Misterton Hall, Leics, widow
3) Rev William Pochin of Sudbury, Suffolk and John Carr of Lincolns Inn, Middlesex.
Conveyance of a parcel of land in the north end of Thurmaston in the parish of Barkby from 1) to 2) and conveyed to 3).
Consideration: £364</p>
</div>

<div class="center">
<span class="left">BH2</span>
<strong>(Copy) Abstract of the title of various estates of Frederick George Norman Pochin.</strong>
<span class="right">1871</span>
<p class="scopecontent">Estates
at Sileby, Syston, Barkby, Thurmaston, Humberstone, Thorpe Satchville
and Leicester. Recites will and codicils of George Pochin of Barkby
Hall, 1 Jul 1825 - 13 Mar 1830. Recites indenture between Frederick
George Norman Pochin of Edmondthorpe Hall and Thomas Miles the younger
of Leicester for above land. 27 Feb 1871. Location of estates outlined
fols 7-8. Copy of original dated 1871.</p>
</div>

.
.
.

Arbitrator
Oct 25th, 2007, 07:14 PM
Any ideas?I would try adding a document type declaration via the XSLT output element to get your page into standards‐compliance mode. Without a document type declaration, Firefox and Internet Explorer will be in quirks mode, where they intentionally misrender the page to give you want they think you want and what they think you want may differ.

I didnít investigate your code deeply enough to see whether or not this was the actual issue though.