Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Atahualpa 3 Wordpress theme (http://forum.bytesforall.com/forumdisplay.php?f=2)
-   -   [SOLVED] page align not working IE, but working in other browsers + headers not rotat (http://forum.bytesforall.com/showthread.php?t=9533)

mafgirl Sep 10, 2010 03:33 AM

[SOLVED] page align not working IE, but working in other browsers + headers not rotat
 
3 Attachment(s)
Hello all,

I have my own website running on Atahualpa which is working brilliantly. I am now putting together a website for a client and also running it on Atahualpa, and ran into two hiccups:

No1: text/photos do not align the way I designed it, when displaying it on Internet Exporer, although other browsers like Safari, Mozilla and Google Chrome, it works fine. How do I fix this? Background: I have made a table ( http://patsypics.com/test-home-page/ ) in an attempt to get pictures and text aligned how i want them. my client wants the homepage to have pictures linked to a purchased plugin called 'Magic Zoom' that allows you to see a zoomed in image on rollover. It works by displaying a smaller picture and linking it to a larger resolution picture. I have all of this working and also a picture underneath which is text linking to another page. there a 3 of these and aligned in a table with a header and footer, making a header consisting of two pictures that are text, the body of one picture and picture link on the left-hand side in one column and two pictures with a picture link under each in the right hand side column and a footer underneath with text. this is all working perfectly in all browsers, BUT in IE it looks different every time I refresh with the pictures displayed smaller and smaller each time..
what could be the problem causing this? I have included a screen shot of how IE displays it and how Safari displays it

The other question is, i cannot rotate the header.. On my own website (mafgirl.com it is working perfectly and I have the settings set the same way on patsypics.com: there are 4 different header pictures in the correct folder on the website, and it does display the different headers when refreshing a page or navigating to a different page. the rotation with javascript is set to 5.
I have searched the forum and the only thing that i could find is that is it possible a plugin conflict. i have deactivated all plugins and that didnt make a difference.. there are only a few in there as i hardly use any at the moment. the new one, Magic Zoom, does not display in the plugins page as it is java script and css code that you FTP to the site and then integrate into the post/pages and is from http://www.magictoolbox.com/magiczoom but I doubt this is the problem as I have only installed it in the last few days and the header was already not rotating.


Really hope anyone can help me with this, I have already donated to Juggledad as he has previously helped me greatly with some issues. But let me know if you want me to donate more

Thanks ever so much! Marjolijn

lmilesw Sep 11, 2010 04:54 PM

Could you try a couple of things and let us know what happens?
  • Turn off animated menus
  • Turn off fading header if you have it on

mafgirl Sep 12, 2010 01:22 AM

Thank you ever so much for looking lmilesw :), I have turned off animated menus and did not have fading headers on (it says '0' next to it). Unfortunately there are no changes on Safari (headers not rotating) and in IE the headers are rotating BUT the photos are not aligned or some are not even visible..:confused:

lmilesw Sep 12, 2010 08:01 AM

I am still pondering the no rotate in Firefox as my first guess would have been plugin conflict or your zoom script but you said this was not rotating before the script was installed.

A couple of thoughts...

I am not sure if this relates to some of what you are seeing but I would set hover and zebra stripe to no in ATO>Style Tables.

I know the zoom script is a purchased item but it would seem like a modal popup for the images would be a lot friendlier. When hovering over the images I found the zoom image was sometimes out of the field of view and I had to scroll to see it. A plugin like WP-prettyPhoto will allow you to click on an image and see it at a larger size in the center of the current window. Who knows... this might even fix the no scrolling issue.

I will keep pondering and maybe someone else has an idea of what is going on.

mafgirl Sep 12, 2010 08:41 AM

Thanks again for looking lmilesw, I have set hover and zebra stripe to no, and that initially made the flower poster disappear ( again, ONLY in IE, rest of the browsers are still fine) but after a browser refresh it reappeared, the two pictures on the right are still either not there or very small.
Would it have to do with the (old fashioned) html table code I have used in an attempt to keep all pictures and links in the correct order?

With regards to where you see the zoomed image, this is all customizable and have not yet got it perfect as I wanted to sort out the rotating headers and being able to see the images in all browsers first, so I will perfect that at a later stage.

Thanks for all the tips so far and hopefully you, or someone else will find a solution. It is probably something really simple haha!:p

cheers again, Marjolijn

juggledad Sep 12, 2010 06:23 PM

Get rid of the spaces in the image names, that messes things up. Change the spaces to underscores so that 'Patsypics pink teddies 170 x 1000.jpg' becomes 'Patsypics_pink_teddies_170_x_1000.jpg'

lmilesw Sep 12, 2010 09:34 PM

You have to stop showing me up JD. :p But at least mafgirl can complete her site now.

mafgirl Sep 13, 2010 01:46 PM

Gentlemen, thank you both so much!
The headers are now rotating in all browsers, I knew it would be something simple such as spaces in the file names!! :)
But the pictures on the test homepage ( http://patsypics.com/test-home-page/ ) have no spaces in them for me to delete and the right hand side of the images are still not showing up in IE ('charlie' animal frames name at the top and 4 little bears below it), which are visible in any other browser..
any idea's on that one? :confused:
Thank you ever so much!!! If i donate to Atahualpa in general, will it go to you both? :)

lmilesw Sep 13, 2010 02:13 PM

Without spending a fair amount of time I would say the issue here is with how your table is configured. I seldom use tables for these kinds of reasons. I would layout this page with floated divs instead and I think the problems would go away. You could try fiddling with the various table setting as well.

IE plays differently with paddings, margins, etc.

mafgirl Sep 14, 2010 04:43 AM

Thanks Larry, I was worried you might say that :s Looks like I will have to look into that! The only reason I used HTML tables is because I started off learning HTML and know a lot more about it than CSS. I personally know nothing about floating div, but have found a couple of online tutorials, so I will dive into it and I'll let you know how I get on!

lmilesw Sep 14, 2010 08:40 AM

W3schools.com is always a good place to start. Here is the basic idea.

HTML Code:

<div style="float:left;text-align:center;">image<br />text under image</div>
<div style="float:left;text-align:center;">image to the right<br />text under image</div>
<br style="clear: both;" />
<div style="float:left;text-align:center;">image<br />text under image</div>
<div style="float:left;text-align:center;">image to the right<br />text under image</div>

This SHOULD give you two images with centered text under them over two images with text under them. The break with the clear is to stop the floating. I just threw this together and didn't test so please don't hold me to exactness but I wanted to give you an idea of what can be done. Instead of adding inline styles you can also add classes to the dIVs so you could apply CSS in ATO>Add HTML/CSS Inserts>CSS Inserts. It would look like
HTML Code:

<div class="alphabet">image<br />text under image</div>
You could give each div a different class if you want to style them uniquely.

I hope I haven't overloaded you with TMI

mafgirl Sep 21, 2010 09:54 AM

putting the html code in a html wrap
 
Thank you so much Larry and Juggledad!
After a few days of playing around, looking up tutorials on you tube and adjusting the text , i finally got it to work in ALL browsers, yay!
have a look and see what you think: http://patsypics.com/
now i can finally concentrate on getting the rest done and working :)

this is what i used:
HTML Code:

<html>
<head>the magic zoom script</head>
<style type="text/css">
.box {
width:500px;
height:500px;
margin:0px;
float:left;
}
.triangle {
width:500px;
height:500px;
margin:0px;
float:left;
}
div {
text-align:center;}

#header {
width:900px;
height:100px
margin:0px;
background-color:white;
}
#content {
width:1024px;
margin:0 auto;
}
#footer {
width:1024px
height:1000px
background-color:white;
}
.clear {
clear:both;
}
</style>

<body>
<div id="header"> content </div>

<div id="content">
<div id="boxes">
<div class="box">
content</div>

<div class="triangle">
content
</div>
<div class="clear"><br /></div>


<div id="footer">
content-all the text at the bottom
</div></body></html>

the reason i used .box and .triangle is because if i just just .box and used it for both content it would show below each other and now it shows next to each other :)

Thank you both so much for your help and I hope it might help others too

lmilesw Sep 21, 2010 11:38 AM

Glad you are finally working OK.


All times are GMT -6. The time now is 04:52 AM.

Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.