Centering image in Firefox *and* IE?

[segal3]

I'm using:
margin-left: auto;

margin-right: auto;

for the .ee_viewer style to try to force the photo image to be centered in the window, and it works in Firefox, but not in IE. Any suggestions?

[segal3]

Pekka -

Will anything bad happen if I comment out:
float: left;
position: relative;
in .ee_viewer style?

[seanspeng]

I think photo centering looks much better than to the left side.

[Pekka]

All these are just template changes. What you do with them is purely personal choice. If you think you have got something great done which you want to share PM me the template and I'll put it to style forum downloads.

[segal3]

Pekka -

I know it's a template change, but I was wondering if editing that style code will mess up anything else on the page?

[wkitty42]

I know it's a template change, but I was wondering if editing that style code will mess up anything else on the page?
as long as it has been, i'm sure you've already tried it, eh? ;)

however, for those that want to revert to the "old fashioned way", the simplest fix is to replace <table border="0" cellspacing="0" cellpadding="0" class="ee_viewer_table"><tr>with <table align="center" border="0" cellspacing="0" cellpadding="0"><tr> on or about line 78 of /templates/pages/ee_2_default/photo/default_XHTML_content.php

i tried numerous things and even spend several hours in the DOM inspector with no real luck... finally, i decided to just force the issue by telling the table where i wanted it and removing the css style from it... and there it was! just puurrrrrfect :D:cool::p:lol:

[kheops]

worked perfectly here thanks wkitty42 :)

[wkitty42]

oops! you also have to make the exact same change in /templates/pages/ee_2_default/photo/slideshow/default_XHTML_content.php on or about line 56 otherwise the slideshow is off to the left, too...

[wcbert33]

I try it in IE 7 does not work, does in Firefox.

Bill

[shaun3000]

Same here. IE blows.

[wcbert33]

I take back what I said about it not working in IE 7.

I found out what the problem was I hand to also disable the CSS class before it.

Now it works!

Bill

[seanspeng]

I take back what I said about it not working in IE 7.

I found out what the problem was I hand to also disable the CSS class before it.

Now it works!

Bill

How do you "disable the CSS class before it"?

Thanks Bill.

[wcbert33]

Change the <div class="ee_viewer"> to <div class="">

Bill

[seanspeng]

Thanks Bill.

Strange thing happened, when I went to admin -> Styles, then clicked on "edit" the file you mentioned, it opens a completely blank page. I was able to edit it this afternoon. Now it became all blank...

Any guess why this happened? I tried two computers, both have this problem.

[cferrero]

You could check you're not missing a semi-colon ; at the end of a line. You'll have to download the file to your local PC and open it with a text editor

[seanspeng]

This happens to all my template editing in admin.

[wkitty42]

Change the <div class="ee_viewer"> to <div class="">
i just remove that portion completely...

instead of <div class="ee_viewer"> i just put <div>... if there's anything else in that tag section, i believe i left it as it was... just simply removed the "class="blah" portion...

[wkitty42]

Strange thing happened, when I went to admin -> Styles, then clicked on "edit" the file you mentioned, it opens a completely blank page. I was able to edit it this afternoon. Now it became all blank...

Any guess why this happened? I tried two computers, both have this problem.
i just tested this very quickly... my server is kinda similar to a windows server so permissions don't effect me as they do others on *nix, NT or XP based servers... my server is sitting right beside me and i just happened to have had my ftp server screen on top... when i clicked on the edit link, i saw ee log into my ftp server and pull the file down... i didn't make any changes so i don't know what it would have done ot put it back but i suspect that it would have used the ftp server again... i'd check your permissions for the template directories and the files in them... i don't know what to suggest they should be, though... i would suspect that they might need to be 777 or similar to the upload and temp directories so that the ftp user could get into them, pull the files down, rename them and send the new ones back up... but again, this is educated speculation... hopefully pekka isn't too busy and will be able to provide a more accurate answer...

[seanspeng]

Well for no reason, it is working again... confused..

[wkitty42]

as long as it is working, RUN WITH IT! when it stops, quit running! ;) ;)

[PrimaPhoto]

I found out what the problem was I hand to also disable the CSS class before it.

Very helpful discussion, I got it to work.

I once saw a page where Pekka had mentioned info about the templates?
Does anyone know where this page is I've been looking around for a long time?

http://www.primaveraphoto.com/photodbase/index.php

