SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    positioning problem between ie and firebird

    hi all
    i've got this positioning bug on my site http://dtra.sonnexh.com
    it's the navigation bar across the top
    my stylesheet says

    position: relative;
    top: -11px;

    that works for firebird but not ie
    if i take the top line out (and maybe the position), it works for ie but not firebird

    it's in a list at the moment, which is causing the most problem at the moment i think
    when i take it out of the list, it works in both
    i prefer it being in a list, any ideas or suggestions
    should i:
    • get rid of the list? or
    • fix the css so that it works (if possible, obviously this is preferred)?
    the stylesheet is located at http://dtra.sonnexh.com/styles.css

    thanks for any help
    dave
    Last edited by dtra; Nov 5, 2003 at 18:04.

  2. #2
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Your problem is this line of code
    HTML Code:
    <p><a class="skipLink" href="#content">Skip navigation</a></p>
    although you have switched off the display of the <a> the <p> is still being displayed. Change it to
    HTML Code:
    <p class="skipLink"><a class="skipLink" href="#content">Skip navigation</a></p>
    and remove the
    Code:
    position: relative;
    top: -11px;
    from your classes.

    From my experience if you are having to resort to negative top margins then something else is wrong.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your reply
    i'll have a look at that
    hopefully it'll work

  4. #4
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    I think it is basically a positioning problem. I would put some top padding into your log-in paragraph. However before I did that, there are several changes I would make in your css. Have you tried using em's or percentages for font-sizes? Both px and points display differently in different browsers and at different resolutions.

    I also am not much into negative positioning (-11px) and I guess I don't understand what good that is doing your page.

    Another solution could be to create an image map with the blue bar and the navigation text.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  5. #5
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Shyflower
    Another solution could be to create an image map with the blue bar and the navigation text.
    Image maps ---- Bad! (or at least frowned upon).

    They mean nothing to a screen read or other accessability orientated browser.

  6. #6
    SitePoint Evangelist
    Join Date
    Mar 2003
    Location
    Melbourne, Australia
    Posts
    463
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok guys
    thanks for your replies
    what ben has suggested worked
    and i'll look at em's, but i seem to get different sizes for them
    and i think they were messing with other styles i had
    but i'll definitely see if i can use em's instead of px's

    and yeah, i would prefer to stay away from image maps
    haven't used one for a few years, and don't really want to go back

  7. #7
    SitePoint Addict BenANFA's Avatar
    Join Date
    Apr 2003
    Location
    Bath, UK
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are going to use em's (and I do) the consensus of opinion seems to be that setting a % size on you body element makes them work better (especially in IE). Even if you use 100%.

    For example

    Code:
    body {
      font-size: 100%;
    }
    
    h1 {
      font-size: 2em;
    }
    
    p {
      font-size: 1em;
    }
    
    p.footnote {
      font-size: 0.8em;
    }
    Another advantage of this is that if you decide that the fonts are generally too big or too small you can adjust all of them just by changing the body font-size percentage.

    See http://www.thenoodleincident.com/tutorials/typography/ and the 264 screen shots for more info

  8. #8
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by BenANFA
    Image maps ---- Bad! (or at least frowned upon).

    They mean nothing to a screen read or other accessability orientated browser.
    I don't use image maps either, but in the case of this page where there were so many conflicts, an image map would have been one "quick fix" for the navigation bar problem.

    With the negative positioning, I don't think the page will present well to accessbility oriented browsers anyway. However, I'm glad the suggestion you offered worked.
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown

  9. #9
    Word Painter silver trophy Shyflower's Avatar
    Join Date
    Oct 2003
    Location
    Winona, MN USA
    Posts
    10,054
    Mentioned
    142 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by BenANFA
    If you are going to use em's (and I do) the consensus of opinion seems to be that setting a % size on you body element makes them work better (especially in IE). Even if you use 100%.
    Excellent suggestion!

    I generally use percentages for font-size and em's for top and bottom margins and padding, but I like the idea of setting the font-size in the body. I think this will solve some of my problems in making my cascade present correctly. Although the initial post wasn't mine... Thanks!
    Linda Jenkinson
    "Say what you mean. Mean what you say. But don't say it mean." ~Unknown


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •