Click to See Complete Forum and Search --> : Positioning Issue
jobowoo
09-28-2006, 01:12 PM
Hello,
I'm currently working on a project for IE and I'm having trouble with a couple of my Divs.
Example (http://www.3e-motivations.com/test/test.html)
If you're using IE, you should see 'asdf' down in the bottom right corner. I want that to be placed to the top left. Right now the Div controlling 'asdf' is the class 'textual'. Does anyone know how to remedy the problem? Thanks.
House of Haus
09-28-2006, 01:18 PM
I don't see 'asdf' anywhere in IE or Firefox.
jobowoo
09-28-2006, 01:30 PM
I don't see 'asdf' anywhere in IE or Firefox.
Screenshot (http://www.3e-motivations.com/test/here.jpg)
House of Haus
09-28-2006, 02:12 PM
OK, I see it now. I had to hit F11 to go to fullscreen mode to see it.
I am looking over your source code and I am having a little trouble figuring out what you are trying to do. Why is the whole page in a table? Do you want the lighter grey area on the right to be the content section? Try floating the nav area to the left and letting the right section position itself accordingly.
Something like this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<meta name="MSSmartTagsPreventParsing" content="true">
<title>NorthPoint Data Inc.</title>
<style type="text/css">
body{color:#000; background-image: url(bg.gif);margin:0;padding:0}
.left {background-image: url(left.jpg)}
.right {background-image: url(right.jpg)}
.content {background: white; padding:0px; margin:0px}
.inside {background: #737373; margin-left: 5px; margin-right: 5px; height: 100%; display:block}
.divide {background: white; height: 4px; overflow: hidden}
.nav {background: #555555; border-right: 4px solid #fff; border-bottom: 4px solid #fff; width:140px; height: 80%; padding-top: 20px; float:left;}
.nav a {padding-top: 3px; padding-bottom:3px; text-decoration: none; width: 140px; display: block; background: transparent; color: white; padding-left: 10px; font-family: Verdana; font-size: 12px}
.nav a:hover {text-decoration: none; font-weight: bold; background: white; color: #b00400;}
.textual {display: block; vertical-align: top; }
</style>
</head>
<body>
<div class="inside">
<img src="header.jpg" style="display:block; padding:0px; margin:0px;" />
<div class="divide"></div>
<div class="nav">
<a href="http://www.yahoo.com">About Us</a>
<a href="http://www.yahoo.com">Technology Solutions</a>
<a href="http://www.yahoo.com">Home</a>
<a href="http://www.yahoo.com">Contact Us</a>
<a href="http://www.yahoo.com">Careers</a>
</div>
<div class="textual">
asdf
</div>
</div>
</body>
</html>