SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot jca's Avatar
    Join Date
    Mar 2002
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post Content Overflowing Boxes?

    Making the move from HTML tables to an all CSS layout. [ouch]

    Having a problem with my content overflowing out of the boundries of box I'm using to border the content of the site.

    You can see an example (as I see it in Mac IE 5.1 OS X) here:



    The ARCHIVE BY MONTH right "links" menu flows outside the two CSS boxes that create the black/grey border of the entire page.

    Snippets of relevant CSS:


    #box {
    background-color:#FFFFFF;
    color:#00000;
    border:10px solid #00000;
    padding-bottom: 15px;
    margin-top: 25px;
    margin-bottom: 0px;
    margin-right: auto;
    margin-left: auto; /* opera does not like 'margin:20px auto' */
    text-align:left; /* part 2 of 2 centering hack */
    width: 640px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 630px;
    padding-bottom: 0px;
    }

    #box2 {
    background:#FFF;
    color:#CCCCCC;
    border:3px solid #999;
    padding:0px;
    margin-bottom:0px;
    padding-bottom:0px;
    voice-family: "\"}\"";
    voice-family:inherit;
    padding-bottom:0px;
    }

    #links {
    position:absolute;
    margin-left:405px;
    top:395px;
    width:205px
    background:#FFF;
    color:#CCC;
    margin-top:10px;
    }



    I'm sure it has to do with "position:absolute" for the right menu links, but every other setting (including "float:right") renders incorrectly.

    What am I missing in CSS?

    I'm pretty green when it comes to CSS and HTML in general, for that matter. I've been looking at all the reference sites, but can't seem to solve this problem.

    Can anyone offer any help/info?

    Thanks!

    -jca

  2. #2
    SitePoint Zealot t0m|ta's Avatar
    Join Date
    Mar 2002
    Location
    Madrid - Spain
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm struggling myself with my page to get rid of tables, probably some guru's here will give you more help, I can give you some usefull links:



    -CSS Web log, all kinds of links, templates, tutorials...
    -Box lessons

    Content placement issues

    Hope this is usefull, best regards

  3. #3
    Prolific Blogger silver trophy Technosailor's Avatar
    Join Date
    Jun 2001
    Location
    Before These Crowded Streets
    Posts
    9,446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What are you using to create the black/grey border? Is that a Div? Tables aren't all bad you know. I use a 80/20 method in my sites...80% CSS layers and 20% tables. You kind of have to to ensure compatibility. I recommend creating a table with the black and grey border surrounding it and putting a layer with "relative" positioning inside.

    Sketch
    Aaron Brazell
    Technosailor



  4. #4
    SitePoint Wizard
    Join Date
    Jan 2001
    Location
    Milton Keynes, UK
    Posts
    1,011
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As sson as an element is specified as having position: absolute it gets put into it's own z-index, whicxh means it'll no longer be inline with anything else on a different z-index.

    I'd try again with the float property or failing that do as Sketch suggested and use tables. Boxes alone are miserable at producing columns and sometimes tables are just the best option.

    Have you got the html/page for us to look at?

  5. #5
    SitePoint Zealot jca's Avatar
    Join Date
    Mar 2002
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow More Info...

    I wanted to avoid tables completely - try an all CSS scheme for my weblog/personal site, as it isn't as critical for compatibility as other sites.

    You can see the full HTML page here:

    Content Overflow Example

    The external style sheet being used:

    CSS for Content Overflow Example

    Appreciate all the advice/help/info.

  6. #6
    SitePoint Zealot t0m|ta's Avatar
    Join Date
    Mar 2002
    Location
    Madrid - Spain
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With my extremely modern office equipment (w95, Explorer 5.01 ) it does not overflow, although the right side of the page "looks bottom aligned".

    ┐How's it suposed to look when it's right?

  7. #7
    SitePoint Zealot jca's Avatar
    Join Date
    Mar 2002
    Posts
    166
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bottom aligned?

    Hmm... Is it bad form to keep posting screen shots back and forth in this forum? I can't really imagine what you are seeing on your end.

    Basically, if you take into account the first screenshot I posted at the beginning/top of this forum:

    The webpage is bordered with a 10px black / 3px grey border, with white background content filling inside. (Oh, and leopard skin background outside the boxes. Anyway, the right menu isn't suppose to "overflow" out of the box borders as listed above.

    Or, to put it another way, the two borders are expanding to accomidate the left side content, but not the (longer) right side.

    You're saying it's not doing that on your end?

    One day CSS will be standard across the browsers/platforms and we won't have this problem. :/

    -jca


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
  •