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

FieroGT · 08-06-2004, 01:16 AM

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:
????: NamePros.com http://www.namepros.com/web-design-discussion/42157-mozilla-firefox-css-width-100-issue.html

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.

Ethan · 08-06-2004, 07:24 AM

width: 100% won't work in Opera either I believe, not sure exactly how to get teh same effect when using absolute positioning.

FieroGT · 08-06-2004, 07:44 AM

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.
????: NamePros.com http://www.namepros.com/showthread.php?t=42157

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.

FieroGT · 08-07-2004, 01:06 AM

Quote:

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.
????: NamePros.com http://www.namepros.com/showthread.php?t=42157

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.

08-06-2004, 01:16 AM	THREAD STARTER #1 (permalink)
FieroGT New Member Join Date: Aug 2004 Posts: 3	Mozilla/Firefox (css) width: 100%; issue. 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: ????: NamePros.com http://www.namepros.com/web-design-discussion/42157-mozilla-firefox-css-width-100-issue.html 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 by FieroGT; 08-06-2004 at 01:25 AM.*

08-06-2004, 07:24 AM	#2 (permalink)
Ethan Sheriff Of Nothing Join Date: Apr 2004 Location: Florida Posts: 220	width: 100% won't work in Opera either I believe, not sure exactly how to get teh same effect when using absolute positioning. __________________ Lowter.com - Webmaster eZine and Community Interactive eZine, Articles, Blogs, and More Norics.com \| Cascading Design \| Blue Programming

08-06-2004, 07:44 AM	THREAD STARTER #3 (permalink)
FieroGT New Member Join Date: Aug 2004 Posts: 3	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. ????: NamePros.com http://www.namepros.com/showthread.php?t=42157 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 by FieroGT; 08-06-2004 at 08:04 AM.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

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

Problem resolved