Header width in opera

vividona

Hi guys,

please check this :

@charset "utf-8";
html { padding:0; margin:0;}
body { 
	margin: 0; 
	padding: 0;
	background:#A5DDF8 url(images/main_bg.png) top repeat-x;
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	/*direction: rtl;*/
}

#wrapper {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	border: 1px solid #fff;
}

#head {
	margin: 0 auto;
	width:966px;
}

#loginInfo{
	width:400px;
	float: right;
	clear: left;
	border: 1px solid #b30f0e;
	font: normal 0.7em Tahoma, Geneva, sans-serif;
	color: #fff;
}

the problem is in opera:
the width of (head div) is 100% I need it to be 966px. I don't need it to be full screen.

johanafm

The above is css code which can be used to display a 966px wide div, assuming the div is there, has the right id, the html document is valid, no other stuff overrides these settings and probably a whole lot of other things that could interefere.

But there is no div, just css code, so it can be neither 966px wide, nor 100% wide.

dalecosp

Does Opera play nice with "max-width: 966px;" ?

johanafm

Both width and max-width both works in Opera, assuming the rest is ok as well. For example

#head
{
	margin: 0 auto;
	border-width: 1px;
	border-color: black;
	border-style: solid;
/* using either width or max-width works just fine */
	width: 966px;
}
</style>
</head>
<body>

<div id="head">
	This is #head. It is centered left-right due to auto margins, and has a 966px
wide box, as shown by the border.
</div>

But if the rest isn't correct, and also not included in the original post, there's no telling what would or should happen. Among other things id could be missing on misspelt, or invalid html code could mean the browser force closes the element before the author intended. And there are probably a hundred or so other possible errors.

For example using the same stylesheet with garbage html

<p id="head">
	<p id="not_head" style="border: 1px solid red;">
	This is (not) #head
	</p>
</p>

This would show a 0x966px paragraph with black border followed by a 100% wide paragraph with text "This is (not) #head" and a red border, since it translates into this html

<p id="head"></p>
	<p id="not_head" style="border: 1px solid red;">
	This is #head (not...)
	</p>