|
HTML - Throwing It Off... Browser Compatible.
refer to new post
Similar Tutorialshi please check my site www.yourdesign.org and please could somebody tell me how i can stop it going all weird in IE, it looks fine in firefox cheers guys n gals site works great in Safari, looks fine in Firefox, but the header and footer don't show in Internet Explorer! Any suggestions? Here is the website: www.czechcpa.com I'm coding a site to be compatible with IE7 and up. It all looks great in just HTML5, but as soon as I try adding the XHTML doctype and stuff, IE goes into quirks mode. I've looked into it as much as I can. Here's what I think it should be along with PHP setting the MIME type: HTML Code: <?php header('Content-Type: application/xml;charset=UTF-8'); ?>
<?php echo '<?';?>xml version="1.0" encoding="UTF-8"?>
<?php echo '<?';?>xml-stylesheet type="text/xsl" href="ie-xhtml-fix.xsl"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr">
<head><meta charset="UTF-8" />
Then ie-xhtml-fix.xsl, from http://www.w3.org/MarkUp/2004/xhtml-faq#ie, is: Code: <stylesheet version="1.0"
xmlns="http://www.w3.org/1999/XSL/Transform">
<template match="/">
<copy-of select="."/>
</template>
</stylesheet>
I've tried every combination I could think of, but nothing works. It fully validates XHTML5 in w3.org's validator as it is. Can anyone help figure it out? Thank you. I am not experienced in html coding, so please explain things s l o w l y to me I am using an online webpage builder. I made a table and copied the source code into the html editor window of this online builder, excluding only the <html> and <body> tags. When i load the page, it throws up a ton of unwanted 'style definitions' etc... There were too many characters to post here, so you can see the website, and the blaringly obvious problem at http://www.integratect.12h.us/index....try-Comparison If someone could check out the source code and tell me what is causing this text i would be very happy => )) Hi my html and css that i have coded is only valid in opera and does not run as it is meant to in firefox and safari. Can anyone help me fix it. The text input box is what is broken. here is the html: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <meta name="author" content="Husain Abdullah Al - Zabir" /> <title>WebSnips</title> <link rel="stylesheet" type="text/css" href="styles/main.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/rounded_corner.css" media="all" /> <link rel="stylesheet" type="text/css" href="styles/bottom_menu.css" media="all" /> </head> <body> <center> <div class="box"> <b class="tc"> <b class="L1"></b> <b class="L2"></b> <b class="L3"></b> </b> <div class="content"> <div class="box" style="width:100%;"> <b class="tc"> <b class="L1"></b> <b class="L2" style="background-color:#333333;"></b> <b class="L3" style="background-color:#333333;"></b> </b> <div class="content" style="background-color:#333333;"> <div style="width:630px; padding-top:10px;"> <div style="float:left; background-image:url(images/http.jpg); background-position:center; background-repeat:no-repeat; width:95px; height:40px;"> </div> <div style="float:left;"> <input style="height:28px; border:none; font-family:verdana; font-size:21px; color:#7d7d7d; padding-top:6px; padding-bottom:6px;" type="text" size="35" /> </div> <div style="float:left;"> <input type="image" value="submit" src="images/submit-button.jpg" /> </div> </div> <div style="clear:both; height:30px;"> </div> </div> <b class="bc"> <b class="L3"></b> <b class="L2"></b> <b class="L1"></b> </b> </div> </center> </body> </html> here is the css: Code: #logo
{
width: 317px;
height: 40px;
/*background-image: url(../images/logo.gif);*/
background-image: url(../images/logo.jpg);
background-position: center;
background-repeat: no-repeat;
}
#logo-holder
{
padding: 20px;
}
#footer-logo
{
width: 609px;
height: 40px;
/*background-image: url(../images/footer-logo.gif);*/
background-image: url(../images/footer-logo.jpg);
background-position: center;
background-repeat: no-repeat;
}
#footer-logo-holder
{
padding: 5px;
}
#instruction
{
border-left:solid 4px #98CB00;
padding-left:5px;
font-family:verdana;
font-size:17px;
font-weight: normal;
color:white;
text-align:left;
width:623px;
}
#instruction-holder
{
padding-top: 20px;
padding-bottom: 20px;
}
.separator
{
width:10px;
background-image: url(../images/separator.jpg);
background-position: bottom;
background-repeat: no-repeat;
float: left;
height:180px;
}
.urls
{
font-family: verdana;
font-size: 12px;
color: #7d7d7d;
height:180px;
font-weight: bold;
line-height: 20px;
width:203px;
clear:both;
padding-top: 20px;
}
.snips_name
{
font-family: verdana;
font-size: 21px;
color: #FFFFFF;
text-align: left;
}
#top_snips
{
width:31px;
height:38px;
background-image: url(../images/top_snips.jpg);
background-position: top;
background-repeat: no-repeat;
margin-right: 5px;
float: left;
}
#latest_snips
{
width:38px;
height:38px;
background-image: url(../images/latest_snips.jpg);
background-position: center;
background-repeat: no-repeat;
margin-right: 5px;
float: left;
}
#partners
{
width:53px;
height:38px;
background-image: url(../images/partners.jpg);
background-position: top;
background-repeat: no-repeat;
margin-right: 5px;
float: left;
}
Can anyone help fix this? Thanks Hello, I am trying to write a piece of HTML for my web page. It is used to display a blog on a web page but in a frame, the only problem is that at the moment it only works in IE. Could someone help me make this universal or working in FF as well? HTML Code: <HTML> <HEAD> <TITLE>ZenBanners</TITLE> </HEAD> <FRAMESET> <FRAME src="http://ZenBanners.BlogSpot.com/"> </FRAMESET> </HTML> Hi there. So I don't need it for 800x600, only the sizes over 1024x768. Basically I made this template which I need to be able to be re-sized when in your browser. I thought I did this right, however I forgot about other resolutions other than 1024x768. When in higher res, the tables break a little and from what I can make out just get a little larger. What I can't work out is how to make them all work properly most large resolutions? Link to the template is he http://www.ruthlessintent.com/penguins/ Hi i was wondering if anyone can help me with making my page compatible with older browsers IE7+. My page is www.marksbodyshop.org The css is: Code: html,body {
height:100%;
margin:0;
background-color:#000;
background-image:url(../images/firstpage.gif),
url(../images/firstpage-backup-for-safari.gif); /* required by Safari */
background-size:100% 100%;
}
#container {
height:73%;
background-image:url(../images/update.png);
background-size:100% 100%;
}
#nav {
position:absolute;
padding:0;
margin:0;
list-style-type:none;
height:7%;
width:57%;
top:20%;
left:20%;
z-index:1;
}
#nav li {
width:16%;
margin:1%;
height:100%;
}
#nav a {
display:block;
width:100%;
height:100%;
outline:none;
text-indent:-9999px;
background-size:100% 300%;
}
#about {background-image:url(../images/aboutus.png);}
#about1 {background-image:url(../images/contactus.png);}
#about2 {background-image:url(../images/freelunch.png);}
#about3 {background-image:url(../images/map.png);}
#about4 {background-image:url(../images/meettheteambutton.png);}
#nav a:hover {background-position:0 -100%;}
#nav a:active {background-position:0 -200%;}
does anyone know a browser that will only parse and evaluate valid HTML/XHTML based on what the doctype is and ignore invalid HTML/XHTML or generate errors. So if I had a XHTML doctype and my code was: Code: this is a XHTML document <br> this should be a new line I don't want the <br> to parse because I want something to trigger that is it not a valid XHTML tag since it is not closed. Any browser won't really care and just show the new line. I would have to validate it on the w3c website to find my error. So I want a browser that would give me these results based on my example code: Code: this is a XHTML documentthis should be a new line and then some sort of error saying "<br>" on line x is invalid. Hi, I work on a Mac, and have Safari, Internet Explorer 5 and Firefox. 1. What do you think I should be building my sites to? What do you use? 2. Also why do some sites work in all browsers? CSS hacks? Microsoft are no longer letting you download Internet Explorer for the Mac, from microsoft.com. Therefore all new mac users from February last year will not be using Explorer. Please help! Thankyou Tom Hey guys should I be worried about coding my site for the IE 5.x series or should I just concentrate on IE6 and IE7 Hey HTML Forum!! So im gettingr really frustrated with this problem I'm having with this HTML issue. I did all of the coding in dream weaver(Yea by coding I mean drag and drop )Everything looks great opened up in dream weaver. Then when I open it in a browser (IE and Firefox) everything is all chopped up. check this out. First shot is in DW, second shot is opened in IE: What do you guys think? This is only the second website I have done and havnt had much formal training so im kind of flying by the seat of my pants. Thanks in advance!!! EDIT: You can actually go to the home page and see how bad it looks. www.miattconstruction.com the home page isnt AS bad but go to project or contacts and the pages get worse. Hi all I'm new to html... I'he created one Html Page. Which comtains Frames. It is working fine in Firefox but in IE8 size is increased.. (Looking Like Zoom In) and Border of the Frame is not displaying in IE8. (You can see it in Images) so How to Make it look Similar on all Browser? Please help me to solve this.. Testing a new structure. I have tried IE6, IE7, Opera, Firefox and would appreciate crosschecks on other browsers for Linux/OSX http://www.telfordsteamrailway.co.uk...e/newindex.php basically all I have done is added the right column with the fundraising links I would like to now if there are any layout issues or issues with the .swf player Thanks in advance Working on it now. Thanks. Ok my runescape site looks fine in Mozilla and IE6, but I have two members using IE7 that are getting this: http://img341.imageshack.us/my.php?image=rsguidegw1.jpg Just wondering what the "hack" is for IE7 to get this to align right. The site is as follows: http://rse.pzproductions.com The CSS is: Code: body {
background-color: #5a5a5a;
color: #ffffff;
margin: 0;
padding: 0;
font-family: trebuchet ms, arial, verdana, helvetica, georgia;
font-size: 10pt;
height: 100%;
}
#wrapper {
width: 100%;
min-height: 100%;
margin: auto;
position: relative;
}
* html #wrapper {
background-image: url(images/navbg.gif);
background-repeat: repeat-y;
height: 100%;
}
#navheadwrap {
margin: 0;
padding: 0;
float: left;
height: 100%;
position: fixed;
background-image: url(images/navbg.gif);
background-repeat: repeat-y;
width: 200px;
}
* html #navheadwrap {
position: relative;
}
#head {
background-image: url(images/rsenewtitle1.gif);
background-repeat: no-repeat;
margin: 0;
padding-bottom: 15px;
width: 200px;
height: 200px;
z-index: 2;
}
#navigation {
width: 200px;
height: 100%;
margin: 0;
padding: 0;
z-index: 1;
position: absolute;
margin-top: -50px;
}
* html #navigation {
position: relative;
}
#navigation h3 {
margin: 0 0 10px 10px;
color: #000;
font-size: 14pt;
display: inline;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
}
#navigation ul {
display: inline;
list-style-type: none;
}
#navigation a, #navigation a:visited, #navigation a:active {
color: #17486A;
padding: 5px 3px 0px 15px;
display: block;
text-decoration: none;
width: 85%;
font-size: 11pt;
}
#navigation a:hover {
color: #17486A;
padding: 5px 3px 0px 15px;
display: block;
text-decoration: underline;
width: 85%;
font-size: 11pt;
}
#navigation li.title {
font-size: 12pt;
font-weight: bold;
border-bottom: 1px dashed #000000;
width: 85%;
color: #000000;
margin: 0px auto 0px 10px;
text-align: left;
font-family: papyrus, tahoma, georgia;
}
* html #navigation li.title {
width: 75%;
}
#content {
position: relative;
margin-left: 200px;
padding: 10px 10px 10px 0;
height: 100%;
}
.adminsig {
font-weight: bold;
color: yellow;
}
#content a, #content a:visited, #content a:active {color: #DBA206;}
#content a:hover {text-decoration: none;}
.paragraph {
padding-left: 10px;
padding-right: 10px;
text-align: justify;
}
#content ul {
list-style-type: none;
}
#content h2.orange {
color: #DBA206;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
#content h3 {
color: #429AD7;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
.newstitle {
font-size: 11pt;
font-weight: bold;
font-family: "trebuchet ms", arial, verdana;
border-bottom: 1px solid #000000;
width: 100%;
color: #429ad7;
}
.border {
border: 1px solid white;
}
#goal {
border-bottom: 1px solid #000000;
color: #eeeeee;
padding: 0px 0px 3px 20px;
margin: 0;
}
#goal a, #goal a:visited, #goal a:active {color: #DBA206;}
#goal a:hover {text-decoration: none;}
#goal h3 {
color: #dba206;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
#goal h4.progress {
color: #FF0000;
}
#goal h4.deadline {
color: #0BDF00;
}
#goal h4 {
color: #429AD7;
font-family: papyrus, "trebuchet ms", tahoma, georgia;
display: inline;
}
/* Block Menu */
#ul-table li a {
background-color:#1A4766;
font: 10pt "trebuchet ms", Arial, sans-serif;
display:block;
line-height:30px;
}
#ul-table a:link, #ul-table a:visited, #ul-table a:active {
color: #ffffff; text-decoration: none;
}
#ul-table a:hover {
background-color:#1E6799;
color: #ffffff;
text-decoration: underline;
}
#ul-table {
width: 505px;
text-align:center;
margin: 0px auto;
padding:0;
color: navy;
list-style-type:none;
clear:both;
}
#ul-table li {
width: 125px;
float:left;
border:1px solid black;
border-right:none;
text-align: center;
}
* html #ul-table li a {
width: 100%;
}
#ul-table li.top {
border-bottom:none;
}
#ul-table li.right {
border-right:1px solid #000000;
}
#ul-table li.nolink {
font-weight: bold;
background-color: #D0AE78;
color: black;
}
.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}
/* End Block Menu */
/* Small Block Menu */
#skills td a {
font: 10pt "trebuchet ms", Arial, sans-serif;
display:block;
line-height:30px;
}
#skills a:link, #skills a:visited, #skills a:active {
color: #ffffff; text-decoration: none;
}
#skills a:hover {
background-color:#1E6799;
color: #ffffff;
text-decoration: underline;
}
#skills {
text-align:center;
margin: 0px auto;
padding:0;
color: navy;
list-style-type:none;
clear:both;
}
#skills td {
width: 125px;
float:left;
border:1px solid black;
border-right:none;
text-align: center;
background-color:#1A4766;
}
* html #skills td a {
width: 100%;
}
#skills td.top {
border-bottom:none;
}
#skills td.right {
border-right:1px solid #000000;
}
#skills td.nolink {
font-weight: bold;
background-color: silver;
color: #1A4766;
line-height: 30px;
border-bottom: none;
font-size: 12pt;
text-align: left;
padding-left: 5px;
}
#skills td.nolinkbottom {
font-weight: bold;
background-color: silver;
color: #1A4766;
line-height: 30px;
font-size: 12pt;
text-align: left;
padding-left: 5px;
}
/* End Small Block Menu */
/* Start Stat Tables */
.stattable {
border: 1px solid #000000;
border-bottom: none;
margin: 0;
padding: 0;
}
.stattable th {
font-weight: bold;
font-size: 11pt;
background-color: #1A4766;
border-bottom: 1px solid black;
padding: 2px;
text-align: center;
}
.stattable td {
background-color: #336699;
padding: 2px;
text-align: center;
height: 40px;
border-bottom: 1px solid black;
}
.stattable td.left {
text-align: left;
}
/* New Table Layout */
#table {
margin: auto;
border-left: 1px solid #000;
border-top: 1px solid #000;
}
#table a, #table a:visited, #table a:active {
text-decoration: underline;
color: #000;
}
#table a:hover {
text-decoration: none;
color: #000;
}
.tableheader {
font-weight: bold;
text-align: center;
background-color: #333;
color: #fff;
}
.tr1 {
padding: 3px;
background-color: #369;
color: #fff;
border-bottom: 1px solid #000;
}
.tr2 {
padding: 3px;
background-color: #ccc;
color: #000;
border-bottom: 1px solid #000;
}
td {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
padding: 5px;
}
th {
border-right: 1px solid #000;
border-bottom: 1px solid #000;
text-align: center;
padding: 5px;
}
I have a small window that shows site logins by ip address. I open it with window.open and get exactly the proper display in the proper position. But, I'm stuck with the browser page that called window.open(). Is there a way to close that browser? I've tried things like window.opener.close() with no luck. Remember, I want t close the browser, not just a window. Thanks, Mac This page looks exactly like I want it to in Firefox but not in ie6 or ie7. In ie6 the fieldsets are different heights but I want them to be the same (as in firefox) and in ie7 some of the submit buttons are hidden. Can someone help me with this? Thanks... I was wondering on the board's opinion. Basically, the ALTtext element used in image display, provides two things: 1. Replacement text if the image should be abscent so that you can easily reference which image is missing and replace it. 2. Mouseover text of the image so surfers can get short extra information about the image. Now, you may argue that a Browser should come set as default to ignore mouseover text. However, there is a reason why many web developers still use this in preference to an image title. The reason being that it is extra programming for the developer to type out additional code which merely plays the same role as the original Alt attribute. Some argue that the programmer shouldn't even give an Alt value! Sadly, in turn many browsers are unfortunately becoming designed without the Alt text attribute, making many Alt-text-specific sites hard to understand. If you honestly find a small bit of mouseover text which really only exists for a fraction of a second intrusive of your surfing time then you've got issues. Who agrees? Hey guys, haven't built a website for a while and when I did build them I didn't really have a clue. I've built this page which comes up great in safari but Firefox and Ie show jack. What could be the problem? Check: www.goldensparrowstudios.co.uk thanks so much. |
|||||||