I am new and need help - website works in Firefox but not IE

A

Amir.R.2008

New Member
My website works in Firefox perfectly but not in IE7. I have fiddled with it endlessly and it is always the same problem:

1) It does not center in IE
2) Hover menu does not work in IE

You can see the website at http://www.rezaizadeh.com

Here is the CSS code:

.body{
background-color: #000000;
background-repeat: repeat;
margin: 0;
padding: 0;
text-align:center;
}
div#div_container{
position: relative;
margin: 0 auto;
width: 1000px;
text-align:left;
}

div#container_main{
position:absolute;
text-align: left;
font-family: Georgia, "Times New Roman", Times, serif;
background-color: #757575;
padding-right: 5px;
padding-left: 5px;
left: 136px;
top: 184px;
width: 720px;
height: 858px;
overflow: scroll;
}
div#container_right {
position:absolute;
background-color: #000000;
top: 136px;
left: 864px;
width: 136px;
height: 906px;

}
div#Container_banner {
background-color: #000000;
height: 136px;
width: 1000px;
position: absolute;
left: 0px;
top: 0px;
background-image: url(../Banner.jpg);
}
div#container_left {
background-color: #000000;
position: absolute;
height: 906px;
width: 136px;
left: 0px;
top: 136px;
}
div#container_bottom {
position:absolute;
top: 1080px;
height: 31px;
width: 1000px;
background-color: #000000;
left: 0px;

}


.clear{
height:40px;
clear:both;
width:100%;
margin:0;
margin-left:20px;
}


.pickit{
font-family:verdana, arial, sans-serif;
font-size:15px;
font-weight:normal;
color:#757575;
margin:1px 8px 0 0;
clear:none;
position:relative;
float:left;
}



/* --- Navbar Style --- */

#nav {
width: 728px;
height: 48px;
float: none;
background: transparent;
margin: 0 0 0 0;
top: 136px;
left: 136px;
}

/* -- Black Menu -- */
.menu {
font-family: Georgia, "Times New Roman", Times, serif;
width:728px;
height:42px;
position:relative;
font-size:11px;
margin: 0;
z-index:1000;
}
.menu ul li a {
display:block;
text-decoration:none;
color:#f0f0f0;
font-weight:bold;
width:81px;
height:42px;
text-align:center;
border-bottom: 0;
background-image:url('images/black/center.png');
line-height:48px;
font-size:11px;
overflow:visible;
padding-left: 1px;
}
/* End Caps Styling */
.menu .left_nosub {
background-image:url('images/black/left.png');
padding-left: 1px;
margin-right: -1px;
}
.menu .right_hassub {
background-image:url('images/black/right.png');
}
.menu .right_nosub {
background-image:url('images/black/right.png');
}
.menu ul {
padding:0; margin:0; list-style: none;
}
.menu ul li {
float:left; position:relative;
}
.menu ul li ul {
display: none;
}

/* Button ":hover" Styling */
.menu ul li:hover a {
color:#000; background:url('images/black/center_hassub.png');
}
.menu ul li:hover ul {
display:block; position:absolute; top:42px; left:0; width:152px; margin: 0; padding: 0;
}
.menu ul li:hover ul li a.center_hassub {
background:#6a3; color:#000;
}
.menu ul li:hover ul li:hover a.center_hassub {
background:#6fc; color:#000;
}
.menu ul li:hover ul li ul {
display: none;
}

.menu ul li:hover .left_nosub {
color:#000; background:url('images/black/left_nosub.png');
}
.menu ul li:hover .right_hassub {
color:#000; background:url('images/black/right_hassub.png') ;
}
.menu ul li:hover .right_nosub {
color:#000; background:url('images/black/right_nosub.png') ;
}

/* DropDown Styling */
.menu ul li:hover ul li a {
background-image: none;
display:block;
height: 28px;
line-height: 26px;
color:#000;
width:142px;
text-align:left;
margin: 0;
padding:0 0 0 11px;
font-weight:normal;
overflow: visible;
}
.menu ul li:hover ul {
margin: 0 0 0 3px;
padding: 0;
background-image:url('images/black/dropdown.png');
background-repeat:no-repeat;
background-position:bottom left;
}

/* DropDown Menus ":active" or "Selected" Styling */
.menu ul li:hover ul .sub_active {
background-image:url('images/black/sub_active.png');
margin-right: 1px;
}

/* DropDown Menus ":hover" Styling */
.menu ul li:hover ul li a:hover {color:#000 ; background-image:url('images/black/sub_hover.png');}

.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

.wrap{
position:relative;
top:0px;
left:0px;
float:left;
width:728px;
height:42px;
background:#101010 no-repeat center 120px;
padding:0;
padding-left:0px;
}

/* -- End Black Menu -- */

And this is the template for the site:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<!-- TemplateBeginEditable name="doctitle" --><!-- TemplateEndEditable -->
<META http-equiv="Content-Type" content="text/html; charset=utf-8" name="keywords" content="Iran, Novel, write, writer, author, Rostam, Shahnameh, Iranian, Persia, Persian, Iranian Novel, Book, Iranian Book, Persian Book, Iranian author, Iranian writer">
<LINK type=text/css rel=stylesheet href="../main.css">
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #000000;
}

-->
</style></HEAD>
<BODY>
<div id=div_container>
<div id=Container_banner>
<P><a href="../index.html"><img src="../Banner.jpg" alt="Banner" width="1000" height="136"></a></P>
</div>
<div id=container_left>
<P><IMG height=906 src="../ColumnLeft.jpg" width=136 border=0> </P>
</div>
<div id=container_right>
<P><IMG height=906 src="../ColumnRight.jpg" width=136 border=0> </P>
</div>
<div id=container style="LEFT: 136px; WIDTH: 728px; POSITION: absolute; TOP: 136px; HEIGHT: 48px; BACKGROUND-COLOR: black">
<div class="wrap">
<div id="nav">
<div class="menu">
<UL>
<LI><A class="left_nosub" href="../index.html">Home</A> </LI>
<LI><A class="center_hassub" href="../writing.html">Writing</A>
<UL>
<LI><A href="../Novel.html">Novel</A></LI>
<LI><A href="../ShortStories.html">Short Story</A></LI>
</UL>
</LI>
<LI><A class=center_hassub href="../AboutMe.html">About Me</A>
<UL>
<LI><A href="../MyBio.html">My Bio</A></LI>
<LI><A href="../MyPic.html">My Pic</A></LI>
<LI><A href="../MyEmail.html">My Email</A></LI>
</UL>
</LI>
<LI class="right_nosub"><A class=right_nosub href="../Blog.html">Blog</A></LI>
</UL>
</div>
</div>
</div>
</div>
<div id=container_main>
<h1> Amir Rezaizadeh's Writings</h1>
<!-- TemplateBeginEditable name="EditRegion3" --> <!-- TemplateEndEditable -->
<iframe src="http://rcm.amazon.com/e/cm?t=rezaizadehcom-20&o=1&p=40&l=ur1&category=books&banner=01C0Z0F1JZARPFRFG382&f=ifr" width="120" height="60" scrolling="no" border="0" marginwidth="0" style="border:none;" frameborder="0"></iframe>
</div>
<div id=container_bottom>
<P>Copyright &copy Amir Rezaizadeh &nbsp 2008</P>
</div>
</div>


<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.")
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"))
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-4187907-2")
pageTracker._trackPageview()

</script></BODY></HTML>


Any help would be appreciated.

Thanks in advance,

Amir
 
conor

conor

New Member
edit a line to your div container - text-align:center;

Code: 
div#div_container{
position: relative;
margin: 0 auto;
width: 1000px;
text-align:center;
}

that should sort out the centering problem. As for the other one i'm not sure. I don't have ie so i can't really check! :)
 
A

Amir.R.2008

New Member
No, the problem of it not being centered is still there. But it fixed the gaps between images.

Now I know why I left computer programming for law and then writing.
 
jnjc

jnjc

New Member
Try removing the position:relative and see what that does ?

Code: 
div#div_container{
[B]position: relative;[/B]
margin: 0 auto;
width: 1000px;
text-align:center;
}
 
A

Amir.R.2008

New Member
Tried it, uploaded it to the server, but did not center the page. In DreamWeaver it shows it centered. Once I remove the "postion:relative" DreamWeaver does not show it centered any longer.

Thanks for taking the time.
 
You must log in or register to reply here.
Top