Topic: Simple Newbie Question...CSS Absolute Div not displaying correctly

Hi All,

First post here...

Just getting back into the design thing since I can't seem to find a job with my MBA...anyway enough of the negativity. I have a question for anyone that is up to helping me solve my simple problem that I can't seem to figure out. I am designing a site for a local strip mall. I can't get some copy to display in one of the divs with absolute positioning on it...and can't figure out why??? If I post the code or the site, would you guys be willing to help? THANKS!

-Chris

HTML STARTS HERE=============>

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Welcome to Georgetown Square :: Main - Fort Wayne, IN 46815</title>
<link href="/style/global.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="divWrapper">
    <div id="divHeader">
        <div id="divHeaderTopNav">
          <ul>
            <li><a href="/employment/index.html">Employment</a></li>
            <li><a href="/leasing/index.html">Leasing</a></li>
             <li><a href="/general/index.html">General Information</a></li>
          </ul>
         </div>
        <div id="divAddress">6344 E. State Blvd.&nbsp;&nbsp;•&nbsp;&nbsp;Fort Wayne, IN 46815&nbsp;&nbsp;•&nbsp;&nbsp;260-493-9199</div>
         <div id="divHeaderBottomNav">
           <ul>
             <li><a href="/directory/index.html">Store Directory</a></li>
              <li><a href="/events/index.html">Store Events</a></li>
             <li><a href="/promotions/index.html">Promotions</a></li>
             <li><a href="/media/index.html">Media</a></li>
             <li><a href="/directions/index.html">Directions</a></li>
             <li><a href="/contact/index.html">Contact Us</a></li>
           </ul>
          </div>
    </div>
     <div id="divContentWrapper">Content for  id "divContentWrapper" Goes Here
        <div id="divPhotoSplash">Content for  id "divPhotoSplash" Goes Here</div>
         <div id="divRightSideNav">Content for  id "divRightSideNav" Goes Here</div>
          <div id="divMainContent">Content for  id "divMainContent" Goes Here</div>
     </div>
     <div id="divEndNav">Content for  id "divEndNav" Goes Here</div>
  <div id="divFooter">All Contents &copy;&nbsp;Copyright 2009&nbsp;&nbsp;•&nbsp;&nbsp;Georgetown Square<br />
    Site design - Chris A. <a href="mailto:chris@cspurr.com?subject=Georgetown Square Inquiry" title="Send an email to Chris A. Spurr">Spurr</a>    </div>
</div>
</body>
</html>

STYLE STARTS HERE=============>

* {
    padding:0px;
    margin:0px;
    border:0px;
}

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:18px;
    font-size:12px;
    color: #5c5c5c;
    background:url(/images/tile046.jpg);
    margin: 0px;
    padding: 0px;
}

#divWrapper {
    margin:0px auto;
    width: 760px;
    height: 1000px;
    padding: 0px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}

#divHeader {
    background: url(/images/header4.jpg) no-repeat center top;
    height: 150px;
    width: 760px;
    border-top:none;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

#divHeaderTopNav {
    width: 100%;
    height: 150px;
    float: right;
}
#divAddress {
    clear:both;
    text-align: right;
    height: 20px;
    width: 400px;
    overflow: hidden;
    position: fixed;
    z-index: 1000;
    top: 125px;
    right: 43px;
    font-size: 0.9em;
    float: right;
}


#divHeaderTopNav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#divHeaderTopNav ul li {
    display: inline;
}

#divHeaderTopNav ul li a {
    font-size: .9em;
    color: #5C5C5C;
    text-decoration: none;
    padding: 0px;
    float: right;
    margin-right: 45px;
}

#divHeaderTopNav ul li a:hover {
    border-bottom: 3px solid #b55c56;
}

#divHeader h1 {
    display: none;
}

#divHeaderBottomNav {
    border-top: 2px solid #e66d5a;
    border-bottom: 2px solid #e66d5a;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 20px;
    clear: both;
}

#divHeaderBottomNav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#divHeaderBottomNav ul li {
    display: inline;
}

#divHeaderBottomNav ul li a {
    color: #444444;
    text-decoration: none;
    font-size: 12px;
    float: left;
    padding: 0px 10px 0px;
    display: block;
    height: 20px;
    margin-left: 32px;
}

#divHeaderBottomNav ul li a:hover {
    color: #e66d5a;
    text-decoration: none;
}
#divFooter {
    text-align: center;
    font-size: 0.8em;
    border-top: 1px solid #CCCCCC;
    width: 60%;
    margin-left: 152px;
    clear: both;
}

