PDA

View Full Version : overflowing divs in Opera 6

dauvm
10-09-2002, 01:41 AM
Hey everyone...

I am trying to recreate a page using CSS and XHTML. The origional page is here (http://www.thecourtyardcafe.biz/index.html).
... and what I've got of the new version is here (http://www.thecourtyardcafe.biz/new/index.html) and the style sheet (http://www.thecourtyardcafe.biz/new/styles/main.css) 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 (http://www.thecourtyardcafe.biz/new/content.html) 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
dauvm
10-10-2002, 03:32 PM
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...
AnOdeToNoOne
10-10-2002, 04:16 PM
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
dauvm
10-11-2002, 12:58 AM
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.
MCookie
10-11-2002, 01:03 AM
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.

<!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>
dauvm
10-11-2002, 03:45 AM
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
MCookie
10-11-2002, 07:49 AM
Forgot a bug or two..
Win/IE5 renders dotted borders as solid and Win/IE6 renders a 1px dotted border as dashed...