Textpattern CMS

#1 2006-03-24 03:53:49

alansham

New Member

Registered: 2005-07-13

Posts: 6

images align position on IE

Dear mates

I’m helping my friend to run a website by TXP, I build it on mac and everything looks perfectly on Safari, FF and Camino; however, the case is that when I tried to test with IE on windows, pictures become away from my expectation. Can anyone help me to fix this problem?

samples for reference:
ScreenShot on Mac: www.alansham.com/graphics/screenshot_mac.jpg
ScreenShot on IE: www.alansham.com/graphics/screenshot_ie.jpg

Thanks in Advance

Cheers
Alan

Last edited by alansham (2006-03-24 03:57:38)

#2 2006-03-24 04:19:00

whatbrick

Member

From: Texas

Registered: 2006-03-13

Posts: 100

Re: images align position on IE

Do you have a URL where we can look at the source markup and CSS (or maybe you could post it here)? That would be helpful in determining the cause.

---

Do not taunt the Markup Monkey!

#3 2006-03-24 04:24:33

alansham

New Member

Registered: 2005-07-13

Posts: 6

Re: images align position on IE

Yes, here it is

For gallery page code

www.alansham.com/graphics/gallerypage.rtf

For CSS

www.alansham.com/graphics/css.rtf

Thanks a lot

#4 2006-03-24 05:14:59

whatbrick

Member

From: Texas

Registered: 2006-03-13

Posts: 100

Re: images align position on IE

Ok, here’s what I see for the main image:

<div id="index">
<txp:image_index break="li" wraptag="ul" />
</div>

<div style="text-align:center;float:center">
<txp:image_display />
</div>

Here’s the css listed in the gallery.rtf file you posted, which pertains to the images:

#index {
   width: 400px;
   display: run-in;
}
#index li {
   margin: 1px;
   float: left;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   display: run-in;
   list-style-type: none;
}

According to the <a href=“http://www.w3.org/TR/CSS21/visuren.html#floats”>w3c</a>, float does not accept a value of center, so IE is ignoring that property.

Also, I’m not sure if IE supports display: run-in; as listed under the index container, so it’s ignoring that one as well. I could be wrong, though.

Make these changes to the above CSS and see if it helps:

#index {
   width: 400px;
   float: left;
}
#index li {
   margin: 1px;
   float: left;
   background-color: #f00;
   border-top-style: none;
   border-right-style: none;
   border-bottom-style: none;
   border-left-style: none;
   list-style-type: none;
}

Then take this line:

<div style="text-align:center;float:center">
<txp:image_display />
</div>

And change it to something like this:

<div class="mainImage">
<txp:image_display />
</div>

You can use any class name you want, so don’t feel like you have to use everything verbatim. Then you can add the style information from that container and add it to your main CSS like so:

.mainImage
{
text-align: center;
float: left;
}

Notice the float change to float: left;. That should work in all the browsers, including IE.

Ok, this reply was longer than I was wanting, but hopefully it will solve your problem.

Edit:

For a more thorough example, I’ve got a quick mockup of the changes <a href=“http://www.theguruguys.com/samples/floattest.html”>here</a> that may be useful. It was tested in Firefox 1.5 (winXP), IE 6, Opera 9 (winXP) and Konquerer (linux). All of them rendered the page the same way.

Last edited by whatbrick (2006-03-24 05:41:00)

---

Do not taunt the Markup Monkey!

#5 2006-03-24 15:08:02

alansham

New Member

Registered: 2005-07-13

Posts: 6

Re: images align position on IE

Hi Whatbrick

You are the MAN, finally I have made it on IE now, let me say a big Thank You to you, you are the man!!

Cheers
Alan