Hi Folks,
I have an absolutely positioned div in a relatively positioned div which is
also floated left (see #sn_hdr_wrap and #sn_login-info). I am working with HTML
that I CAN NOT touch but have to be able to reposition. It's fine in Windows
FF, haven't tested IE7 nor Mac Safari/FF yet. Now I have a similar situation
further down in the HTML (see #topnav_right and #topnav_right_bottom) but this
one is no problem and works just fine in both browsers and I'm assuming will be
fine in the rest of the other browsers as well.
I think part of the problem with the former is that I'm having to position a
very nested div that's further down in the HTML and make it look as if it were
structured previously in the HTML but again it's not a problem in FF. I can't
provide a URL because the servers are locked @ company I work for but let's see
if I can replicate a stripped out snippet of the HTML so you guys can see what
I have to work with:
HTML Snippet:
<div id="sn_hdr_wrap">
<div id="sn_header">
<div id="ads_728"> ></div>
<div id="sn_global-bar">
<div id="sn_login-info">
</div>
<div id="topnav_left">
<a href="/" title="Home" id="JLG_logolink">Back home to Jay
Leno's Garage</a>
</div>
<div id="topnav_right">
<div id="topnav_right_top"></div>
<div id="topnav_right_bottom"></div>
</div>
</div>
</div>
</div>
CSS Snippet:
/*------------------------------- [PAGE STRUCTURE]*/
#sn_wrap{/* entire content container */
width: 971px;
text-align: left;
margin: 0 auto;}
#sn_hdr_wrap {/* entire header container */
position: relative;
float: left;}
#sn_main-body {/* main page content container */}
/*------------------------------- [HEADER]*/
#sn_header {background: #303133
url('/themes/jlg/images/backgrounds/sn_hdr_wrap_grad_bkg.jpg') repeat-x;
padding: 8px 0 5px;
float: left;}
#ads_728 {float: left;
width: 728px;
margin-left: 6px;
display: inline;}
#sn_global-bar {margin-top: 5px;
border-top: 1px solid #000;
background: url('/themes/jlg/images/topnav/sn_glbl_bar_bkg.jpg')
no-repeat;
float: left;
width: 971px;
border-bottom: 1px solid #FFF;}
#sn_login-info {position: absolute;
top: 8px;
right: 0;
width: 234px;
height: 88px;
background: #28292a;
border: 1px solid #000;}
#topnav_left {float: left;
width: 277px;
height: 108px;}
#topnav_right {float: left;
position: relative;
width: 694px;
height: 107px;}
/* Don't think I'll Need ----
#topnav_right_top {float: left;
background: red;
width: 694px;
height: 72px;}*/
#topnav_right_bottom {position: absolute;
bottom: 0;
left: 0;
width: 694px;
height: 35px;
background: #FFF;}
Hoping someone can provide an answer/solution :).
TIA,
Elli
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
