Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

[SOLVED] page align not working IE, but working in other browsers + headers not rotat


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Sep 10, 2010, 03:33 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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
Attached Thumbnails
Click image for larger version

Name:	PrtScIE.jpg
Views:	496
Size:	146.5 KB
ID:	738  Click image for larger version

Name:	PrtScSafari.jpg
Views:	439
Size:	168.6 KB
ID:	739  Click image for larger version

Name:	PrtScSafariWithMagicZoom.jpg
Views:	420
Size:	182.1 KB
ID:	740  
  #2  
Old Sep 11, 2010, 04:54 PM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Sep 12, 2010, 01:22 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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..
  #4  
Old Sep 12, 2010, 08:01 AM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Sep 12, 2010, 08:41 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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!

cheers again, Marjolijn
  #6  
Old Sep 12, 2010, 06:23 PM
juggledad's Avatar
juggledad
 
21,982 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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'
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #7  
Old Sep 12, 2010, 09:34 PM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
You have to stop showing me up JD. But at least mafgirl can complete her site now.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Last edited by lmilesw; Sep 12, 2010 at 09:45 PM.
  #8  
Old Sep 13, 2010, 01:46 PM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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?
Thank you ever so much!!! If i donate to Atahualpa in general, will it go to you both?
  #9  
Old Sep 13, 2010, 02:13 PM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Sep 14, 2010, 04:43 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
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!
  #11  
Old Sep 14, 2010, 08:40 AM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
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
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Sep 21, 2010, 09:54 AM
mafgirl's Avatar
mafgirl
 
79 posts · May 2010
Brighton, United Kingdom
Smile 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
  #13  
Old Sep 21, 2010, 11:38 AM
lmilesw's Avatar
lmilesw
 
10,054 posts · Jul 2009
Central New York State USA
Glad you are finally working OK.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Cache and rotating images headers! Ponics Header configuration & styling 8 Dec 31, 2010 02:30 AM
[SOLVED] How do I align Page headers &amp; body with Header? JulieBMack Page & Category Menu Bars 3 Jul 12, 2010 09:54 PM
[SOLVED] Ordering the rotating headers reklaw Header configuration & styling 13 Jun 14, 2010 10:51 AM
Following widget not working properly, followers working marced Sidebars & Widgets 0 Apr 4, 2010 05:01 AM
Images/text don't align the same in different browsers saulta Atahualpa 3 Wordpress theme 1 Feb 21, 2010 07:36 PM


All times are GMT -6. The time now is 11:22 PM.


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