Looks different in Internet explorer/firefox (Please help!!)

[Rayis]

OK before you read, this is a general problem and not specific to Pixelpost.

I have recently started using Pixelpost and I must say I love it, great job Pixelpost team, you guys have done it just right! So I decided to modify the simple template to fit what I need..

However, I am stuck. If you have a min and know your way around HTML/CSS please take a look at this Q. I will appreciate it & definately share my template to anybody who wants it, once its finished.

The website address: http://thehighlighter.co.uk/index.php

The table for "picture-info", seems just fine in fire fox but in Internet explorer, the margin for left of it is cut and therefore looks pretty bad.

The code is simply:

<div id="image-info">

<p>
<span id="title"> <IMAGE_TITLE> - <IMAGE_DATETIME> </span> </p>
<span id="camera-info">
<p> Camera: <EXIF_CAMERA_MODEL><br />Exposure: <EXIF_EXPOSURE_TIME><br />Aperture: <EXIF_APERTURE><br />Flash: <EXIF_FLASH> </p></span>

<IMAGE_NOTES>
+ <COMMENT_POPUP>
</div>

While "image-info" as defined by CSS is:

#image-info {
background:#fff;
padding:5px;
vertical-align:middle;
color:#000;
text-align:left;
width:100%;
margin-right:20px;
margin-top:20px;
margin-bottom:25px;
}


Any ideas why they look different? many thanks!

[Dkozikowski]

Well, a few things that i thought were odd.

I am using the latest version of apple's SAFARI web-browser.

When i point my browser to
http://thehighlighter.co.uk/index.php?browse
or
http://thehighlighter.co.uk/index.php?about


Also, when returning to your index page from either your about or browse page, the style info is gone and does not reappear for me unless i select blue / gray. No amount of refreshing the page(s) helps.

[austriaka]

I cannot reproduce the cut off margin you describe in IE 7. It looks very similar in IE 7 and FF 2.0.
But I have the same effect dwilkinsjr describes: when going to "browse" or "about", the styles are missing and when returning to "home" they stay disappeared and come only when pressing "grey" or "blue" link.

Two things coming up when validating your index.php:
1) It is not allowed putting <p> into a <span> tag.
<span id="camera-info">
<p> Camera: K750i<br />Exposure: 1/20 sec<br />Aperture: f 2.8<br />Flash: Flash: Not Fired
</p>
</span>
2) You should not put style rules inside HTML comments as they may be removed by user agent (line 28)
<!--
.style1 {font-size: x-small}
-->

What I could see and this might be the problem of your left-margin problem: you defined all margins in your stylesheet (top, right, bottom), but not the left margin. Why not try that with a relative positioned <div>?

I imagine what is your stylesheet problem:
In index.php your stylesheets are named like this
<link rel="stylesheet" type="text/css" href="templates/simple/styles/grey.css" title="grey" />
<link rel="stylesheet" type="text/css" href="templates/simple/styles/blue.css" title="blue" />

In index.php?x=browse and index.php?x=about your stylesheet definition is as follows:
<link rel="stylesheet" type="text/css" href="templates/simple/styles/light.css" title="light" />
<link rel="alternate stylesheet" type="text/css" href="templates/simple/styles/dark.css" title="dark" />

You cannot define two standard stylesheets like you did in index.php, one of them has to be an alternate stylesheet.
And of course you have to use blue and grey in browse and about template, not dark and light.

HTH
KArin