Fixed area layout issue in ie

We are trying to create a hybrid fixed area layout similar to the layout given below.

<Canvas Id="InteriorThreeCol4" row-spacing="5" inline-css="true">
<Name>Three Column Content</Name>
<Row Id="row-1" >
<Area Id="row-1-area-1" width="liquid" class="InteriorThreeCol4-Header">
<Name>Header, BreadCrumb</Name>
</Area>
</Row>

<Row Id="row-2" css-class="InteriorThreeCol4-Title">
<Area Id="row-2-area-1" width="liquid">
<Name>Title,Top Navigation</Name>
</Area>
</Row>

<Row Id="row-3" css-class="InteriorThreeCol4-MidRow" area-spacing="10px" >

<Area Id="row-3-area-1" css-class="InteriorThreeCol4-LeftNav" width="210px">
<Name>LeftNav</Name>
</Area>

<Column Id="row-3-col-2" row-spacing="10px">
<Row Id="row-3-col-2-row-1" area-spacing="10px">
<Area Id="row-3-col-2-row-1-area-1" width="liquid" css-class="InteriorThreeCol4-TabNavigation">
<Name>Tab Navigation</Name>
</Area>
</Row>

<Row Id="row-3-col-2-row-2">
<Column Id="row-3-col-2-row-2-col-1" row-spacing="10px">
<Row Id="row-3-col-2-row-20" area-spacing="10px">
<Area Id="row-3-col-2-row-2-col-1-area-1" width="liquid" css-class="InteriorThreeCol4-TabBody">
<Name>Main Body Content</Name>
</Area>
<Area Id="row-3-col-2-row-2-col-2-area-1" width="200px" css-class="InteriorThreeCol4-RightCol">
<Name>Right Column Content</Name>
</Area>
</Row>
</Column>
</Row>
</Column>

</Row>

<Row Id="row-4">
<Area Id="row-4-area-1" width="liquid" class="InteriorThreeCol4-Footer">
<Name>Footer</Name>
</Area>
</Row>
</Canvas>

The layout is being displayed properly in mozilla with all columns at the right position.
But in internet explorer the layout is distorted.The columns are being pushed down as rows.

Find more posts tagged with

Comments

santosh013

Hi,
Though I have not checked your code at my end but what is your web developer(HTML guy) saying.
I hope he/she will easily find out why its not working in IE.

HTH.

Rick Poulin

You're probably using a DIV-based layout, so CSS will affect how IE renders it. The most likely problem is that you have things floating, and IE's box model is rendering a box an extra pixel or two wide, which causes it to flow down to the next line. Depending on your version of IE and TS, you may consider altering the fixed-layout.xsl (or creating your own in 7.2+) to use doctype switching and kick IE into standards mode. It's either that, or specifying inline-styles="no" and then being crafty in how you modify the layout css generated by sitepub.

Horay

Thanks a lot for the reply.
Even in another thread I found a suggestion to change the default-layout.xsl. But i am unable to find it in the teamsite installation. I did a find . "*.xsl" in /iw-home/TeamSite directory but nothing came up.

santosh013

Thanks a lot for the reply.
Even in another thread I found a suggestion to change the default-layout.xsl. But i am unable to find it in the teamsite installation. I did a find . "*.xsl" in /iw-home/TeamSite directory but nothing came up.

Hi,
You can get your XSL files in iw-home\httpd\webapps\content_center\WEB-INF\classes\com\interwoven\xsl.

HTH.

Rick Poulin

Even in another thread I found a suggestion to change the default-layout.xsl. But i am unable to find it in the teamsite installation.

That's what I said. Since you're using fixed layout, you want to modify fixed-layout.xsl or add your own layout definition in the pagetype-config.xml. Contrary to what's been posted, the proper location to make those modifications is in the livesite_customer_src portion of the UITK:
/iw-home/TeamSite/local/config/lib/content_center/livesite_customer_src/etc/conf/livesite_customer/pagetype-config.xml. If you want to edit the OOTB one, you should copy it from /iw-home/ApplicationContainer/server/default/deploy/iw-cc.war/WEB-INF/classes/com/interwoven/xsl/runtime and put it in [...]/livesite_customer_src/etc/classes/com/interwoven/xsl/runtime and use the proper UITK build process.

kaleemS

We are trying to create a hybrid fixed area layout similar to the layout given below.

<Canvas Id="InteriorThreeCol4" row-spacing="5" inline-css="true">
<Name>Three Column Content</Name>
<Row Id="row-1" >
<Area Id="row-1-area-1" width="liquid" class="InteriorThreeCol4-Header">
<Name>Header, BreadCrumb</Name>
</Area>
</Row>

<Row Id="row-2" css-class="InteriorThreeCol4-Title">
<Area Id="row-2-area-1" width="liquid">
<Name>Title,Top Navigation</Name>
</Area>
</Row>

<Row Id="row-3" css-class="InteriorThreeCol4-MidRow" area-spacing="10px" >

<Area Id="row-3-area-1" css-class="InteriorThreeCol4-LeftNav" width="210px">
<Name>LeftNav</Name>
</Area>

<Column Id="row-3-col-2" row-spacing="10px">
<Row Id="row-3-col-2-row-1" area-spacing="10px">
<Area Id="row-3-col-2-row-1-area-1" width="liquid" css-class="InteriorThreeCol4-TabNavigation">
<Name>Tab Navigation</Name>
</Area>
</Row>

<Row Id="row-3-col-2-row-2">
<Column Id="row-3-col-2-row-2-col-1" row-spacing="10px">
<Row Id="row-3-col-2-row-20" area-spacing="10px">
<Area Id="row-3-col-2-row-2-col-1-area-1" width="liquid" css-class="InteriorThreeCol4-TabBody">
<Name>Main Body Content</Name>
</Area>
<Area Id="row-3-col-2-row-2-col-2-area-1" width="200px" css-class="InteriorThreeCol4-RightCol">
<Name>Right Column Content</Name>
</Area>
</Row>
</Column>
</Row>
</Column>

</Row>

<Row Id="row-4">
<Area Id="row-4-area-1" width="liquid" class="InteriorThreeCol4-Footer">
<Name>Footer</Name>
</Area>
</Row>
</Canvas>

The layout is being displayed properly in mozilla with all columns at the right position.
But in internet explorer the layout is distorted.The columns are being pushed down as rows.

Did you resolve this error?

Actually, I found the cause of this issue but not the solution.
This type of layout doesn't work in IE, because there is no DOCTYPE in the generated page.

Is anyone know, how to add doctype in here?

Rick Poulin

No need to ask your question twice.
Link for anybody looking for the answer in the future: http://devnet.interwoven.com/forums_vb/showthread.php?p=184527

ksn3

Hi All,

We are facing same issues with TS 7.3.2 fixed-layouts in IE. Have any of you got the resolution to this issue?

Thanks.

Adam Stoller

I guess you can show a horse the water, but they cannot take the link :-)