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] Cross Browser Problem (posted in wrong section before) (http://forum.bytesforall.com/showthread.php?t=10449)

eric41 Oct 18, 2010 09:56 AM

[SOLVED] Cross Browser Problem (posted in wrong section before)
 
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!!

lmilesw Oct 18, 2010 01:53 PM

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?

eric41 Oct 19, 2010 05:40 AM

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!

lmilesw Oct 19, 2010 08:00 AM

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.

eric41 Oct 19, 2010 11:48 AM

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.

lmilesw Oct 19, 2010 04:05 PM

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.

eric41 Oct 19, 2010 04:24 PM

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!

lmilesw Oct 19, 2010 08:02 PM

Did you make changes to any other theme files?

eric41 Oct 20, 2010 04:15 AM

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.

eric41 Oct 25, 2010 12:17 PM

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?


All times are GMT -6. The time now is 03:27 AM.

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