Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation overflowing divs in Opera 6

    Hey everyone...

    I am trying to recreate a page using CSS and XHTML. The origional page is here.
    ... and what I've got of the new version is here and the style sheet for it.

    it looks good like that in mozilla, IE 5.5, and Opera 6.05, and it validates, BUT then I add more content into the <div> and that looks ok in mozilla and IE, but in Opera the <div> just flows over the bottom of the table.

    I have tried replacing the tables with <div>s and doing total CSS layout but that just makes everything messy (shooting off the screen) and it would take me forever to debug it and get everything right again, plus, the overflow still occurs in Opera.

    Is this a known bug in Opera? Is there a workaround?
    I know people are busy but I tried to be as complete as possible so if anyone has time to take a look, I'm really stuck with with one!

    -Doug
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #2
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Still need help with this, if ANYONE has ANY ideas!!
    It would even help if someone could direct me to a page that uses the same type of layout using XHTML (no nested tables) and DOESN'T appear to have this problem in Opera, so that I could figure out how they did it...
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #3
    New Coder
    Join Date
    Jul 2002
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i'll try and look @ it when i go home today.

    Opera dont work w/ these computers or network for some reason, im baffled to say the least.

    but i will look at it.

    just a note though: not all browsers function the same w/ CSS so this could be one of those instances where not all the browsers work alike

  • #4
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks i'd appreciate it... I think I might have to change the way I've laid this out... because with an 800x600 res, things get mushed up and the right hand border compresses... ahhh!

    is there a way to make this layout work in XHTML? I am frustrated that things appear to be so much harder using the NEW standards than they did with the old ones. I mean using CSS to do presentation stuff saves a lot of time but as for positioning... tables just did the trick in a much easier way... I'm frustrated... 'cus I've read everyone CSS tutorial I can find and I am not sure how to do something as simple as this.
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,
    maybe something like this will get you going again. No tables, XHTML1.0 Strict. But you're right, your images should be smaller to make it look good at 800x600.
    And don't set heights if you don't really need to.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>Welcome to the Courtyard Cafe in scenic Downtown Houlton, Maine</title>
    <style type="text/css">
    <!--
    body {
    margin:0px;
    padding:0px;
    background:#fff;
    color:#000;
    }
    #red {
    width:100%;
    margin:20px;
    padding:20px;
    border:1px solid #111;
    background:#b70000;
    }
    #white {
    padding:20px;
    background:#fff;
    color:#000;
    }
    #content {
    margin:20px;
    padding:2% 5%;
    border:1px dotted #111;
    }
    #content p{
    text-align:left;
    text-indent:3em;
    }
    p:first-letter {
    color:#b70000;
    font-size:200%;
    font-style:italic;
    }
    -->
    </style>
    </head>
    <body>
    <div id="red">
    <div id="white">
    <div id="images"><img src="" /><img src="" /><img src="" /></div>
    <div id="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    </div>
    </div>
    </div>
    </body>
    </html>

  • #6
    Regular Coder
    Join Date
    Sep 2002
    Location
    Burlington, VT
    Posts
    125
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up

    Mcookie, thanks SO much! I actually thought I had tried setting it up like that... but I guess I was still thinking in a "tables" frame of mind. This definately got me back on the right track... thanks a bunch.

    -Doug
    "The focused mind can pierce through stone."
    - Japanese Maxim

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    NL
    Posts
    421
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Forgot a bug or two..
    Win/IE5 renders dotted borders as solid and Win/IE6 renders a 1px dotted border as dashed...


  •  

    Posting Permissions

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