[jeronimo]

The solution mentioned is NOT XTML1.0 strict

I am suffering the same problem; thinking of making an new div class for the table to center this. Workes well in my header file ;)

[wkitty42]

The solution mentioned is NOT XTML1.0 strictwhich solution... mine or whatever else is mentioned in this thread?

I am suffering the same problem; thinking of making an new div class for the table to center this. Workes well in my header file ;)

care to share?

[jeronimo]

which solution... mine or whatever else is mentioned in this thread?

The one where in the <table> part align="center" is placed.
If you do this directly in the php file, then this is not stricly XTML1.0.


care to share?

I will do this. At the moment I am at work, so you have to wait a bit more.

But sofar I can say that in my header file I put an table with the class atribute.
And then in the general css files I put the same class and define things like size, alignemt etc.
This way it becomes XTML 1.0 strict

[jeronimo]

So how did I do it.
I want a table with black bacground. The middel part of this table should be the same size as the middelpart of the index page.

In front of the table I put

<div class="headertable">Then I define cells with the same width as the sides of the index page


<td class="headertableside"></td>
Then in basic_stoff_1.php I define the classes

.headertable{
background-color: #000000;
}

.headertableside{
width:150px;
}
In the end don't forget to close all the classes (like <td> ends with </td> and <div> should end with </div>

Probably someting simmilar can be done with centering the image (in the table class you should put someting like align: center;.

After cristmass I have some more time to make an example (with an blank transparant gif image in front of the photo, to avoid stealing). I things work out, I will post it here.

Example of the header is on my site
www.landmarks.nl (http://www.landmarks.nl)

[wkitty42]

The one where in the <table> part align="center" is placed. If you do this directly in the php file, then this is not stricly XTML1.0.
interesting... i may have missed validating this page when i was working on other problems and solutions... but as i recall, all my pages turned up valid xhtml... i'll have to note things and go back and work on it again... these 12 hours days aren't any fun :(

[jeronimo]

interesting... i may have missed validating this page when i was working on other problems and solutions... but as i recall, all my pages turned up valid xhtml... i'll have to note things and go back and work on it again... these 12 hours days aren't any fun :(


I noticed this when validating my header file. After I did this with the classes, it was valit.

[wkitty42]

????? did this with the classes? i'm afraid i'm lost on what you are/were trying to say :(

[jeronimo]

Well what i am doing is exactly the same as in the post of segal3 on the 10th of october.

With classes I ment you make a div class where you say how things should be displayed

Like;
.ee_viewer {
margin-left: auto;
margin-right: auto;
}

[iam408]

Where do i remove the css style? on which table? can you list the directory?

as long as it has been, i'm sure you've already tried it, eh? ;)

however, for those that want to revert to the "old fashioned way", the simplest fix is to replace <table border="0" cellspacing="0" cellpadding="0" class="ee_viewer_table"><tr>with <table align="center" border="0" cellspacing="0" cellpadding="0"><tr> on or about line 78 of /templates/pages/ee_2_default/photo/default_XHTML_content.php

i tried numerous things and even spend several hours in the DOM inspector with no real luck... finally, i decided to just force the issue by telling the table where i wanted it and removing the css style from it... and there it was! just puurrrrrfect :D:cool::p:lol:

[rickp18]

any update on this? I got Firefox working, but in IE all photos still shifted to the left.

[jeronimo]

The newer version(s) of IE will show it in the middle, but the older not. I am not so expierienced with CSS coding, but maybe an browser depended CSS will help?

if <IE6 then <center> else margin etc....

[OneNoneBlond]

Eh, guys, I eventually upgraded to 2.02 version, and was looking for the solution of centering the photos. I didn't much like the idea of removing the style tag directly in default_XHTML_content.php, so I changed the style itself in default_XHTML_css.php, so if anyone is still interested in the subject, or just for my own archive, ;), I post it here:

.ee_viewer {
float: center;
position: relative;
margin: 0px;
padding: 0px 0px 10px 0px;
}

.ee_viewer_table {
margin: 0px auto;
padding: 0px;
border-collapse: collapse;
border-width: 0px;
position: relative;
float: center;
}

[segal3]

That code won't pass CSS validation - float:center is unsupported.

[OneNoneBlond]

Oh, well, can't have everything, ;)

[photocroatia]

You can use a table, works for me both in IE and FF