XHTML/CSS Renders differently in ASPX to HTML Firefox/Chrome

I have a very weird problem - could easily be something very simply but I have spent hours and hours trying to get to the bottom of this.

I think its more relevant to the XHTML side of things than the aspx hence why I’ve posted here.

I have a piece of HTML which appears to render differently depending on whether its loaded from a file with a .html extension or a .aspx extension. It only happens under Firefox or Chrome - unusually it works as I would expect in IE.

This is very difficult to explain, I have created a tab like effect for an aspx site. The first image shows how this should look.

The code shows the 3 attempts I made to solve this problem, the first attempt worked in Firefox & Chrome, but not IE. The default vertical alignment for IE was not useful.

So I set the vertical align to the bottom which made it work for IE but not for Firefox and Chrome. The second image shows it looking wrong - vertical-align:bottom is 1px lower for the middle span than for everything else. The page is created in aspx, BUT when I save the generated HTML and load it as a static xhtml page - its works perfectly! And yet there is absolutely not difference between then.

So for some reason when loading this page from an aspx extension, even though the HTML is identical, it lowers the vertical-align:bottom by 1px.

I could not find a reason for this… and in the end solved the problem using an IE hack.

However there must be a proper way to do this?

Any ideas appreciated.

ps - the page is validating as XHTML transitional.


<!-- Code works in Firefox & Chrome but not IE -->

<span class="outertab"><img alt="" class="tableft" src="systemimages/tableft.gif" /><span class="tab" onclick="var TempTab=document.getElementById('tab');TempTab.value='IT'; TempTab.click()">IT Information </span><img alt="" class="tabright" src="systemimages/tabright.gif" /></span><span style="font-size:0.1px;"> </span>

<style type="text/css>">
  span.outertab {
      margin-left:2px;
      white-space:nowrap;
      border:none;
      border-bottom:1px solid black;
      position:relative;
  }
  span.tab {
      text-align:center;
      white-space:nowrap;
      border:none;
      border-top:1px solid black;
      background:#FFF0D3;
      font-size:75%;
      color:black;
      cursor:pointer;
  }
  img.tableft, img.tabright, img.tableft1, img.tabright1 {
      cursor:pointer;
      border:none;
  }
</style>


<!-- Code works in IE but not Firefox or Chrome -->

<span class="outertab"><img alt="" class="tableft" src="systemimages/tableft.gif" /><span class="tab" onclick="var TempTab=document.getElementById('tab');TempTab.value='IT'; TempTab.click()">IT Information </span><img alt="" class="tabright" src="systemimages/tabright.gif" /></span><span style="font-size:0.1px;"> </span>

<style type="text/css>">
  span.outertab {
      margin-left:2px;
      white-space:nowrap;
      border:none;
      border-bottom:1px solid black;
      position:relative;
      vertical-align:bottom;
  }
  span.tab {
      text-align:center;
      white-space:nowrap;
      border:none;
      border-top:1px solid black;
      background:#FFF0D3;
      font-size:75%;
      color:black;
      cursor:pointer;
      vertical-align:bottom;
  }
  img.tableft, img.tabright, img.tableft1, img.tabright1 {
      cursor:pointer;
      border:none;
      vertical-align:bottom;
  }
</style>


<!-- Code works in IE, Firefox & Chrome -->

<span class="outertab"><img alt="" class="tableft" src="systemimages/tableft.gif" /><span class="tab" onclick="var TempTab=document.getElementById('tab');TempTab.value='IT'; TempTab.click()">IT Information </span><img alt="" class="tabright" src="systemimages/tabright.gif" /></span><span style="font-size:0.1px;"> </span>

<style type="text/css>">
  span.outertab {
      margin-left:2px;
      white-space:nowrap;
      border:none;
      border-bottom:1px solid black;
      position:relative;
      vertical-align:bottom;
  }
  span.tab {
      text-align:center;
      white-space:nowrap;
      border:none;
      border-top:1px solid black;
      background:#FFF0D3;
      font-size:75%;
      color:black;
      cursor:pointer;
      vertical-align:bottom;
      position:relative;
      bottom:1px;
  }
  img.tableft, img.tabright, img.tableft1, img.tabright1 {
      cursor:pointer;
      border:none;
      vertical-align:bottom;
  }
</style>

<!--[if IE]>
  <style type="text/css"> 
    span.tab { bottom:0;; } 
  </style> 
<![endif]-->    

If it works when you save it as a HTML file, but not when you server the aspx file, I suspect the Content-Type header of the aspx file is incorrect.
You can use Live HTTP Headers (FF add-on) to see what headers the server sends to the browser.
The solution would be to let the aspx send the same Content-Type header as the HTML.

That is very strange. I’ve worked in .NET for several years and have started working with .NET applications the last year or so, and I’ve never run into a case where the XHTML rendered differently depending on the extension.

You already checked the number one thing I recommend when people have cross-browser issues, validate the XHTML. I’ve been able to clear up to 90% of cross-browser issues just by making sure the XHTML validates. This is a longer shot, but have you validated the CSS? http://jigsaw.w3.org/css-validator/

Beyond that, I’m not sure. The browser shouldn’t be rendering the XHTML differently as far as I know. A problem with the headers does sound possible since that is something that the server most likely is delivering slightly differently, the challenge is still to figure out what in the header is having such a subtle effect on the rendering.

Thanks for all the help guys - I found the bugger… it was a YUI included stylesheet… which while still being in the static html the path was incorrect so wasn’t being loaded. Silly really but that the way it goes sometimes.