IE issue with Portraitpress theme

Topics: Themes
Mar 8, 2009 at 2:56 PM
My site works great with Firefox but has a header issue with IE, anyone know how to fix this?


Southern Arizona Hiking Club



Thank you.
Coordinator
Mar 9, 2009 at 4:00 AM
Your HTML is invalid:

<li<a href="http://www.sahcinfo.org/SAHC_Gallery_09/index.html">Gallery </a></li>

Should be:

<li><a href="http://www.sahcinfo.org/SAHC_Gallery_09/index.html">Gallery</a></li>
Mar 9, 2009 at 4:21 AM
Edited Mar 9, 2009 at 4:24 AM
Thanks but the problem I am referring to is seen with IE, it drops the Title way down, a css issue.


Coordinator
Mar 9, 2009 at 5:20 AM
First, fix the invalid HTML, then we'll see if that problem remains.  In IE7, because of that invalid HTML, the "Gallery" link has dropped down, which may also be causing the Title/Header to drop down too.
Mar 9, 2009 at 12:53 PM
Edited Mar 9, 2009 at 1:19 PM
I fixed the HTML but the problem still remains.

Why is the rest of the menu like this?
      <li <%=MenuClass("default.aspx")%>><a href="<%=Utils.AbsoluteWebRoot %>" rel="home"><%=Resources.labels.home %></a></li>

Coordinator
Mar 9, 2009 at 5:16 PM
The MenuClass() is defined in site.master.cs.  It adds a CSS class of "menu-hover" to the <li> if the page the person is on is that menu link's page.  For example, if you go to the Contact page, you'll see the Contact <li> at the top has a white background to indicate you're on that page.  Same with the Archive page, etc.  In the case of your gallery link, you probably don't need that (although it doesn't hurt to have) since your gallery page is using a totally different page layout.

What's the problem exactly?  Which "title" is dropping down?

In IE7, the top header now looks the same as it does in Firefox (from what I can tell).

In IE6, the background image keeps is actually repeating about 8 times going down the page, going over the top of your first blog entry.  That could probably be fixed by modifying your #rss-big CSS class.

Try changing the 'background' style to:

#rss-big{
  position:absolute;
  background:url(images/sahclogo2.gif) no-repeat;
  width:222px;
  height:53px;
  top:129px;
  left:50px}
Mar 9, 2009 at 5:38 PM
In IE8 The title and subtitle are lower down then in Firefox.
Coordinator
Mar 9, 2009 at 5:53 PM
Oh yeah, I see that in IE8.  This problem only shows up in IE8 -- not Firefox, IE6, IE7, Safari, Chrome, etc.  Since IE8 isn't finalized yet, I wouldn't worry too much about this.  The latest version of IE8, Release Candidate 1 (RC1) introduced new layout bugs that weren't even in Beta 2.

The IE team is asking for reports from people where a webpage displays differently in IE8 versus other browsers like Firefox.  You can even use the Report a Webpage Problem IE8 Beta Add-On tool to report this.

If the title of your blog still displays incorrectly in the final version (RTM) of IE8, we can look into it further then.  Until it is fixed, you could even add the "EmulateIE7" meta tag to your site.master file.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

This would make it so IE8 visitors would automatically see your blog in compatibility view without needing to click the Compatibility View button.
Mar 9, 2009 at 8:40 PM
Edited Mar 9, 2009 at 9:16 PM
Thanks so much for your help.

I find that IE8 in compatibility mode makes things worse, moves the image down.

I won't worry about it, as long as it works in IE7.
Coordinator
Mar 28, 2009 at 4:45 AM
I noticed in the final release of IE8, the header in your blog still drops down.  It turns out this is because of an unclosed HTML tag in the Portrait Press theme.  If you close the tag, the header will display correctly in IE8.

In the Portrait Press's site.master file, there's this HTML:

<div id="rss-big">
    <a href="http://www.sahcinfo.org/syndication.axd" class="feed"></a>
</div>

You would want to add the closing </a> tag that is bolded above.
Mar 28, 2009 at 6:42 PM
Thank you very much, that also took care of the issues with Opera also.