Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

[SOLVED] Cross Browser Problem (posted in wrong section before)


  #1  
Old Oct 18, 2010, 09:56 AM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Hi. I really have no reason to think this is Atahualpa related at all, but I will ask this and hope to get lucky. I built a site against IE8, not really knowing much at all about web standards markup compliance. It looks perfect in IE8..I have not tested it in other IE versions, but I have recently discovered that in Firefox, it is a pitiable mess. Here is a page link for any of you who don't mind having a peak in IE8 and Firefox so you can see the shocking difference. The home page is costructed differently, but it too appears butchered in FF.

Is there a relatively simple fix? I've tried X-Valid plugin, Total Validator online (which confuses me) and w3c validator. Am I on the right track?

I'm using Ata.3.4.6. and WP 3.0. Thanks!!
  #2  
Old Oct 18, 2010, 01:53 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
I am curious as to why you are asking about markup compliance. If you do all your configuring within the theme options you shouldn't have issues with that. How did you build your sidebars and header? Did you edit any theme files or did you just use widgets and the theme options?
__________________
~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 Oct 19, 2010, 05:40 AM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Well I did add something, but it seemed pretty straightforward.

To the style sheet, I added this:

Code:
img.centered, .aligncenter, div.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
to make text wrap around images.

I think that's it.

I just mentioned the markup compliance because I add some essentially third party code such as image maps that are done in an online tool. If it helps, here is image map code that creates the header, added at ATO>Theme Options>HTML/CSS Inserts>Body Top

Code:
<div id="tjicco_header" style="text-align:center; width:1088px;">
<img id="Image-Maps_3201009271708431" src="http://www.tjicco.org/wp/wp-content/uploads/2010/09/Header-Better.gif" usemap="#Image-Maps_3201009271708431" style="border: 0; padding: 0;" border="0" width="1088" height="148" alt="" />
<map id="_Image-Maps_3201009271708431" name="Image-Maps_3201009271708431">
<area shape="rect" coords="134,102,196,121" href="http://www.tjicco.org/wp" alt="" title=""    />
<area shape="rect" coords="225,102,304,121" href="http://www.tjicco.org/wp/about-us" alt="" title=""    />
<area shape="rect" coords="342,102,409,121" href="http://www.tjicco.org/wp/news" alt="" title=""    />
<area shape="rect" coords="446,102,534,121" href="http://www.tjicco.org/wp/donate" alt="" title=""    />
<area shape="rect" coords="570,102,668,121" href="http://www.tjicco.org/wp/volunteer" alt="" title=""    />
<area shape="rect" coords="712,102,822,121" href="http://www.tjicco.org/wp/photo-gallery" alt="" title=""    />
<area shape="rect" coords="866,102,938,121" href="http://www.tjicco.org/wp/contact" alt="" title=""    />
<area shape="rect" coords="964,100,988,122" href="http://www.facebook.com/home.php?#!/pages/Tianjin-International-Committee-for-Chinese-Orphans/422427406144?ref=ts" alt="Follow TJICCO on Facebook!" title="Follow TJICCO on Facebook!"    />
</map>
</div>
To answer your question about how it's put together, the home page is one single image map, but all the other pages are 4 elements: an image mapped header, a background image that provides the white block behind the body copy, and 2 sidebars, which are each an image map added via a text widget.

Thanks miles!

Last edited by eric41; Oct 19, 2010 at 05:48 AM.
  #4  
Old Oct 19, 2010, 08:00 AM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
When you say you added that code to the style sheet what are you referring to? All CSS should be added to ATO>Add HTML/CSS Inserts>CSS Inserts and NOT styles.css or css.php.
__________________
~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 Oct 19, 2010, 11:48 AM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Yes, I added it to style.css. But could that cause issues in some browsers like the ones I linked in the op?

