Zymic Webmaster Forums > Ie7 Css Functionality Problems

Full Version: Ie7 Css Functionality Problems

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

Itakru

Jan 11 2009, 06:11 AM

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

Jan 11 2009, 05:09 PM

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

Jan 11 2009, 07:43 PM

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!

Again, thank you very much.

Banjo

Jan 12 2009, 12:27 AM

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.