confused and dazed Posted September 19, 2013 Share Posted September 19, 2013 Hello Internet. I have been using the following Doc Type for all my pages I am creating and there are things here and there that don’t seem to work on different browsers... things like Hover, mouseover, JavaScript to get a fly-in function working. What is the best Doc Type to use for these kinds of things? I have heard this doc type I have been declaring is a "quirky" doc type. Link to comment Share on other sites More sharing options...
confused and dazed Posted September 19, 2013 Author Share Posted September 19, 2013 (edited) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> This is the doctype... Edited September 19, 2013 by confused and dazed Link to comment Share on other sites More sharing options...
deldalton Posted September 19, 2013 Share Posted September 19, 2013 HTML 5 uses this ... <!DOCTYPE html> And, because of that, I wouldn't use anything else. Link to comment Share on other sites More sharing options...
confused and dazed Posted September 19, 2013 Author Share Posted September 19, 2013 I will try... Thanks. Maybe it's my css thats causing the issue. See any problems with it? .menu1{background: url(menu1.jpg); width:120px; height:36px; Position:absolute; margin-left:0px;}.menu1:hover{background: url(hmenu1_1.jpg);} Link to comment Share on other sites More sharing options...
Ingolme Posted September 19, 2013 Share Posted September 19, 2013 Theoretically, the DOCTYPE has absolutely no influence on how the page renders. Practically, a standard compliant doctype renders the page right, any other doctype renders the page wrong. I recommend to use the HTML 5 doctype. HTML and CSS do what you tell it to. If your page isn't looking the way you want it to, there's something in your CSS that is making it that way. So in order to solve your problem: What are you expecting to see and what is actually there? And what code is influencing that? It seems your :hover class is trying to load an image. Until the browser has loaded the image it won't show up on the page. If you hover over the item long enough the image will appear. A way to ensure that images are always loaded is to use a technique called "CSS sprites" (look it up in a search engine) Link to comment Share on other sites More sharing options...
confused and dazed Posted September 19, 2013 Author Share Posted September 19, 2013 I am expecting to see (in safari) a different image. When the page loads you see menu1.jpg and when you hover over it I want to see hmenu1_1.jpg Basically I have created a "highlight" function of my own. I created an image (menu1) and then in photoshop brightened that image (hmenu1_1). This works in Explorer but not in Safari or Firefox. Link to comment Share on other sites More sharing options...
Ingolme Posted September 19, 2013 Share Posted September 19, 2013 Have you tried waiting a few seconds after hovering over the image? As I mentioned before, the other image starts loading as soon as the mouse hovers over it. Also, look up CSS sprites. Link to comment Share on other sites More sharing options...
confused and dazed Posted September 19, 2013 Author Share Posted September 19, 2013 So in theory the code I used should work in Firefox and Safari? Link to comment Share on other sites More sharing options...
davej Posted September 19, 2013 Share Posted September 19, 2013 You can also convert the .jpg images to .png which is sometimes quite a bit smaller and quicker to load. Link to comment Share on other sites More sharing options...
confused and dazed Posted September 19, 2013 Author Share Posted September 19, 2013 My current jpg files are 7.8kb this cannot be causing a delay... can it? Is my css code ok? Could it be written more efficiently? .menu1{background: url(menu1.jpg); width:120px; height:36px; Position:absolute; margin-left:0px;}.menu1:hover{background: url(hmenu1_1.jpg);} Link to comment Share on other sites More sharing options...
davej Posted September 19, 2013 Share Posted September 19, 2013 (edited) If you see a delay then there is a delay. I am told there are developer tools that offer load-time charting. https://getfirebug.com/network Edited September 19, 2013 by davej Link to comment Share on other sites More sharing options...
rajivdevkk Posted September 20, 2013 Share Posted September 20, 2013 (edited) Doc Type is good. I always use DOCTYPE method to create a site. Edited September 20, 2013 by Ingolme Advertising Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now