SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2001
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Stylesheet problem

    Hi,
    I am trying to convert a table based layout I usually use to a CSS based one, and I am having a little trouble with what I have done so far. Basically, I have a header bar, a top menu bar and a sub menu bar which follow each other across the page. I have use so far:

    #header {
    background: url("images/headerbak.png" );
    margin: 1px 0px 1px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 88px;
    vertical-align: top;
    border: none;
    }

    #topmenu {
    background: url("images/topmenubak.png" );
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 24px;
    border: none;
    }

    #submenu {
    background: url("images/submenubak.png" );
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 100%;
    height: 24px;
    border: none;
    }

    and in the xhtml file:

    <div id="header"></div>
    <div id="topmenu"></div>
    <div id="submenu"></div>

    Now I am using images for the menus, so that they go in the second and last divs. I am getting problems with IE in that it is not remaining at the correct height. If anyone can help with this problem and tell me what I am doing wrone, I would appreciate it very much. I have attached an image of the problem in this post.

    Umesh
    Attached Images Attached Images
    Last edited by upersad; May 25, 2003 at 20:02.

  2. #2
    SitePoint Member Cyr1dian's Avatar
    Join Date
    May 2003
    Location
    Belgium
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just an idea here, I don't know if it applies in you sitaution:

    I CSS for all my make-up and picture placement as well, I often put pictures as backgrounds so I can still put text over em... What I have found to be most annoying is that if write your HTML like this:

    Code:
    <TD>
      some text
    </TD>
    IE will take up more vertical space then when you do this:

    Code:
    <TD>some text</TD>
    I can't c any of your implementation so I have no idea if applies at all...

    gl,
    Cyr

  3. #3
    Incoherent drivel since 1975 Zopester's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    215
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You might want to try something along the lines of the implementation here: http://www.kalsey.com/tools/csstabs/ (courtesy of zeldman.com).

    This technique uses unordered lists to create the menus and submenus, and has the advantage of degrading gracefully. If you really wanted to be swift, you could combine this with the technique detailed here: http://www.stopdesign.com/articles/css/replace-text/ and have all your <li> text display as images (using the background-image property of CSS).

    Worth a read if nothing else!

    <edit>The background-image technique has its downside, as detailed by the author:
    An apparent critical flaw with this method involves screen readers, such as JAWS, which allow the browser to render the page with screen media styles applied. JAWS "reads" the screen as it is seen in the browser. Since we've hidden the contained text using display:none, it also gets hidden from JAWS. This is further complicated by the fact this method includes no alt text to read in its place. Thus, we need to assume text treated with this method will not get read aloud in JAWS, and possibly other screen readers. As is true with any content-altering technique, the advantages and disadvantages of this method should be carefully considered for each unique case before it is implemented.
    </edit>
    Recommended Reading:
    Why we won't help you - An article by Mark Pilgrim.

    http://www.zopester.com - Coming Soon!

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Now I am using images for the menus, so that they go in the second and last divs. I am getting problems with IE in that it is not remaining at the correct height.
    I think I may be misunderstanding you but if the problem is that there is space at the bottom of the image when you place it in a div then you will need to set the image to display block. (img {display:block;}.

    The default for an image is inline which places it on the baseline (not the bottom) of a div so that there is room for text descenders.

    (You may also need to ensure that there is no top and bottom margins on the div either.)

    I've just answered this question in another thread so it seems a bit of a co-incidence so I've probably got the wrong end of the stick again

    Paul


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
  •