image not centered (but is in IE)
|
chenks
Joined: 2006-01-06
Posts: 22 |
Posted: Sat, 2007-10-13 18:22
|
|
i've got my site and gallery integrated very nicely, however i have fine final thing i need to get sorted. for some reason, when i view a gallery image it is NOT centered when view with safari or firefox, but IS centered when viewed in IE. i assume it is because IE is doing something different than what safari and firefox is doing. is there anything i can do to make it centered in all browsers ? example i am using WPG 3.0.1 / WP2.3 / Gallery2 / WPEmbedded theme |
|
Posts: 22
i guess no-one knows ?
Posts: 492
I'm not great at the differences between the browsers. I figured out just enough a year-and-a-half ago to get my theme to look the same in IE and FF, and then haven't done much with it.
But, while I was doing that troubleshooting, one of my favorite sites for figuring out browser differences was http://www.positioniseverything.net/
I don't know if it has much on Safari, but it does have a lot on IE vs FF.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 48
Yeah, I'd like to get a better understanding of this too. Can't get the centering to work in FF or Safari, though my G2 settings are centered by default. Curiously, the title text of inserted images is centered.
I would assume we have to insert the WPG2 tags into our theme CSS to get the centering? But if that were the case, how come my image titles are centered all by themselves, without my editing my theme CSS?
Posts: 62
I took a peek as well and found no glaring and easy fix. I will say however that FF, Safari, and Opera are displaying it correctly. As usual it is IE that is doing it wrong. Unfortunately this really doesn't help...
---------------------------------------------------
Wordpress / Gallery2 (WPG2) Developer
My Site: http://www.marcnjami.com/
Posts: 48
That's curious, ClimbingMonkey, that FF, Safari, and Opera are displaying correctly for you, but not IE. It's the other way around for us.
But then lately for me, in all those browsers, the images inserted with G2Image are left justified, regardless of the default setting being centered. Odd. It's almost as if G2 itself has some say over how the images are served?
Posts: 22
no.. what climbingmonkey meant was that, as per the code, FF and safari as displaying it correctly... ie the code is telling it to left justify the image.
whereas IE is simply assuming it is supposed to be center justified and displaying it like that.
so, IE is wrong in this case.
what i want to know is, what part of the code do i need to edit so that FF and safari display the image center justified ?
Posts: 48
I'm with you, Chenks. I'd like to figure that out too, but left justified works for me in the interim.
Posts: 492
Chenks,
Try adding this to style.css in your theme:
table.ImageFrame_shadow { direction: ltr; margin: 0pt auto; }It's the "auto" that's important. It centers the element using 0 point margins.
There's probably a more elegant way to do this in the ImageFrame module files, but I couldn't find my way around them very quickly.
I got the info on this from http://www.positioniseverything.net/bg-centering.html (actually by using Firebug to look at the CSS behind that page).
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 22
have added that and it's now sorted.
Posts: 48
Awesome, thanks Cap'n! In my case, I had to modify your CSS a bit:
table.ImageFrame_slidesquare { direction: ltr; margin: 0pt auto; } .giDescription { text-align: center; }I have the image caption turned on, so I centered that as well. Cap'n, you must have the shadow type frame borders turned on. I'm using the slides. As you can see, this unfortunate since at any time later if you change your G2 image frames, you'll have to update your CSS. A workaround might be to duplicate the CSS for all the available frames.
Oh well. Here it is, working on my site.. Hurray!
Posts: 22
i have come across another problem now..
if you look at this link - http://www.simon-gray.co.uk/?page_id=17&g2_itemId=822
in IE and Firefox, there is a gap between the content and the footer.
is anyone else seeing this?
Posts: 22
anyone ?
Posts: 492
Please try using Firebug to troubleshoot CSS problems. It took me about 15 seconds using Firebug to figure out that you need to change the margin to 0pt in the #page entry of your theme's style.css. (It will take you a little longer at first, because you'll have to get used to Firebug's interface. But once you learn the interface, it's an awesome tool.)
If you've used Firebug and just can't figure it out, please post here what you've tried, and we'll be happy to help with any other issues.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 22
do you mean the gallery theme or the WP theme ?
as a mac user, i do everything using safari and don't have firefox installed. it was someone else that told me the issue was in firefox, and with IE i tested it on my work PC.
what confused me though is, why is it OK in safari, but not in firefox and IE ?
Posts: 22
's ok... sorted now
Posts: 492
WP theme. Looks like you got it sorted out. Just documenting in case anyone else looks at this.
I only use Firefox for my personal browsing, but I have IE, Safari, and Opera installed on my dev box to see how G2Image and WPG2 look in all four browsers. At least on Windows, there is no penalty for having multiple browsers installed. I don't have a Mac to test on, but Firefox does show an OS X version available. I don't know if Safari has anything akin to Firebug, but I think it would be worth installing Firefox with Firebug for its CSS/Javascript/DOM troubleshooting capabilities alone, even if you never use it for regular browsing, if Safari doesn't have a similar too.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 22
have just noticed that, although it has fixed the problem, it has cause a new problem.
the gap at the top of the pages is now not there.
it was there before i made that change.
Posts: 492
The margins in CSS go clockwise starting at the top. So, it's top, right, bottom, left. So, try making the margin read
That will keep all of the margins at 20 except the bottom one.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 22
that didn't fix it, it actually made it worse.... that pushed the whole content to the left and didn't affect the top at all.
Posts: 492
Yeah. I see what you mean. I sent that try without testing it first, because I wasn't at my dev box. It does the same thing when I try it on mine.
I'll play with it some more when I get time later.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 492
OK, I used the View Source Chart plugin for Firefox and noticed that the </div> to end the #page div is before the footer, when it should be after the footer. That 20px margin was for both the top and the bottom of the screen. You need to look at your theme files, and move that </div> to after the footer instead of before it and then change the margins back to 20px.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website
Posts: 22
hmmm... this sounds like a little beyond me.
Posts: 22
i've reverted the changes back to original again (ie the gap at the bottom of the page), as i thought it might be easier to work from that.
Posts: 22
i've got all the problems resolved now.
reverted back the CSS file before the intial change above, and then used a custom wp header and footer.
Posts: 492
Great! Glad it's working.
Kirk
____________________________________
G2Image Documentation, G2Image Demo Page, My Family Website