CSS Design & Firefox/IE

[draconius]

I have been working on re-designing my website for a little while now mostly as an educational experience with CSS and php/mysql...and I have gotten it to a point where I Really like it, and I am looking now into css/html validation and I am bashing my head against a wall...

The page looks just the way I want it to in Firefox, but when viewed in IE, the fonts are all much larger than they should be, and no matter how many ways I try to define my fonts through the use of CSS styling, I cannot make them look the way I want.

If anyone wants to look at my site, its at http://www.pyrospheric.net , and the css file that I am using is at http://www.pyrospheric.net/css/pyrospheric.css

I would just love it if someone could maybe point me in some direction of where to look at working on cross-browser compliance, or has run into similar issues when designing a page to look 'clean' (what I am going for)...I am pretty fresh to this css bit still, so don't think I am above any suggestions, I listen to them all!

Thanks,

Drac

 

[DeenlyFan1337]

The easiest way to have it perfectly cross-browser acceptable is to have a javascript or php code that finds the browser the viewer is using and using a separate style sheet for each. On the other hand, this could be quite tedious. If you don't want to do this, just try to make it as similar as you can, and just remember, you can't make everyone happy.

 

[KingKaeru]

<div id="content">
  <div class="article">
    <table cellspacing="2" cellpadding="5" border="0"> 
      <tr>
        <td>
          <p></p>
        </td>
        <td>
          <p><span class="style1"><img width="320" height="240" border="0" align="top" src="/images/keys.jpg" /></span></p>
        </td>
     </tr>
   </table>
  </div>
</div>

What might be more efficient is if you took out the table and did:

 <img style="float:right;"> 
 <p class="article"> Welcome to pyrospheric.net! . . . </p>

With your existing layout, you are relying on the styles to be inherited from the parent "article" div and firefox/ie handle inheritance differently, especially among child nodes existing within divs.

Also, I noticed there is a reference to an undefined class "style1" from the span the surrounds the "key" picture. That span is unnecessary and should be removed?

--KK