Topic: HELP! strange css behaviour in opera and NN6 (Page 1 of 1)

http://www.patricdesign.com/relaunch2002/

Hello everyone!
I've finally decided to get going on my own site. I've made the above all-css and i am quite happy with it so far. The only thing that bugs me is the strange behaviour Opera and NN6 are showing with the background of the center layer.

What am i doing wrong? Where is the bug?

<´¯`·.¸ Patric ¸.·´¯`>

Well, the problem has got to be inside your goldenemitte style sheet. I suspect it's because you're not using the box-model hack. I forget where this is described... someone want to dig out that link?

There isn't anything you're doing wrong. Really!

Paddings are supposed to be *added* to the width of an object (a div), and that's how Opera and Mozilla aka Netsape 6 do it. But IE doesn't. Have a look at www.alistapart.com , they have at least one article about that, you'll just have to search a bit.

As for the solution, it's quite simpe: Put another div into your #goldenemitte (around the text), apply the padding to that one and everything's fixed.

kuckus (cell #282)

There is also a tutorial about it at the gurus network. It is not finnished yet, but it is a very good tutorial about the subject.

the tutorial
the thread about the tutorial




_________________________
Anyone who has lost track of time when using a computer knows the propensity to dream, the urge to make dreams come true and the tendency to miss lunch.

ok, i have tried the box model hack thingy like this:

#goldenemitte {

			position:absolute;

			left:50%;

			top:50%;

			width:740px;

			height:400px;

			/* the width/2 */

			margin-left:-370px; 

			/* the height/2 */

			margin-top:-200px;

			background: url(../images/waffel.gif);

			text-align:left;

			font:11px verdana;

			padding: 10px 29px 28px 10px;

			voice-family: "\"}\"";

			voice-family:inherit;

			margin-top:-210px; 

			margin-right:-29px;

			margin-bottom:-28px; 

			margin-left:-380px;

		}

		body>#goldenemitte {

			margin-top:-210px; 

			margin-right:-29px;

			margin-bottom:-28px; 

			margin-left:-380px;

		}

but no difference. Even omitting the <?XML...stuff didn't make a difference.

the stuff under body># probably looks horrible to you guys but I only just figured out css...

<´¯`·.¸ Patric ¸.·´¯`>

[This message has been edited by patric design (edited 05-23-2002).]

That's not the box model hack. Margins work just as they should in all browsers. What works incorrectly is the width and height; *that's* what you have to put after the voice-family.

I think. Your way might work too, but I'm not sure...

You could also solve the problem without the box model hack, using the method I proposed. Here's an example: http://www.kussatz.com/asylum/pat.html

kuckus (cell #282)

Thanx kuckus! Your method worked just fine, but i got eager to get the box model hack to work.

I've uploaded the new version, so everybody please check out http://www.patricdesign.com/relaunch2002/
It was a bit complicated but now it works fine. HOWEVER, the is one issue remaining: Previewing the file on my local application server, it shows just fine in Opera (6), but previewing it after I uploaded it shows only the text, no background center layer and some erratic behaviour in general. Why is that? And why do Opera and NN6 display different results?

This is the new CSS:

#goldenemitte {

			position:absolute;

			left:50%;

			top:50%;

			width:740px;

			height:420px;

			/* the width/2 */

			margin-left:-370px; 

			/* the height/2 */

			margin-top:-200px;

			background: url(../images/waffel.gif);

			background-repeat : no-repeat;

			/*for layer testing purposes I added a border*/

			/*border : #f90 1px solid;*/

			text-align:left;

			font:11px verdana;

			padding:10px 29px 28px 10px;

			voice-family: "\"}\"";

  			voice-family:inherit;

  			width: 701px;

			height: 362px;

	}

html>body .goldenemitte {

	width : 701px;

	height : 362px;

	}

<´¯`·.¸ Patric ¸.·´¯`>