June 30th, 2005, 08:40 PM
|
|
Registered User
|
|
Join Date: Jun 2005
Posts: 1
Time spent in forums: 35 m 34 sec
Reputation Power: 0
|
|
|
Yet another IE/FF Positioning Question
*sigh*
OK, there is probably a really simple solution here, and I am just not seeing it.
I have a three column CSS layout. As usual, looks great in FF< breaks in IE. I don't think I am trying to do anything extraordinary.
http://www.stlbx.com/2005
The nav columns are supposed to flank the content column. But the right nav drops below the left nav. Any ideas? Thanks in advance for any help tossed my way!
CSS:
Code:
body {
background-color: #000000;
margin: 0;
}
.contentWrapper {
position:absolute;
left:118px;
top:10px;
width:524px;
padding: 0 10px 0 10px;
}
.contentMain {
background: url(images/borderback.gif) repeat-y;
width:504px;
}
.leftNav {
position:absolute;
top:40px;
left:30px;
width:118px;
margin:0;
padding:0;
z-index: 1;
position: fixed;
}
.rightNav {
position:absolute;
top:10px;
left:642px;
width:118px;
margin:0;
padding:0;
position: fixed;
z-index: 1;
}
.dropCap {
float: left;
width: 42px;
font-size: 62px;
line-height: 51px;
font-weight: normal;
color:#000000;
font-family: georgia, times;
}
p.bodyText {
font-weight: normal;
color:#FFFFFF;
font-family: georgia, times;
padding: 0 1em;
text-align: justify;
}
.noIndent {
text-indent:0;
}
h1 {
margin:0;
padding: 0 1em;
}
p + p {
text-indent: 1.5em;
margin-top : 0
}
a {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: none;
color: #FFFFFF;
}
a:hover {
color: #000066;
}
.dropPrice {
float: left;
width: 120px;
color:#000000;
font: normal 62px/51px georgia, times;
}
HTML:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>saint louis lindy blues exchange 2005</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="stlbx2005.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="leftNav">
<p class="noIndent" align="right"><a href="events.htm"><img src="images/btn_events.gif" width="76" height="97" border="0" /></a></p>
<p class="noIndent" align="right"><a href="register.htm"><img src="images/btn_register.gif" width="76" height="97" border="0" /></a></p>
<p class="noIndent" align="right"><a href="stlouis.htm"><img src="images/btn_stlouis.gif" width="76" height="97" border="0" /></a></p>
</div>
<div class="contentWrapper">
<div class="contentMain">
<img src="images/bordertop.gif" />
<p align="center" style="margin:0; padding: 0 1em;"><img src="images/logo_stlbx_large.gif" width="311" height="300" /></p>
<img src="images/borderbottom.gif" />
</div>
</div>
<div class="rightNav">
<p class="noIndent"><a href="blues.htm"><img src="images/btn_blues.gif" width="76" height="97" border="0" /></a></p>
<p class="noIndent"><a href="previous.htm"><img src="images/btn_previous.gif" width="76" height="97" border="0" /></a></p>
<p class="noIndent"><a href="contact.htm"><img src="images/btn_contact.gif" width="79" height="108" border="0" /></a></p>
</div>
</div>
</body>
</html>
|
Dev Articles Community Forums Sponsor:
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
