1 of my divs moves when I add doctype
Question
I am trying to add a doctype to my index page but everytime I do it moves the divs to top left of screen.
I can see similar questions asked but cannot understand how they relate to me.
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Crafty Pixies</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!-- hide from none JavaScript Browsers
if (document.images) {
img1 = new Image();
img1.src = "images/bac01.png";
img2 = new Image();
img2.src = "images/05_01.png";
img3 = new Image();
img3.src = "images/05_03.jpg";
img4 = new Image();
img4.src = "images/buttons/05_04.png";
img5 = new Image();
img5.src = "images/buttons/05_04-over.png";
img6 = new Image();
img6.src = "images/buttons/05_06.png";
img7 = new Image();
img7.src = "images/buttons/05_06-over.png";
img8 = new Image();
img8.src = "images/buttons/05_07.png";
img9 = new Image();
img9.src = "images/buttons/05_07-over.png";
img10 = new Image();
img10.src = "images/buttons/05_08.png";
img11 = new Image();
img11.src = "images/buttons/05_08-over.png";
img12 = new Image();
img12.src = "images/05_11.png";
img13 = new Image();
img13.src = "images/05_02.png";
img14= new Image();
img14.src = "images/Cards/06_01s.png";
img15= new Image();
img15.src = "images/Cards/06_02s.png";
img16 = new Image();
img16.src = "images/Cards/06_04s.png";
img17 = new Image();
img17.src = "images/Cards/06_05s.png";
img18 = new Image();
img18.src = "images/Bags/08_01s.png";
img19 = new Image();
img19.src = "images/Bears/10_01s.png";
img20= new Image();
img20.src = "images/Babies/12_01s.png";
img21 = new Image();
img21.src = "images/cases/09_01s.png";
img22 = new Image();
img22.src = "images/logos/twitlog.png";
img23 = new Image();
img23.src = "images/logos/fbbadge.bmp";
// End Hiding -->
</SCRIPT>
<style type="text/css">
body.noScroll {
background-color: #AF8750;
background-attachment: absolute;
}
{ font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
}
h1
{ font-family:'Lucida Casual', 'Comic Sans MS';
}
h2
{ font-family:'Lucida Casual', 'Comic Sans MS';
}
h3
{ font-family:'Lucida Casual', 'Comic Sans MS';
}
h4
{ font-family:'Lucida Casual', 'Comic Sans MS';
}
p
{ font-family:'Lucida Casual', 'Comic Sans MS';
}
img
{ border-style: none;
}
table { border: 2px double #AF8750; background-color: #DEA862; font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
}
td { border: 2px double #AF8750; font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
}
tr { border: 2px double #AF8750; font-family: 'Lucida Casual', 'Comic Sans MS'; color: #8C6A3E
}
a:link {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#8C6A3E;} /* unvisited link */
a:visited {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#ffffff;;} /* unvisited link */
a:hover {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#ffffff;;} /* unvisited link */
a:active {font-family: 'Lucida Casual', 'Comic Sans MS'; color:#ffffff;;} /* unvisited link */
</style>
</head>
<BODY bgcolor="#AF8750">
<div id="layer2" style="position:absolute; top:188; left:35; width:280; height:307; z-index:2; padding:0px; background-color:#DEA862; border: 0px;">
<table style="position:relative; top:4; left:4; width:270; cellpadding:2; cellspacing:2;">
<tr>
<td colspan="2" align="center">
<h3><b>Follow Us</b></h3>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="center" valign="middle"><a href="http://twitter.com/craftypixies" target="_blank"><img src="images/logos/twitlog.png" alt="" /></a></td>
<td align="center" valign="middle"><a href="http://en-gb.facebook.com/craftypixies" target="_blank"><img src="images/logos/fbbadge.bmp" alt="" /></a></td>
</tr>
</table>
</div>
<a href="index.htm"><img style="position:absolute; TOP:15px; LEFT:330px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_04.png" alt="" /></a>
<a href="products.htm"><img style="position:absolute; TOP:15px; LEFT:468px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_06.png" alt="" /></a>
<a href="contact.htm"><img style="position:absolute; TOP:15px; LEFT:604px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_07.png" alt="" /></a>
<a href="links.htm"><img style="position:absolute; TOP:15px; LEFT:740px; WIDTH:136px; HEIGHT:56px; PADDING: 0px; BORDER: 0px" src="images/buttons/05_08.png" alt="" /></a>
<img style="position:absolute; TOP:15px; LEFT:25px; WIDTH:300px; HEIGHT:56px; PADDING: 2px" src="images/05_01.png" alt="" />
<img style="position:absolute; TOP:73px; LEFT:25px; WIDTH:300px; HEIGHT:110px; PADDING: 2px" src="images/logos/05_03.jpg" alt="" />
<img style="position:absolute; TOP:500px; LEFT:25px; WIDTH:300px; HEIGHT:20px; PADDING: 2px" src="images/05_11.png" alt="" />
<img style="position:absolute; TOP:73px; LEFT:329px; WIDTH:548px; HEIGHT:73px; PADDING: 2px" src="images/05_12.png" alt="" />
<img style="position:absolute; TOP:235px; LEFT:329px; WIDTH:548px; HEIGHT:129px; PADDING: 2px" src="images/05_13.png" alt="" />
<img style="position:absolute; TOP:486px; LEFT:329px; WIDTH:548px; HEIGHT:41px; PADDING: 2px" src="images/05_14.png" alt="" />
<a href="cards.htm"><img style="position:absolute; TOP:150px; LEFT:332px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_01s.jpg" alt="" />
<img style="position:absolute; TOP:150px; LEFT:423px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_02s.jpg" alt="" />
<img style="position:absolute; TOP:150px; LEFT:514px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_04s.jpg" alt="" />
<img style="position:absolute; TOP:150px; LEFT:605px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_05s.jpg" alt="" />
<img style="position:absolute; TOP:150px; LEFT:697px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_02s.jpg" alt="" />
<img style="position:absolute; TOP:150px; LEFT:787px; WIDTH:89px; HEIGHT:83px; Border: 0px" src="images/cards/06_01s.jpg" alt="" /></a>
<a href="bags.htm"><img style="position:absolute; TOP:365px; LEFT:332px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/bags/08_04s.jpg" alt="" /></a>
<a href="bears.htm"><img style="position:absolute; TOP:365px; LEFT:468px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/bears/10_01s.jpg" alt="" /></a>
<a href="baby.htm"><img style="position:absolute; TOP:365px; LEFT:605px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/babies/12_01s.jpg" alt="" /></a>
<a href="cases.htm"><img style="position:absolute; TOP:365px; LEFT:742px; WIDTH:133px; HEIGHT:114px; Border: 0px" src="images/cases/09_01s.jpg" alt="" /></a>
</body>
</html>
2 answers
solution1
0 2012-11-19 17:46:29
This is what the beginning of your HTML document should be:
<!doctype html>
<html>
<head>
<title>Crafty Pixies</title>
<meta charset="utf-8">
Just copy-paste this part to the beginning of your document, instead of all that stuff that you have up until the <script> element.
Now, make sure that everything looks right, and don't change this top part.
solution2
0 2012-11-19 17:51:25
Add px to your top , left , width and height properties in div id "layer2" as suggested in absolute positioning not working with XHTML? .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Images don't load when I add a doctype to my webpage
How come when I add xmlns to my doctype, the widths of my text boxes change?
I add <!DOCTYPE html> and it breaks my code and without it it work perfectly
How do I add !DOCTYPE to my html with groovy
Everytime i add <!DOCTYPE html> it breaks my code
What should I add to my .vimrc, when I create an html file with vim, created *.html file shows <!DOCTYPE html>… by default?
When I add in <!DOCTYPE html>, div measurements do not work
A part of styles didnt work when i add <!DOCTYPE html>
Firefox page “moves” when hiding/showing divs
Firefox page “moves” when hiding/showing divs
Related Tags