WordPress.org

1. RenFromPenn
   Member
   Posted 3 years ago #

   Hi,

   I designed a new theme for my site and when doing so I was primarily working in Firefox. Even so, I loaded IE and checked things out. All appeared to be fine. Yesterday I added in the Adsense and didn't give it a second thought. Well, late last night I turned on IE and visited my site only to find that the Adsense ads have blacks boxes displaying on them. I have pinpointed that this is being caused by having filter: alpha(opacity=100); in my theme. I can't remove it however, because the right sidebar doesn't display correctly without it. Any ideas on how I can get those Adsense ads to display properly? My URL is http://freebie.otheday.com

   Thanks,

   Heather

2. jberghem
   Member
   Posted 3 years ago #

   It may help if you validate your pages. Both the XHTML and CSS have errors in them:

   Since you're using Firefox, get the Web Developer toolbar. It's a great tool with buttons that will validate your code without having to go to validator.w3.org and type in your blog address.

   Unfortunately I can't give you an honest opinion about IE without resorting to words that are improper to use in conversation with a lady. I've found that using a separate stylesheet for IE has been the easiest solution. I've explained how to do that in these posts

   http://wordpress.org/support/topic/205159?

   http://wordpress.org/support/topic/206478?

   Unfortunately we can't ignore IE users that are ignorant about the availability of other superior browsers because there are just too many of them.

   Really like the design of your site.

   John

3. RenFromPenn
   Member
   Posted 3 years ago #

   Hi John,

   Thanks for the compliment on my site design :-) It's always nice to get some positive feedback.

   Yeah, I completely agree about IE. I wish more people would make the switch to Firefox already.

   It's pretty late now, but I'll take your suggestion and see about validating my site. I'll also be sure to check out the links that you provided.

   After I do that, I'll post an update on any progress.

   Heather

4. RenFromPenn
   Member
   Posted 3 years ago #

   So, I set things up on a test domain so that the visitors wouldn't notice me paying around with the site. I validated the CSS and that really only made the footer problem worse. Now, instead of covering 1 or 2 posts, it covers all but one of them.

   Also, the validator removed the reference to filter: alpha(opacity=100); That, of course, solved the Adsense problem,, but now the background color of the sidebar doesn't run to the bottom of the page. I have tried adding a background image to the right sidebar like I did on the left one, but it doesn't repeat to the bottom of the page like the left sidebar does. I don't get why it works on one side of the theme, but not on the other.

5. RenFromPenn
   Member
   Posted 3 years ago #

   I managed to fix the problem with Adsense by overriding the filter: alpha(opacity=100); on only that section of the page.

   Doing this, however, only made the footer problem worse.

6. jberghem
   Member
   Posted 3 years ago #

   Sound like you're using an automated tool in an editor to change your code to valid code. As you have realized it only creates other problems.

   Validate your XHTML code first at http://validator.w3.org
   In the list of errors they give you tips on what the problem may be. Always check that all tags are closed as they should be. (it's sometimes easier to copy the generated code from your "view source" option in your browser and pasting it in an editor like dreamweaver.)

   Once your XHTML is error free go on to the CSS and validate it here: http://jigsaw.w3.org/css-validator/

   Some themes have browser specific CSS or CSS3 that won't be recognized. That's okay as long as you're 100% sure you got the syntax right.

   If you go about it this way it'll be easiest for you because XHTML errors can have great impact on the rendering of the CSS. Trying to style around an XHTML error with CSS isn't going to work.

7. RenFromPenn
   Member
   Posted 3 years ago #

   I did go to the two sites that you mention to validate this. The html wasn't so awful. It seemed mostly like alerts that I wasn't complying with valid xhtml, which I don't consider to be a big problem. Things like using
   instead of

   Yes, the CSS validator that I visited, which is also the one that you suggested, did offer a cleaned up version of my stylesheet for me to us.

   Anyway, the out of it is that with a little bit more playing around with this I have finally managed to solve both problems.

8. jberghem
   Member
   Posted 3 years ago #

   Well your code didn't show because you didn't use the backticks. If it's the <br /> tags you're referring to, which you might not see as a problem, your browser does see it as a problem. When a tag is opened but not closed like XHTML requires, the browser assumes that what follows is still within that element.

   If you don't want to comply with the standard that's fine, Just don't use a DOCTYPE. The whole point of having a DOCTYPE is to let the browser know which rules you coded by. Telling the browser "I'm gonna play by these rules" but then disregard them doesn't make sense. If you remove the DOCTYPE the browser doesn't expect you to keep any standards at all and just renders the code as it comes.

   I do hope you have loads of free time, because to get your site looking the same across the different browsers without valid code is quite the challenge. I'm not hung up on rules but if you keep them it makes it a lot easier on yourself. And easier for others to help you. If you know your XHTML code is valid you don't have to worry about it anymore. All you'll have to look at is your CSS.

Topic Closed

This topic has been closed to new replies.