Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 2 FirstFirst 1 2
Results 11 to 16 of 16
  1. #11
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by rosland
    However, the part where IE moves the transparent shadow portion of the banner out of its container, still lingers.
    Finally solved it

    If you have a DIV "A" (containing an image) with an absolute position and a DIV "B" (containing an image) nested inside it, they will display the images side by side, or over/under each other (depending on the browser you view them through.

    If you add [minicode]position:absolute; top:0;[/minicode] to "B", then that DIV will move to the top left corner of DIV "A". The image in "B" will overlap/stack on top of any image contained in "A".
    This is the default behaviour of all the browsers I've tried, except IE!

    IE requires [minicode]left:0;[/minicode] to achieve the same, but now all other browsers will display the images over/under each other.
    If I add both [minicode]top:0px; left:0px;[/minicode], it apperantly works in all browsers.
    S. Rosland

  2.  

  3. #12
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    Hm. Very weird. Sounds like classic IE to me :-P

    As for the margins deal, try getting rid of the  s and then adding the following CSS rule to your file:

    Code:
    #links a
    {
        margin: 0 0.4em;
    }
    And see how that looks. Basically, it handles the spacing between the links and the dividers as margins instead of as spaces in the markup. This means that the markup is still purely structural, while the stylistic element of `I want extra space here' is taken care of in the CSS.

  4. #13
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by Shadowfiend
    Code:
    #links a
    {
        margin: 0 0.4em;
    }
    And see how that looks.
    Strange code, don't understand what it's supposed to do, in spite of your explanation, but I can live with that as long as it works.
    However, it doesn't :-(

    I altered the "#links" as you suggested, and now it all collapses.
    It looks like:
    Link|Link|Link

    instead of
    Link | Link | Link

    ??
    S. Rosland

  5. #14
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    the 0 is the top and bottom margin of your links, the .4 em is the left and right margin. Try setting it higher.
    By the way, not to add to your frustration but I stil see a pretty big scroll bar on the bottom.

  6. #15
    Junior Member theodore_weld's Avatar
    Join Date
    Oct 2008
    Location
    Philadelphia, PA
    Posts
    11
    Member #
    17480
    Have you tried using browsershots (http://browsershots.org/) to confirm your observations?
    Wow. How did I not know about this site? Thanks shadow, that saves me a lot of time.

  7. #16
    Senior Member rosland's Avatar
    Join Date
    Jul 2003
    Location
    Norway
    Posts
    1,944
    Member #
    2096
    Quote Originally Posted by aeroweb99
    the 0 is the top and bottom margin of your links, the .4 em is the left and right margin. Try setting it higher.
    Thanks!
    That made sense, and it works (partially, see further down)
    Quote Originally Posted by aeroweb99
    By the way, not to add to your frustration but I stil see a pretty big scroll bar on the bottom.
    Yes, I just realized that. I have 5 screens at home. All are high resolution, apart from one. I thought that one was 1024 x 768, but it was in fact higher.
    I've tried to reduce the size of the images, and equally the content DIV's. I think they're pretty close to a 1024 screen now, but because of the left margin, they might just exceed it by a fraction. I tried to downscale that margin further, but then the space/air on the left side completely disappered and it looked worse.

    -------

    Another problem:
    The "main.css" file contains the link styles.
    I've been modifying them back and forth, with catastrophc results most of the time. The "#links" declaration contains info that should naturally belong in the "a:link" declaration. If I try to move any of them (font size/color etc), the whole link line breaks down.

    If I leave it as is, then the first two links (including their vertical separation bars) gets squashed together, and they loose their roll-over color as you can see.
    Additionally, these two links gives all kinds of weird results in different browsers!
    (if you don't bother to test, I can examplify by saying sometimes they go purple, sometimes together with an underscore, sometimes both, sometimes only the first one).
    As already mentioned, the space between the text and the vertical bar, also disappers.

    How on earth do I fix that?

    EDIT:
    Actually, it works fine in most browsers (including IE), but in Chrome and Opera they give the result Chrome:collapse, Opera:first link collapse and no-rollover-change)
    S. Rosland


Page 2 of 2 FirstFirst 1 2

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:30 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com