4 replies [Last post]
s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 13 years 8 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

Hi. I'm making a XHTML page that is to have two areas that fills the screen horizontally. To accomplish this i have CSS'd them with "width: 100%;". I have also positioned the DIV's.

This works fine in IE6 (pic) and FiBrd, but my Opera 7.23 stops strecthing the DIV at, in my case, exactly 34px from the border that is opposite of the "position:;" alignment (if i have used "left: Xpx;" it leaves out 34px on the right side, and vice versa, as in this pic.)

Even if i resize/maximize the Opera window, the gap is still 34px.

Here is my webpage (which i have valuated at w3c.org and they liked it):

<?xml version="1.0" encoding="UTF-8"?>
<!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="se" lang="se">

<head>
<title>Tandv&aring;rdsgruppen Dentista</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta http-equiv="Content-language" content="se" />

<meta name="author" content="Johan Olsson" />
<meta name="copyright" content="2004 johanolsson.net" />
<meta name="description" content="Webbsida (c) johanolsson.net" />
<meta name="keywords" content="johan, johanolsson, olsson, olson" />

<meta name="rating" content="general" />
<meta name="generator" content="Fingers and brains" />

<link href="0.css" rel="stylesheet" type="text/css" />
</head>
<body>


<ul>

<li><div id="mitten">Hello world</div></li>

<li><div id="botten">Hello world</div></li>

</ul>

</body>
</html>

...and here is the css file:

body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font: 11px verdana;
	color: #000;
	scrollbar-base-color: white;
	background: url(img/bg01.jpg);
	overflow: hidden;
	}

td {
	font: 11px verdana;
	}

ul {
	list-style-type: none;
	
	}

#mitten {
	position: absolute;
	top: 3%;
	left: 0px;
	height: 75%;
	width: 100%;
	background: url(img/stripe02.png);
	padding: 3px;
	z-index: 20;
	}

#botten {
	position: absolute;
	bottom: 0px;
	right: 0px;
	height: 80px;
	width: 100%;
	background: url(img/stripe01.png);
	padding: 3px;
	z-index: 100;
	}

a:link {
	color: red;
	}

a:visited {
	color: red;
	}

a:hover {
	color: red;
	}

a:active {
	color: red;
	}

Help me help me help me please... thnks / J

Validator.w3.org compels you! Validator.w3.org compels you!

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 38 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

DIV with &quot;width: 100%;&quot; isn't 100% in Opera 7.23

Opera, I believe, is correct.
Your top line <?xml version="1.0" encoding="UTF-8"?> switches IE into quirks mode where the box model is buggy.

If you remove this line you will still validate as XHTML1.0 strict and you will be in standards compliant mode.

The gaps are to do with your divs being in <li></il> tags.

If you just use the divs (no list tags) then the divs will fill the screen. In fact they will overfill the screen because of the 3px padding.

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 13 years 8 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

DIV with &quot;width: 100%;&quot; isn't 100% in Opera 7.23

I'll be a s.o.b... :? i got that "<?xml"-thing from "Web Design in a Nutshell" by Jennifer Niederst (O'Reilly Books) which claims that it is part of a "minimal XHTML document"... hmmmm...

Thanks a lot!!!! Laughing out loud

Btw, in the !DOCTYPE, is "//EN" a declaration meaning "English"? I.e., if i want to tell that the document is swedish, should i use "//SE"? I haven't managed to find an explanation of this...

/J

Validator.w3.org compels you! Validator.w3.org compels you!

Stu
Stu's picture
Offline
Enthusiast
Bristol uk
Last seen: 15 years 38 weeks ago
Bristol uk
Joined: 2004-01-20
Posts: 282
Points: 0

DIV with &quot;width: 100%;&quot; isn't 100% in Opera 7.23

This link gives a breakdown of the doctype ~

http://www.cacr.caltech.edu/~slombey/asci/html/tagpages/d/doctype.htm

It looks line the //EN is English (but there is no alternative).

It's not what you do it's the way that you do it.
So do it with STYLE
http://www.s7u.co.uk

s4ndp4pper
s4ndp4pper's picture
Offline
Regular
Gothenburg, SWE
Last seen: 13 years 8 weeks ago
Gothenburg, SWE
Timezone: GMT+1
Joined: 2004-03-09
Posts: 43
Points: 0

DIV with &quot;width: 100%;&quot; isn't 100% in Opera 7.23

thanksalot Laughing out loud Laughing out loud

Validator.w3.org compels you! Validator.w3.org compels you!