miles, I've done some quick trial and error, and the whole problem seems to be with horizontal spacing. In IE8, the header is to the left of the body; in FF, it's the same distance too far to the right. Does that help? I need something that will place it the same in both browsers. I haven't tested the site in any other browser, but for now, I think I'd be satisfied to get it ok in IE and FF.

Last edited by eric41; Oct 19, 2010 at 12:05 PM.
  #6  
Old Oct 19, 2010, 04:05 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Atahualpa was built with the idea of using ATO>Add HTML/CSS Inserts>CSS Inserts. You should not use style.css for your CSS. I would strip out all the CSS you put in style.css and put it in CSS Inserts.
__________________
~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.
  #7  
Old Oct 19, 2010, 04:24 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
Ok, did that, but I am still seeing the same problems with how the site displays in Firefox. What else could I try?

Thanks so much for your help on this, miles!
  #8  
Old Oct 19, 2010, 08:02 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
Did you make changes to any other theme files?
__________________
~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.
  #9  
Old Oct 20, 2010, 04:15 AM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
I removed links from the footer, but I don't want to say publicly how I did it.

Otherwise, all other additions were done via ATO>HTML/CSS Inserts.
  #10  
Old Oct 25, 2010, 12:17 PM
eric41's Avatar
eric41
 
51 posts · Aug 2010
Nieder Sachsen, Germany
I've been trying to get back to report that this situation is now solved. If you look at my original post at the 2nd block of code, you will see that I was missing a set of quotation marks after the text-align attribute. Apparently this omission didn't matter to IE8 but offended Firefox. Once I added this, the whole thing was fixed. As it so often is, it turned out to be the simplest yet most elusive of solutions. I will post the corrected code below with the quotation marks in red in case this may work in a similar problem for someone out there.

Code:
<div id="tjicco_header" style="text-align:center;" width:1088px;">
<img id="Image-Maps_3201009271708431" src="http://www.tjicco.org/wp/wp-content/uploads/2010/09/Header-Better.gif" usemap="#Image-Maps_3201009271708431" style="border: 0; padding: 0;" border="0" width="1088" height="148" alt="" />
<map id="_Image-Maps_3201009271708431" name="Image-Maps_3201009271708431">
<area shape="rect" coords="134,102,196,121" href="http://www.tjicco.org/wp" alt="" title=""    />
<area shape="rect" coords="225,102,304,121" href="http://www.tjicco.org/wp/about-us" alt="" title=""    />
<area shape="rect" coords="342,102,409,121" href="http://www.tjicco.org/wp/news" alt="" title=""    />
<area shape="rect" coords="446,102,534,121" href="http://www.tjicco.org/wp/donate" alt="" title=""    />
<area shape="rect" coords="570,102,668,121" href="http://www.tjicco.org/wp/volunteer" alt="" title=""    />
<area shape="rect" coords="712,102,822,121" href="http://www.tjicco.org/wp/photo-gallery" alt="" title=""    />
<area shape="rect" coords="866,102,938,121" href="http://www.tjicco.org/wp/contact" alt="" title=""    />
<area shape="rect" coords="964,100,988,122" href="http://www.facebook.com/home.php?#!/pages/Tianjin-International-Committee-for-Chinese-Orphans/422427406144?ref=ts" alt="Follow TJICCO on Facebook!" title="Follow TJICCO on Facebook!"    />
</map>
</div>
Miles, thank you SO MUCH for your suggestions!! I know I will find them useful in other pursuits.
Oh, how do I mark this as solved?

Last edited by eric41; Oct 25, 2010 at 12:20 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Cross Browser Rendering Problems Stevieb Atahualpa 3 Wordpress theme 5 May 27, 2010 08:23 AM
Cross browser Vertical Menu Fix yakker Page & Category Menu Bars 0 Apr 23, 2010 09:16 AM
Cross Browser Issues. Juslyn Atahualpa 3 Wordpress theme 1 Aug 6, 2009 12:17 PM


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


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