lucas22 Posted April 24, 2009 Share Posted April 24, 2009 I have a couple experimental websites here that I need a little bit of help with. Here is a link to the first one Visit My WebsiteThe problem with that one is when I'm in internet explorer the rollover words don't show up. They are pseudo class rollovers. I'm just wondering what i'd have to do to make them visible when you're not rolled over them in IE. In firefox and other browsers they show up fine. Here's a link to the second website art websiteIn this website I have a problem with the spry menu bar which looks all crazy in IE, For example the drop down menus are at the top left. I have no idea why this is. I would like to know how these problems can be fixed. Thanks very much in advance for the help. Link to comment Share on other sites More sharing options...
chibineku Posted April 24, 2009 Share Posted April 24, 2009 Your online portfolio is a nice site...elegant, with some nice sketches.I am not seeing the problem, though, or at least, not the one you mean. In FF and IE, the rollover simply creates a box around the logo, and on image thumbnails shows the usual alt text. The problem I'm seeing is that the logos are different in IE than FF. In FF, the background colour is dark charcoal, while in IE it's light grey. Is that deliberate, I mean have you got a script detecting the browser type or something? Seems a little odd. Link to comment Share on other sites More sharing options...
Ingolme Posted April 24, 2009 Share Posted April 24, 2009 It possibly is working wrong because it's running in quirks mode.Try using a Strict DTD: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Link to comment Share on other sites More sharing options...
lucas22 Posted April 25, 2009 Author Share Posted April 25, 2009 Your online portfolio is a nice site...elegant, with some nice sketches.I am not seeing the problem, though, or at least, not the one you mean. In FF and IE, the rollover simply creates a box around the logo, and on image thumbnails shows the usual alt text. The problem I'm seeing is that the logos are different in IE than FF. In FF, the background colour is dark charcoal, while in IE it's light grey. Is that deliberate, I mean have you got a script detecting the browser type or something? Seems a little odd.Yeah, I also am aware of the different colors of the logo rollover in FF and IE. Its normal in FF but not normal in IE. I'm not sure why that does that and wasn't deliberate. It is odd and wierd. I don't know enough to go into the code and fix things like that. You don't see a prob in IE? On the Jeremy Gordon Profile in IE the rollover text buttons at the top of the home page dont even show unless you roll over them then they show. But you don't know that they are there unless you accidentally roll over them with the mouse. And the other one the spry menu is all wacko in IE which shoves the submenus over towards the left top of the page which is confusing and weird.Well i'm going to build another website and use a strict DTD like Ingolme said above. Thanks anyways Link to comment Share on other sites More sharing options...
lucas22 Posted April 25, 2009 Author Share Posted April 25, 2009 It possibly is working wrong because it's running in quirks mode.Try using a Strict DTD:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> That could very well be, I'll check my DTD next time i start a new website. What is quirks mode by the way? Not familiar with that term. Thanks a bunch. Link to comment Share on other sites More sharing options...
jeffman Posted April 25, 2009 Share Posted April 25, 2009 Using no doctype, or a traditional doctype, or writing certain kinds of errors, will put a browser into quirks mode.When a browser slips into quirks mode (especially IE) it will render HTML the old fashioned way and not object when the code is not up to spec. In Mozilla and Webkit, this mostly means little differences in the way spaces and line breaks are handled. Annoying differences, but usually not the kind that destroy a page. The biggest difference is that IE traditionally renders "boxes" exactly the opposite from everyone else. A box is any rectangular page element, so basically everything. If you define a box as being 100px by 100px, it will render the same in all browsers. But if you add 10px of padding to each side, 10px of margin, and a 1px border, the difference is now huge. IE (in quirks mode) renders the total box as 100px by 100px, since it subtracts the padding, margin, and border from the base dimensions. The W3C standard says they must be added, resulting in 100px + (2 * 10) + (2 * 10) + (2 * 1), or 142px by 142px. A 42px difference! With just a few boxes, your page renders wildly different in IE than it does elsewhere. So going into quirks mode is BAD. You always want to use a strict doctype, and also write standards-compliant code, to keep IE from doing that. Link to comment Share on other sites More sharing options...
lucas22 Posted April 25, 2009 Author Share Posted April 25, 2009 Using no doctype, or a traditional doctype, or writing certain kinds of errors, will put a browser into quirks mode.When a browser slips into quirks mode (especially IE) it will render HTML the old fashioned way and not object when the code is not up to spec. In Mozilla and Webkit, this mostly means little differences in the way spaces and line breaks are handled. Annoying differences, but usually not the kind that destroy a page. The biggest difference is that IE traditionally renders "boxes" exactly the opposite from everyone else. A box is any rectangular page element, so basically everything. If you define a box as being 100px by 100px, it will render the same in all browsers. But if you add 10px of padding to each side, 10px of margin, and a 1px border, the difference is now huge. IE (in quirks mode) renders the total box as 100px by 100px, since it subtracts the padding, margin, and border from the base dimensions. The W3C standard says they must be added, resulting in 100px + (2 * 10) + (2 * 10) + (2 * 1), or 142px by 142px. A 42px difference! With just a few boxes, your page renders wildly different in IE than it does elsewhere. So going into quirks mode is BAD. You always want to use a strict doctype, and also write standards-compliant code, to keep IE from doing that.Woah, I have so much to learn. Thanks for this information though. I do kind of understand what you are saying. How do you know if your using a strict doctype? Where do you choose strict doctype? Link to comment Share on other sites More sharing options...
Synook Posted April 25, 2009 Share Posted April 25, 2009 The Doctype is the tag right at the top of your page that reads <!DOCTYPE... if it is strict, it will say so in it, e.g. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Link to comment Share on other sites More sharing options...
fabs Posted April 26, 2009 Share Posted April 26, 2009 Link to comment Share on other sites More sharing options...
justsomeguy Posted April 27, 2009 Share Posted April 27, 2009 IE8 will also tell you what mode it is running in. You can pull up the developer tools in IE8 and it will say if it is running in strict or quirks mode. You can also manually change it to see how it looks in other modes, such as IE7 strict vs. IE8 strict. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.