|
#1
Oct 18, 2010, 10:56 AM
|
|
|
|
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
Oct 18, 2010, 02:53 PM
|
|
|
|
10,176 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
Oct 19, 2010, 06:40 AM
|
|
|
|
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 06:48 AM.
|
#4
Oct 19, 2010, 09:00 AM
|
|
|
|
10,176 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
Oct 19, 2010, 12:48 PM
|
|
|
|
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 01:05 PM.
|
#6
Oct 19, 2010, 05:05 PM
|
|
|
|
10,176 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
Oct 19, 2010, 05:24 PM
|
|
|
|
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
Oct 19, 2010, 09:02 PM
|
|
|
|
10,176 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
Oct 20, 2010, 05:15 AM
|
|
|
|
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
Oct 25, 2010, 01:17 PM
|
|
|
|
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 01:20 PM.
|
|