|
HTML - Ie Div Quirks -- Argh!
IE6 and 7 are giving me some problems when I check with them to make sure that everything is displaying correctly as it does in FireFox. I made a post about this a while ago (http://www.htmlforums.com/html-xhtml...tch-91890.html).
I just want to know the things to know for designing a website with DIVs. From what I can tell so far -- IE tends to leave excessive vertical space between two DIVs that are stacked on top of eachother. IE also seems to have quirks when it comes to stacking DIVs side by side. For example: if two DIVs within a container DIV are side by side with no padding, margins or borders with whatever width in pixels that equal the width of the container DIV -- IE will for some reason add extra width to each of the two DIVs making them align one on top of the other instead of being layed out side by side. What must I do!? Similar TutorialsHey everyone, I'm a starting web developer and i build a website that work fine on IE8 until I saw on the developer tools that there is something call Quirks mode and IE8 Standard and when i change it to IE8 from Quirks it's look like a mess!! Can anyone tell me what is Quirks mode?! I've had problems in the past trying to get IE6 to display DIVs the same way as FF and IE7 displays them. So I recently decided to make a "skeleton" page just for the header section as a fresh start and I still can't figure out how to appease ol' IE6. I want the two DIVs to be side by side. But they aren't See what I mean: http://www.innotechnutrition.com/seeessess.php The CSS Code: body {
text-align: center;
}
#container { /* does IE6 not like the line breaks? */
width: 770px;
margin: 0px;
padding: 0px;
}
#header {
width: 770px;
margin: 0px;
padding: 0px;
}
#headerLeft {
width: 50%;
float: left;
margin: 0px;
padding: 0px;
border: 1px solid #000; /* this won't show in IE6 for some reason */
background: #ccc; /* this won't work either */
}
#headerRight {
width: 50%;
float: left;
display: inline;
margin: 0px;
padding: 0px;
border: 1px dotted #000; /* this don't show in IE6 for some reason */
background: #333; /* this won't work either */
}
The HTML (doctype: DTD XHTML 1.0 Transitional) Code: <!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> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <div id="container"> <div id="header"> <div id="headerLeft"> LEFT div </div> <div id="headerRight"> RIGHT div </div> </div> </div> </body> </html> 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. hello my schools email system can be accessed from outside but it rellies upon Internet Explorer quirks mode, I would like to try to force Firefox 3 into standards mode, or almost standards mode to see if it will work it does work in Opera and Firefox 2, so it isn't that urgent but I am interested if it is possible to override the doctype the problem is when I try to login it just gives an 'error has occured', it does use https though so that could be a problem thanks for the help, keeperofdakeys So I have this site... rigggght HERE, and I'm trying to figure out how to change the footer on the wordpress theme. It's hashed or encrypted or something so I was wondering if anyone knew anything about it. Thanks please code this to fix it or tell me how.. why the iframe is outta place in firefox www.anastaciadreams.com/preview.html *Disclaimer! I hope this makes sense to somebody! I'm self-taught in HTML so my scripts dont always work properly. In fact, I dont even know if my scripts are in the right order most of the time (for example what goes before and after HEAD/BODY, etc tags). To make things more complicated, theyre part JAVA part HTML and part CSS (is this normal?), but most of the time I can get them to work. Anyhoo, back to the question: Im having a particular problem making an animated cursor that I downloaded to work on my webpage. I downloaded it to my computer- saved it as "tp.ani" and then uploaded it to my directory, so Im assuming theres a problem with my coding somewhere? Could somebody please tell me what I'm doing wrong, I've tried everything! *Before I paste my script below- my main page is broken down into 3 frames... that means that for each frame (since each is a different page) I have to put the cursor script on every individual page correct? Instead of just on the page with the frameset script? Script for top frame: HTML Code: <HTML>
<HEAD>
<TITLE> MOSHER SERVICES LLC </TITLE>
<Script language='Javascript'>
<!--
function change(obj,nid)
{
obj.id=nid;
}
-->
</Script>
<Style type='text/css'>
<!--
body{cursor:url('tp.ani');}
#normBtn{
background-color:#DCDCDC;
color:#000000; font-family: occidental; font-size: 13pt;
border-style: solid;
border-bottom-color: #333333;
border-right-color: #555555;
border-left-color: #A9A9A9;
border-top-color: #F5F5F5
}
#btnFocus{
background img src: "water003.jpg";
color:#000000; font-family: occidental; font-size: 13pt; font-weight: bold;
border-style: solid;
border-bottom-color: #25587E;
border-right-color: #4863A0;
border-left-color: #87CEFA;
border-top-color: #FFFFFF;
cursor:hand;
}
-->
</Style>
<BODY>
<body background="waterswirllong.jpg">
<br>
<br>
<br>
<br><table border="0" width="450" align="center">
<TR><COLGROUP ALIGN="center" span="3"><td><FORM METHOD="link" ACTION="residential.html" TARGET="C">
<input type='submit' value='Residential' TITLE="Click here for a full list of the Residential
services we provide" onMouseOver='change(this,"btnFocus")'
onMouseOut='change(this,"normBtn")' id='normBtn'/>
</FORM></TD>
<TD><FORM METHOD="link" ACTION="commercial.html" TITLE="Click here for a full list of the Commercial
services we provide" TARGET="C">
<input type='submit' value='Commercial'
onMouseOver='change(this,"btnFocus")' onMouseOut='change(this,"normBtn")'
id='normBtn'/>
</FORM></TD>
<TD><FORM METHOD="link" ACTION="excavation.html" TITLE="Click here for the Excavation
services we provide"TARGET="C">
<input type='submit' value='Excavation'
onMouseOver='change(this,"btnFocus")' onMouseOut='change(this,"normBtn")'
id='normBtn'/>
</FORM></TD>
</TR>
</TABLE>
</BODY>
</HTML>
If you'd rather view the source from the actual site it's: www.mosherservices.com/main.html. I hope my question made sense to someone! Please feel free to tell me if I'm doing anything else wrong either. Thanks everyone , 'WebNovice' Kim Hi, any possible way I can make a table show an image which is randomly selected from a bunch of them? Would I need javascript? something like I have 5 images that are 400x100 and I would want one of the 5 to be randomly selected and displayed each time the page is viewed. Or maybe each day it changes like igoogle home. |
|||||||