Avatar of Rowby Goren
Rowby GorenFlag for United States of America

asked on 

Absolute positioning is being overridden by somethingie

Please look at this page:

http://rowby.com/demo/new-index.html

Specifically the right column.

I'm revising a site built by someone else -- and need to figure out why the division called "thirdcolumn" insists on being high on the page, even though locally I have moved it down lower in the page, so that a new piece of text can be on the top.

You can see the overlap.  Something is overriding my "div"...  It looks fine locally -- until I preview it in Dreamweaver or ftp it to the server.

I've searched the (rather large) site and found three places where the word "thirdcolumn" appears.Two  of them are in  external style sheets. And one is an external javascript file.  

Basicaly I would like to just use absolute positioning to place "thirdcolumn" wherever I want on the page. (I need to stick with absolute positioning, on this site for various reasons.)

The javascript is short.  Here is the complete external script and it's named: navbar_height.js    

--- start of javascript file below----


function setHeight() {
  var content2H;
  var content3H;
  var thirdH;
  var navbarH;
  if (document.getElementById) {
    if (document.getElementById('content2')) {
      content2H = document.getElementById('content2').offsetHeight;
    } else {
        content3H = document.getElementById('content3').offsetHeight;
        thirdH = document.getElementById('thirdcolumn').offsetHeight;
    }
    navbarH = document.getElementById('navbar').offsetHeight;
    if (content3H) {
      if (content3H>=thirdH) {
        newH = content3H;
      } else {
          newH = thirdH;
      }
    } else {
        newH = content2H;
    }
    if (newH>navbarH) {
      changeH = newH -navbarH;
      document.getElementById('navbar').style.height = navbarH+changeH+'px';
    }
  }
}

----- end of javascript file


Below is the relevant snippet from external stylesheet #1:  NAMED styles.css

----- end of snippet   ---

#thirdcolumn { /* Right column on 3 column pages. */
  left : 576px;
  position : absolute;
  top : 274px;
  width : 193px;
}

----- end of snippet   ---

HEre is the relevant snippet from the second stylesheet: styles.css:

---- start of styles.css snippet ---

#thirdcolumn { /* Right column on 3 column pages. */
  left : 585px;
  position : absolute;
  top : 92px;
  width : 193px;
}

---- end of styles.css snippet.

Any help appreciated!

Thanks!
CSS

Avatar of undefined
Last Comment
Rowby Goren
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

P.S. I don't think " navbar_height.js" is causing the problem because I renamed it to "navbar_height-renamed.js" locally and on the server and it doesn't seem to make a difference,.
ASKER CERTIFIED SOLUTION
Avatar of arantius
arantius

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Rowby Goren
Rowby Goren
Flag of United States of America image

ASKER

Thanks that fixed it
CSS
CSS

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

43K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo