I used VWD 2008 Template "New Business Starter Kit" as a starting point. I modified several pages but tried to stay within that css. Uploaded to DASP and even haveemail working. I cheered loudly when it worked great (on IE). Pulling it up on another machine (to brag)with Mozilla... and (insert red face here) the screens are distorted. Several pages draw nicely but several others have slightly overlapping columns and one is just smudged out with color from the MasterPage. I found this article about having to stay within a 'strict' language (W3C standard). www.quirksmode.org/css/quirksmode.html Anyone? Can you give me a kick in some logical direction? I don't know what to do next. Is there a debugger to locate my mistakes? A dictionary of W3C commands that Mozilla loves? I'll send some of this Seattle snow to you if you can advise
Yikes, this is an issue as old as web browsers. Well,things wereeasier when Mosaic was the only browser, but few of us want to go back toTimes New Roman on a gray background. Browser makers have been building their own different interpretation of "standards" into their browsers since day one. It isn't just IE orNetscape, though they are the main culprits when it came tointroducing stuff that would only work in their browsers. Standards compliance has never been top of anyone's list. Having said that, there is one browser that strives to be standards compliant, and that's Opera. But here's the rub: If you design in Opera, your site will look almost perfect in Mozilla, but may or may notbe way off the map in IE, depending on what you're trying to do. Because both browsers interpret things differently. Still. The only way around this, and the only way to insure a similar browsing experience for the majority of users, is to simplify the CSS and use a few IE or Mozilla hacks, or, ideally,offer up multiple CSS options and trigger them based on browser detection. The problem with a template, as you are using,is they are not ever designed to be that flexible. And of course a Visual Web Developer template is going to be written tolook rightin IE. I think you're going to have to dig into the CSS to normalize things in Mozilla,but unfortunatelythat's a can of worms unto itself. You might start by reverting your changes to the CSS to see if thetemplate works in both browsers. It could be that your changes broke it in Mozilla...there are so many variables it's hard to say.
I do thank you for your quick response. I understand your suggestions to 1)simplify the CSS and 2)revert back to the original template to see if I started on a 'concrete' foundation. And I understand that Opera is the truest way to test to see if the standards have been met. But are you saying thatI need toseparately test using each of IE, Firefox/Mozilla, Chrome, Safari and Opera? Isn't theresome kind of tool to validate the code before loading up four extra browsers? Again I appreciate any input!
Going back to the books (Cheshire),he showstwo options to validate a URL. Expression Web 2 has a compatibility tool, the Compatibility Checker. Also W3C (http://validator.w3.org/)has a Markup Validation Service. Does anyone have experience with either of these? Thanks again in advance.
Before I say anything else, can you tell us what the applications DOCTYPE is? It should be at the top of your aspx page.
Thank you for asking. I will paste it below. One book said that I should change to 'strict' from 'transitional' (for the sake of more browser compatability). But what can of worms will THAT open? But as you can see I am using XHTML 1.0 Transitional. Also I added a separate css file for mozilla, based on some other advice. But now I need to modifyTHAT for Mozilla. <%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> ... <link id="Link1" runat="server" rel="stylesheet" type="text/css" href="App_Themes/Standard/css-content.css" ie:href="App_Themes/Standard/css-content.css" mozilla:href="App_Themes/Standard/MOZcss-content.css" /> <link href="App_Themes/css-print.css" rel="stylesheet" type="text/css" media="print" />
You know what carmck the more I think about this issue, the more I think you should just try to find an exact solution from the starter kit users/forums/etc. Meaning we could get into XHTML 1.0 transitional vs 1.1 and browser conversations, But your time would be better spent probably finding an existing post about fixing that starter kit.
