8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Relative and absolute positioning problem

by Laura B
7 replies
  • WEB DESIGN
    • |
Trying to position some text right above the header, but when I resize the browser window the position is lost. Shouldn't this code work? It works on another site of mine.

.custom #header {
position: relative;
}

#text {
position: absolute;
top: 80px;
left: 625px;
font: verdana;
font-size: 12px;
}
#absolute #positioning #problem #relative
  • Profile picture of the author theIMgeek
    Hello again, Laura!

    My first guess, if you copied this CSS code from one site to another, is that the ids and classes on your HTML page are structured differently.

    For this CSS to work, it's referring to an element with id="header" INSIDE of an element with class="custom"

    And for the element with id="text" to be positioned relatively, it must be inside the element with id="header".

    So, in plain speak, the CSS code might be right, but the HTML of your page might be wrong.

    -Ryan
    Signature
    FREE WSO: Protect and Automatically Deliver Your Digital Products

    Ask the Internet Marketing Geek     <-- Happy to help with technical challenges
    MiniSiteMaker.org <-- Free software to make your mini-sites fast and easy
    {{ DiscussionBoard.errors[3649344].message }}
  • Profile picture of the author Laura B
    Hi Ryan! Thanks for helping me out again.

    I kind of understand what you're saying, but I am still not sure why it doesn't work. The two sites are set up the same, as far as I know, so it seems like it should work the same. They're WP sites with the Thesis theme. I uploaded the header for each the same way and didn't do any other customization to either. I'm putting the CSS in the custom.css file the same way for both.

    Actually, in the site that's working, there is no

    Code:
    .custom #header {
position: relative;}
    but in a third site of mine that also works, I used the same CSS again, and that one does include the above code.

    Does that give you any ideas where I might be going wrong?
    Signature
    Free ebook: Affiliate Marketing: Just the FAQs
    Affiliate marketing for brand spankin' newbies
    {{ DiscussionBoard.errors[3649466].message }}
  • Profile picture of the author theIMgeek
    I'm unable to offer any more help without seeing the sites in question.

    If you'd like to send me a PM with the site URL that has the problem, and perhaps one of the working sites, then I can take a quick peek and see what's up.

    -Ryan
    Signature
    FREE WSO: Protect and Automatically Deliver Your Digital Products

    Ask the Internet Marketing Geek     <-- Happy to help with technical challenges
    MiniSiteMaker.org <-- Free software to make your mini-sites fast and easy
    {{ DiscussionBoard.errors[3650110].message }}
  • Profile picture of the author Laura B
    Thanks so much, PM coming your way.
    Signature
    Free ebook: Affiliate Marketing: Just the FAQs
    Affiliate marketing for brand spankin' newbies
    {{ DiscussionBoard.errors[3650523].message }}
  • Profile picture of the author Laura B
    Well, except for one tiny thing. We added this code to make the subscribe button and text relative to the page instead of to the header on this site: mi-trale.org

    #page {
    position: relative;
    }

    Problem is, that makes the entire site disappear in IE. Yes.

    If anyone who knows IE's quirks has any ideas on how to change this CSS, I would very much appreciate it. To even see the text and button I'm talking about, though, you have to view it in Firefox or Safari.

    The other issue is that the upper nav menu is floating in mid-air above the header in IE, but that's secondary to the biggest problem. I've been searching but I can't figure out how to fix either issue.
    Signature
    Free ebook: Affiliate Marketing: Just the FAQs
    Affiliate marketing for brand spankin' newbies
    {{ DiscussionBoard.errors[3656555].message }}
    • Profile picture of the author Laura B
      Now I've changed it to

      #container {
      position: relative;
      }

      and that allows the site to be visible in IE, except that the text and button I'm trying to position are nowhere to be seen. At least I'm one step in the right direction...
      Signature
      Free ebook: Affiliate Marketing: Just the FAQs
      Affiliate marketing for brand spankin' newbies
      {{ DiscussionBoard.errors[3656861].message }}

Trending Topics