DIv problems with IE

**irn101** · 02-03-2007, 05:12 PM

I've decided that IE sucks.

I'm trying to build a personal blog for myself and I had this idea to have the basic nav slide down from the top. The site is CSS/fixed-width (750px).

The div that should slide down needs to be at the tp right of the main centered div. I can get it working in Opera and FF, but IE is just a nightmare. The div will eventually slide using ajax or dhtml or something, but not if I can get this thing working in IE. If I can't I'm going to have to scrap the whole idea, which will piss me off.

Anyway, here is a link to what it looks like:

http://www.thenormshow.com/template.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>theNORMshow</title>
<meta name="keywords" content="" />
<meta name="description" content="another dumbass blog" />
<meta name="distribution" content="global" />
<meta name="robots" content="index,follow" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="window-target" content="_top" />
<link rel="shortcut icon" href="/favicon.ico" />
<style type="text/css">
<!--
body {background: #000000; margin: 0px; padding: 0px; font-family: arial; font-size: 12px; line-height:17px; text-align: center;}

a:link {text-decoration: none; color: #365BB3}
a:visited {text-decoration: none; color: #365BB3}
a:hover{text-decoration: underline; color: #365BB3}
a:active {text-decoration: none; color: #365BB3}

.mainwrapper {width: 750px; height: 850px; background: #000000 url(graphics/bg.jpg) no-repeat top; border: solid 1px #cccccc;}
.header {width: 750px; height: 298px;}
.theNORMshow {float: left;}
.quote {float: right; padding: 130px 130px 0px 0px;}
.drop-down {position: absolute; display:inline-block; margin-left: auto; margin-right: auto; float: right; text-align: right;
top: 0px; width: 750px; height: 305px; background: url(graphics/drop-down.png) no-repeat right;  border: solid 1px #cccccc;}
.navcontent {background: url(graphics/down-cover.jpg) no-repeat right; height: 250px; width: 378px; text-align: right; margin-left: 363px; margin-right: 9px; border: solid 0px #cccccc; }
-->
</style>
</head>
<body>


<div align="center"><div class="mainwrapper">

<div align="right"><div class="drop-down"><div class="navcontent">test</div>Click here</div></div>

<div align="left"><div class="header"><div class="theNORMshow"><img src="graphics/theNORMshow.jpg" width="272" height="298" alt="" border="0" /></div><div class="quote"><img src="graphics/quote.png" width="270" height="87" alt="" border="0" /></div></div></div>


</div></div>


</body>
</html>

The problem seems to be with the fact that in order to have the div hide, I made it position:absolute so I could make the top margin a - number. Is there a way to get the IE probelm fixed or is there another way to handle this all together?

**jscheuer1** · 02-03-2007, 05:20 PM

IE was a headache when I developed this menu:

http://www.dynamicdrive.com/dynamici...lide/index.htm

You should check it out. It can slide in from top, left, or right, or all three and can be used multiple times on a page. You would probably just want the one menu from the top. If so, just delete the other two from the demo's menuItems.js file.

Thread: DIv problems with IE

Thread Tools

Search Thread

DIv problems with IE

Bookmarks

Bookmarks

Posting Permissions