#divFooter a {
    text-decoration: none;
    color: #5c5c5c;
}
#divFooter a:hover {
    text-decoration: underline;
    color: #5c5c5c;
}

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

Sorry, I forgot to tell the the bit that is giving me problems is the #divAddress...I can't get it to show up. Not sure what I am doing wrong?

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

I can't see any pos:ab;!  There's a pos:fixed; on #divAddress wink  If you can link to the site it would be easier, then we can play in firebug! (and not remake the page)

A quick guess, try putting a lower z-index on #divHeader, the address might being hidden under the image...

James Cooper --  God loving, banjo playing, geek!

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

ok, I got it in FireFox with FireBug, but now it still won't display in IE7...man!

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

thanks for your reply by the way...it was fixed...I changed it to absolute...totally sorry about that.

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

let me see if I can get it up on a site for all to look at...

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

http://www.cspurr.com/webprojects/georgetown/

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

to save you all some effort, here is the new style...thanks. The site is in the EARLIEST stages of development - so please don't expect much yet. Thanks for your help. #divAddress is still causing me some probs. Can't see it in IE7 - looks fine in Firefox.

* {
    border:0px;
}

body {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    line-height:18px;
    font-size: 12px;
    color: #5c5c5c;
    background:url(/webprojects/georgetown/images/tile046.jpg);
    margin: 0px;
    padding: 0px;
}

#divWrapper {
    margin:0px auto;
    width: 760px;
    height: 1000px;
    padding: 0px;
    background: #FFFFFF;
    border: 1px solid #CCCCCC;
}

#divHeader {
    background: url(/webprojects/georgetown/images/header4.jpg) no-repeat center top;
    height: 150px;
    width: 760px;
    border-top:none;
    border-right: none;
    border-bottom: none;
    border-left: none;
}

#divHeaderTopNav {
    width: 100%;
    height: 150px;
    float: right;
}
#divAddress {
    position: absolute;
    z-index: 1000;
    top: 132px;
    font-size: 10px;
    padding-left: 366px;
    color: #B7B7B7;
}


#divHeaderTopNav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}

#divHeaderTopNav ul li {
    display: inline;
}

#divHeaderTopNav ul li a {
    font-size: 10px;
    text-decoration: none;
    padding: 0px;
    float: right;
    margin-right: 45px;
    color: #5c5c5c;
}

#divHeaderTopNav ul li a:hover {
    border-bottom: 3px solid #b55c56;
}

#divHeader h1 {
    display: none;
}

#divHeaderBottomNav {
    border-top: 2px solid #e66d5a;
    border-bottom: 2px solid #e66d5a;
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    height: 20px;
    clear: both;
}

#divHeaderBottomNav ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
}
#divHeaderBottomNav ul li {
    display: inline;
}

#divHeaderBottomNav ul li a {
    color: #444444;
    text-decoration: none;
    font-size: 12px;
    float: left;
    padding: 0px 10px 0px;
    display: block;
    height: 20px;
    margin-left: 32px;
}

#divHeaderBottomNav ul li a:hover {
    color: #e66d5a;
    text-decoration: none;
}
#divFooter {
    text-align: center;
    font-size: 0.8em;
    border-top: 1px solid #CCCCCC;
    width: 60%;
    margin-left: 152px;
    clear: both;
}

#divFooter a {
    text-decoration: none;
    color: #5c5c5c;
}
#divFooter a:hover {
    text-decoration: underline;
    color: #5c5c5c;
}

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

Have you tried putting a z-index on #divHeader? I still think it might work!!!

James Cooper --  God loving, banjo playing, geek!

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

Yes, just tried that...didn't help at all. Still can't see it.

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

I put a z-index of 100 on #divHeader and still can't see #divAddress...I have no idea what is going on? Weird - I must not understand the Cascade or specificity very well. will keep tweaking around with it...if you happen to figure it out, please let me know. It is beginning to drive me bonkers.

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

Here is a more updated version of the site...

http://www.cspurr.com/webprojects/georgetown/

Still can't figure out the #divAddress bit though. Don't know why I can't see it in IE7.
Besides the #divAddress, looks clean in IE7, Firefox, and decent (slight header alignment issues) in Safari.

Please let me know if any of you can figure out what is up with the #divAddress bit in IE7.

Talk to you all later,
-Chris

Re: Simple Newbie Question...CSS Absolute Div not displaying correctly

Think I figured out the problem...I moved #divAdress outside of #divHeader. I didn't update the one on my site though because I didn't want to change the paths. Talk to you all later. I thought this was a discussion forum...looks like I am talking to myself an awful lot. yikes)