CSS positioning problem

  • I’m having one hell of a problem. I’m trying to position 3 or 4 text links in different spots in my header.

    I’m using IDs/classes that are relatively / absolutely positioned. (I’ve tried both.) Basically, the first two “aligned links” work fine. When I add another one though, Firefox doesn’t align it correctly at all. It either a) sits next to one of the others, like it’s on the same line, with no spacing / position attributes, or b) sits in the top left part of the header area, like it has no position attributes.

    I’ve tried nesting the divs/spans, not nesting them, everything. It just won’t work. Ironically, it displays perfectly in IE.

    You can view what I’m talking about at:

    https://www.joshteeters.org/index.php?wptheme=DXX

Viewing 4 replies - 1 through 4 (of 4 total)

  • What happens when you have them as:

    #archmen {
    position: absolute;
    top: 15px;
    left: 650px;
    }

    #aboutmen {
    position: absolute;
    top: 35px;
    left: 675px;
    }

    #contactmen {
    position: absolute;
    top: 50px;
    left: 700px;
    }

    The container header div has enough height, although you have header defined twice in your CSS so try consolidating those.

    Josh, you don’t need to relatively or absolutely position anything. Just put the links in a list and float the linklist to the right (which is where I assume you want it) and, if you want to put the list items so they’re somewhat at a diagonal over that black area, just give each li a different class with different padding/margin set. Make sure to set a width on your floated element. You may need to “clear” it by using a br after the floated element. If it needs more clearing than that, check here:

    https://css-discuss.incutio.com/?page=ClearingSpace

    I did try to view what you are trying to do, but IE seems to be showing something completely different. In IE the header color scheme is gray and the sidebar column is on the left, and in FF the header color scheme is green and the sidebar column is on the right.

    Oh, and I did peek at the source code in the FF version, and there are some problems in the code. I ran it through the validator at w3.org and it’s minor stuff, but it should be straightened out. FF will always work better with clean code.

    Thread Starter joshteeters

    (@joshteeters)

    Kickass,

    Thanks! I’ll try that. Is there any reason why what I was trying to do won’t work in FF? It works fine in IE.

    Thread Starter joshteeters

    (@joshteeters)

    Hm. I put a list in a div, which is set to float: right. The list does this in IE.

    In FF, the list just sits as it would without the float: on the far left side of the header area, with a slight indent.

    Also, I cleaned up the validation errors. The only one that I don’t get is the one that says that I have a li item without a ul / ol. When I ADD a ul, it just generates MORE validation errors.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘CSS positioning problem’ is closed to new replies.

Tags