Help - Search - Members - Calendar
Full Version: Ie7 Css Functionality Problems
Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS
Itakru
Hello. :3 I'm making a series of pages to eventually host on Zymic, but I'm having a small problem: certain div layers are centered using "margin:auto" and display fine in Mozilla, but do not appear centered in IE7. I believe it has something to do with margin command functionality in IE (though I'm not sure), and if it requires a hack to fix, I'm completely lost. x-x Can anyone help me? The URL of the completed page and CSS coding are below:

http://seyusan.webs.com/akefia.html

CODE
body {background-color: #000000; font-family: "Verdana", "Arial", "Helvetica", sans-serif; font-size: 8pt; color: #ddd;}

#container {margin: auto; width: 785px; height: auto;}

#top_nav {position: relative; top: 30px; left: -8px; margin: auto; width: 700px; height: auto; text-align: center;}

#layout {position: relative; left: -8px; top: 65px; margin: auto; height: 440px; width: 545px; background-image: url(http://img.photobucket.com/albums/v386/madisonvalentine/webblogs/akefiablog.png);}

#my_content {position: relative; overflow: auto; top: 57px; left: 209px; width: 225px; height: 225px; background: transparent; padding: 3px;}

#footer {position: relative; top: 65px; width: 785px; text-align: center;}

a:link {color: yellow; text-decoration: none; font-weight: 400;}

a:visited {color: yellow; text-decoration: none;}

a:active {color: #fff;}

.header {font-size; 6pt; color: yellow; border-bottom: 1px yellow solid; font-variant: small-caps; text-align: right; font-weight: 500;}

.center {text-align:center;}

.right {text-align: right;}

.view {font-size: 7pt; color: yellow;}


Again, help would be much appreciated. :] Also, if anyone can recommend a good site for CSS hacks or has some advice of their own, I'd be happy to hear it.
Banjo
You have no doc type in your html code, change it to this


CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title></title>

<link href="/style/akefia.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="container">

<div id="top_nav"><p class="view">Best viewed in Firefox</p>|| <a href="#intro">Introduction</a> || <a href="#story">Story</a> || <a href="#relations">Friends and Enemies</a> || <a href="#biases">Likes and Dislikes</a> || <a href="#stats">Stats</a> || <a href="#leave">Farewells</a> ||
</div>

<div id="layout">

<div id="my_content">
<p class="header"><a name="intro">Cold Unwelcoming</a></p>
<p>Intro here</p>
<p class="header"><a name="story">A Wicked History</a></p>
<p>Story here</p>
<p class="header"><a name="story2">The Dark Truth</a></p>
<p>Rest of story here</p>
<p class="header"><a name="relations">Enemies and Allies</a></p>
<p>Self-explanatory</p>
<p class="header"><a name="biases">Hated and Desired</a></p>
<p>Likes and dislikes here</p>
<p class="header"><a name="stats">Statistics</a></p>
<p>Self-explanatory</p>
<p class="header"><a name="leave">Fair Warning</a></p>
<p>Ending here</p>
</div>

</div>

<div id="footer"><p><a href="http://www.teripets.com" target="_blank">Return to Teripets</a></p></div>

</div>

<!-- --><script type="text/javascript" src="http://www.freewebs.com/i.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script> <script type="text/javascript" src="http://edge.quantserve.com/quant.js"></script> <script type="text/javascript">_qacct="p-44naSaXtNJt26";quantserve();</script> </body>

</html>


all i did was add

CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

before the html tag
Itakru
Ah. XD Naturally it would be the simple and easy to forget thing. Thank you very much! I'll add that in and see if it fixes it. :3

EDIT - It fixed it! Yay! biggrin.gif Again, thank you very much.
Banjo
No problem glad I could help.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2012 Invision Power Services, Inc.