|
HTML - My Website + Two Browser Compatibilty Issues
Hello. =)
I'm trying to create a small website for my family, and I want to incorporate this drop-down menu from Sons of Suckerfish. I had some help altering the menu a bit, but I'm still having a few problems. =( I'm testing my site in as many browsers as possible, and I came across two major problems: Problem #1: The Top Menu It doesn't work in IE6. The menu keeps jumping VERY far to the right. Also, the words "Home", "By Year", etc. should change color when hovered on. You can observe the differences between IE6 and Firefox below, in these images I made: Menu (mouse issues; example #1) Menu (mouse issues; example #2) =================================== =================================== Problem #2: The "Thanks" Section My "Thanks" section isn't looking right, either. For some reason, Netscape won't space the image away from the text: Image (how "Thanks" page looks in IE, Firefox, and Netscape) I know Netscape Navigator is pretty much "extinct" now, but I'm still curious to know what the problem is. I'm guessing the problem is the "display: inline-box" code in my DIV tag. Is there another code I can use to fix this problem, or maybe there's a hack I can use for Navigator? Or...should I stop using DIVs and acheive the same effect another way (like with a table or something)? I really hope someone can help. Thanks in advance! Similar TutorialsHi, I am using a website builder to create a website for a company im setting up. Here is a link - http://www.monk3d.com/browserscompat.html It works great in IE, however in firefox the menu is alligned to the left, and the footers are stretched out slightly. Now I am a TOTAL novice when it comes to building a website (hence why im using a site builder). Any help/ advice would be greatly appreciated and in return I will offer you much love and happiness thanks, Rob Dear jebus, why does firefox give me 10px margins, when internet explorer dosent, and how do i fix it: Code:
body {
margin:0;
padding:0;
background:#ffffff url(bg.gif) top right repeat-y;
font-family:Agency FB, serif;
min-width: 800px;
}
body a {
text-decoration: none;
}
#header {
background:#000000;
color:#0066FF;
margin:0;
padding:0;
height:110px;
}
#middle {
height:470px;
background-color: #543644;
width:100%;
bottom:0;
color:#ffffff;
text-align:center;
}
#footer {
position:absolute;
height:100px;
background-color: #000000;
width:100%;
bottom:0;
color:#ffffff;
text-align:center;
}
HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>how to kick children right in the face and not get arrested</title> <link href="new.css" rel="stylesheet" type="text/css"> <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> </head> <body> <div id="header"><h1>Purge* mind </h1></div> <div id="middle"><h1>Purge* mind </h1></div> <div id="footer"><h2>This is a footer</h2></div> </body> </html> Amen well, im using these weird codes to make my site look the way i want... but it only works in some broswers. i need a much more compatible code. any help? ok well i worked this out. but it dosent seem to work properly in some browsers. its all acceptable w3. please help... <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML><HEAD><TITLE>Get Lit, A Clothing Company</TITLE> <META http-equiv=content-type content="text/html; charset=ISO-8859-1"> <META name="keywords" content=""> <META name="description" content=""> <STYLE type="text/css"> #main {position:absolute; left: 400px; top: 245px; width: 700px; height: 700px; z-index: 100 } img.floatLeft { float: left; margin: 4px; } img.floatRight { float: right; margin: 4px; } </STYLE> </HEAD> <BODY bgcolor=FFFFFF> <P align=center> <TABLE cellSpacing=0 cellPadding=0 width=900 border=0><TBODY><TR><TD align=center valign="top"></TD></TR><TR><TD align=center valign="top"> <A href="http://www.freewebs.com/stevenwang/home.htm" target=main><IMG alt="" src="http://www.freewebs.com/stevenwang/gohome.gif" border=0></A><IMG alt="" src="http://www.freewebs.com/stevenwang/spacer.gif"><IMG alt="" src="http://www.freewebs.com/stevenwang/spacer.gif"><IMG alt="" src="http://www.freewebs.com/stevenwang/spacer.gif"><A href="http://www.freewebs.com/stevenwang/blog.htm" target=main><IMG alt="" src="http://www.freewebs.com/stevenwang/nav_001.gif" border=0></A><IMG alt="" src="http://www.freewebs.com/stevenwang/spacer.gif"><A href="http://www.freewebs.com/stevenwang/catalog.htm" target=main><IMG alt="" src="http://www.freewebs.com/stevenwang/nav_002.gif" border=0></A><IMG alt="" src="http://www.freewebs.com/stevenwang/spacer.gif"><A href="http://www.freewebs.com/stevenwang/about.htm" target=main><IMG alt="" src="http://www.freewebs.com/stevenwang/nav_004.gif" border=0></A><IMG alt="" src="http://www.freewebs.com/stevenwang/spacer.gif"><A href="http://www.freewebs.com/stevenwang/contact.htm" target=main><IMG alt="" src="http://www.freewebs.com/stevenwang/nav_005.gif" border=0></A><BR><P align=left><IMG alt="" src="http://www.freewebs.com/stevenwang/splice1.gif" class="floatLeft"><P align=right><IMG alt="" src="http://www.freewebs.com/stevenwang/content.gif"></P></TD></TR></TBODY></TABLE> <TABLE cellSpacing=0 cellPadding=0 width=900 border=0><TBODY><TR><TD align=right valign="top"></TD></TR><TR><TD align=right valign="top"><iframe id="main" src="http://www.freewebs.com/stevenwang/home.htm" name="main" style="width:600px;height:600px;margin:0px;" frameborder="0" scrolling=no></iframe></TD></TR></TBODY></TABLE></BODY></HTML> Hi - Just wondering if anyone can help me figure out layout problems on the following page: www.marchgallery.com/comments.php I'm designing on a mac, and everything looks good in Safari. When I open up in Firefox, though, the comments are way below the intro text and the layout of the submission form is all messed up. I've never experienced this much difference in appearance between these two browsers. Maybe someone (nearly all of you) are viewing on PC? How does it look on that end? I'm really at a loss here. Any clues or suggestions would be much appreciated! One of the pages on my website shows up differently in Firefox than it does in other web browsers. Here is what it looks like in the following browsers. Google Chrome, Safari: Firefox: One of the most noticeable problems is that in Firefox, the form's submit button is missing. If you would like to look at the html code, the url is Nmacro.com/Contact.html. Also, I used iWeb to create my website. Thanks so much. i have resolved this thanks Hi, I'm new around here and need some help I've been dabberling with web development since 98 (had a rather large gap when pursuing a more artist approach but that's another story!) Recently I have been trying to launch an online apparel company myself and my partner have been working a site relaunch over the past fortnight and have stumbled across a huge problem that neither of us can rectify. Our site www.n-brio.com works picture perfect in chrome, safari and ie 8 but not in opera or firefox! Now the kicker is locally on both our computers it does but as soon as we look at it remotely thru those browsers half the site is not being recognised. We have checked code and even tried a different web host and still no head way! Are we missing something really obvious? Any suggestions would be amazing. Cheers Knatalie Hi All - Check out www.theSalve.org/flashVid.htm - Any ideas why the layout is different in Explorer and Firefox or even Safari and Opera for that matter. I realize I'm not using CSS. Don't know how to yet. Anything I can add to make it look the same on all browsers? Hello, I designed this website http://www.aitputd.org/conference and found that it has compatibility issues when viewed with different browsers. e.g. The 'font' of the menu changes (becomes bold) when viewed in IE and Chrome browsers as opposed to FF3.5 Also The title 'sponsors' on the left does not stay at the center in IE and FF3.5 but seems good in Chrome. Is there a solution to address these problems?? Any help is highly appreciated. Regards, NP Hello, quick question here. I'm working on this site: (replace @'s with a's) v@rd@burstyn.com/version2/ The previous designer left it in a bit of a mess, and now that I've made some changes that appear nicely in my Safari browser, the tables are hugely misaligned when I look at a number of the pages in Firefox (i.e., water.html or rites.html). Any advice as to how to get the tables back under control? I've tried for a while but nothing seems to fix it. Thanks very much in advance. Hey, I'm having a small problem with cross browser compatibility. In Internet Explorer my site looks exactly the way I want it to, no problems. However, in Firefox and Opera there is a space between the navigation and the content. I investigated my code and can't pinpoint the problem. Can you tell me what it is? So if you could just tell me the problem with no example, URL, or code that'd be great. I'm just kidding. The URL is TeamFlank.info. Here is some screen shots of it... IE: *click to enlarge* FF: *click to enlarge* Heya, I'm working on my new website design for http://nickerson.biz and all was going good. Came to the point where I check compatibility in all browsers. Figured everything would be fine since its 100% xhtml transitional valid. Turns out IE ****s it up real bad. Has 5 noticeable things that SHOULD NOT be happening. Site looks great in FF, but IE... I can't figure out whats going wrong. http://i42.tinypic.com/nntyly.png Ideas? View source to see coding, all seems fine. Hi, I am working on my website with my limited knowledge of HTML. As I am using frames I've found that my website will not appear in some browsers (namely firefox, which I find unusual as its usually excellent). It works fine in safari (i'm on a mac). the site is www.sambrewster.co.uk I'm creating a noframes site too so the option is there. I thought it might have something to do with the character encoding? Any help or pointers would be excellent! Just to know where I've gone wrong would be great. Thanks very much Hey, I'm having issues with coding a website to be cross-compatible with Firefox and Internet Explorer (views fine in Firefox). I'm a BS artist when it comes to web design, and I could really use some help. The site is at this address: www.thepynebros.com It views correctly in Firefox, however, Internet Explorer distorts the font sizes, and will not wrap the CuteNews script around the picture of the trees on the index page. Can someone help me out? What am I doing wrong? Hi this is my first website its part of a school competition, my problem is that i cannot get it to work with IE, the javascipt refuses to run and I dont know where its going wrong. Also is there a way to do drop shadows quikly in IE, or will I have to put in alpha gradiants, I fear they may be extreemly hard to do, due to the nature of the dynamicaly resizing divs. http://www.f1octaneracing.com/index.html I have a nice little HTML5 demo that plays a video in a canvas that is not displayed. As part of the demo, I copy "frames" from the hidden canvas into a resized canvas that is displayed. My "custom" code to manipulate the video frames works fine. What doesn't work depends on the browser, but also the source of the video. If the source of the video is on the local disk along with the html file, it plays fine and it loops fine in both Safari, Chrome. Opera and Firefox. If the source of the video is on the web, either as a local (to the website) where the html file is stored, or if the html file is local but the video is on the web, then Safari works fine. Chrome displays the video ONE time and then stops. The loop does not work. Remember, same code, works fine if all data is local. Changing the source URL of the video to a website is the ONLY change. Opera and Firefox do not display anything except the box rectangle when the video source is on the web. Firefox gives the error: Quote: Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///Volumes/Olorin/sliceNdice/demow.html :: processFrame :: line 34" data: no] No errors show up in Opera, but no video is displayed. The Code: (or a snippet, actually) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>HTML5 Video Deom</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var video;
var copy;
var copycanvas;
var draw;
var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;
function init(){
video = document.getElementById('sourcevid');
copycanvas = document.getElementById('sourcecopy');
copy = copycanvas.getContext('2d');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33);
}
function processFrame(){
//get video image
copy.drawImage(video, 0, 0);
// manipulate image here
draw.drawImage(copycanvas, 0,0);
}
</script></head>
<body onload="init()" style="margin:0px;">
<div><br/><br/></div>
<div style="display:none">
<video id="sourcevid" autoplay loop=loop>
<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/>
<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>
<canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
<canvas id="output" width="480" height="320" style="border: solid 5px #666666"></canvas>
</div>
</body>
</html>
Works if all files are local, shows box outline if all files are on the web: Code: <video id="sourcevid" autoplay loop=loop> <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/> <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/> </video> Fails: Code: <video id="sourcevid" autoplay loop=loop> <source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/> <source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/> </video> Note: Safari works in both cases, as long as all files and website are reachable. Chrome works to play the video ONCE, then stops. Firefox and Opera show an empty outline, but no video. I'm not a cross-browser expert. I will accept any and all possible solutions to try. In the meantime, I will continue to see if I can find the problem. Obviously, I want it to work from a website. Guys, Please help me. Following website www.blaizekitchens.co.uk Looks fine in Mozilla But goes horribly wrong in iexplorer Can't work out what the hell is causing this! Can someone please point me in the right direction Cheers Damon May web site is not all browser is not same size. I've created a blog on tumblr and attached it to a domain I purchased. The problem is it looks absolutely great in Safari (Windows) but not as great in IE or Firefox (Windows). Here is the site in safari, the screenshots mac but its the same on windows. and here is the IE version. The font (Century Gothic) looks terrible compared to the safari version. Tumblr has the feature to edit html but I am not that great with html and have basic knowledge. If anyone wants to see the html I will show them it. If anyone could help me alter the html to make the website look as smooth in IE and Firefox as it does in Safari I would be majorly grateful. Thanks, Danny Hello, I am trying to design a website for my fathers company and I am having some issues with the photogallery section. I used a template for the overall design, and when I want to add pictures horizontally it screws up all the images with their space in between them as well as the alignment of the whole website itself. Any help would be most appreciated I am trying to do this as a surprise!!! The website is: www.ckmjconstruction.com |
|||||||