IT.COM

Mozilla/Firefox (css) width: 100%; issue.

Spaceship Spaceship
Watch
Hi,

I am new to his forum. Trying to play around with CSS and (x)html.

I was trying to make a page layout with css positioning (boxing). This worked OK, in IE6 but when I loaded the same page in Mozilla the Width: 100% does not work at all (it only is 1px wide intead of the full width).

The strange thing is when I validate the code through a css validator it says code is valid.

To clarify I will show you the css code.
Code:
body	{
	position: absolute;
	background-color: #123456;
	color: #FFFFFF;
	margin: 0; /* to prevent IE from screwing up 100% width */
	padding: 0; /* to prevent IE from screwing up 100% width */
	font-family: verdana,Georgia;
	font-size: 14px;
	
}

#header	{
	background-color: silver;
	position: absolute;
	top: 40px;
	left: 0px;
	width: 100%;
	border: 1px solid;
	height: 20px;
}

And HTML code:

Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id=header></div>
</body>
</html>


What am I doing wrong here??
IE works ok, Mozilla/Firefox NOT ok.

BTW, Where did you guys hide the search function for this forum. Could not fin it anywhere.
 
Last edited:
0
•••
The views expressed on this page by users and staff are their own, not those of NamePros.
width: 100% won't work in Opera either I believe, not sure exactly how to get teh same effect when using absolute positioning.
 
0
•••
I just noticed that I should have posted this in progra,,ing. Sorry my mistake.

One more or less work-around I found was that you can put: width: 100%;
in the body as well. Then it will work with the full width, only the anoying thing is that you will get a scrollbar at the bottom of the browser, because it is just a couple of pixels longer then 100% (probabaly because of the right scrollbar).

So After I tried width: 100%; in the body, I set the body width to 99.8%.

This seems to do the trick. Strange thing is however that this only affects the header class, i.e. background color of the body stays at 100%., also text etc, does not seem to care about the width: value in the body tag.

So even if you have the body width set at 50%, all backgrounds and texts will still be at 100%. At least in my little code snippet it seems to work like that in mozilla.

Internet explorer does not seem to mind this solution (as usual,who cares about standards anymore..., not microsoft that fo sure).

I will try to test some more things to see if it does anything, but for now, I think I have a workaround, although an ugly one.
 
Last edited:
0
•••
Problem resolved

Originally posted by FieroGT
I just noticed that I should have posted this in progra,,ing. Sorry my mistake.

One more or less work-around I found was that you can put: width: 100%;
in the body as well. Then it will work with the full width, only the anoying thing is that you will get a scrollbar at the bottom of the browser, because it is just a couple of pixels longer then 100% (probabaly because of the right scrollbar).

So After I tried width: 100%; in the body, I set the body width to 99.8%.

This seems to do the trick. Strange thing is however that this only affects the header class, i.e. background color of the body stays at 100%., also text etc, does not seem to care about the width: value in the body tag.

So even if you have the body width set at 50%, all backgrounds and texts will still be at 100%. At least in my little code snippet it seems to work like that in mozilla.

Internet explorer does not seem to mind this solution (as usual,who cares about standards anymore..., not microsoft that fo sure).

I will try to test some more things to see if it does anything, but for now, I think I have a workaround, although an ugly one.

After strugeling for a while I found out that position: absolute in the body{} section was not such a good idea.

Just remove the postion in body and everything works as it should be. So now I can remove the width: 100% in the body as well, as long as I remove the posistion in body {}.

That did not make sense anyway to put position in there, but Hey I am a newbie.

Next time I will try to remember to post this stuff in the programming section.

Hopefully, someon else with the same probem has any use to this post.
 
0
•••
  • The sidebar remains visible by scrolling at a speed relative to the page’s height.
Back