Works with IE but not with FF

testare · Sep 22, 2005

If you look at this link

http://www.wilder-films.co.uk/meny/Untitled-4.htm

with it will look okey with IE, but if i use FF it looks like s**t.

Code:

body	{
	clear:both;
	position:relative;
	width:37px;
	padding-top:0px;
	padding-right:0px;
	padding-bottom:0px;
	padding-left:0px;
	margin: 0 01px 03px 0px;
	z-index:20;
	left: 700px;
	top: 451px;
	height: 22px;
	background-color:#EFEFEF;
	}

#mother {
	position:absolute;
	left: 157px;
	top:-8px;
	width: 724px;
	background-color:#FFFFFF;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	height: 102%;
		}

ChrisHunt · Sep 22, 2005

Try writing a valid (X)HTML document. At the moment all you've got is

Code:

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



<div id="mother"> </div>

adding <html> and <body> elements in the right places, together with a full doctype may help things.

Having said that, you've told the browser to put the (implicit) <body> 451px from the top and 700px from the left hand side of the screen, and to put div#mother 8px above and 157px to the right of the <body>. That seems to be what FF is doing, it's IE that isn't obeying your instructions.

What are you actually trying to achieve?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Vragabond · Sep 22, 2005

Can you explain what is the intricate thing that you are doing? If I look at what comes out in IE, I guess I am confused as to why you need so much code and positioning. What you were trying to do to your body is beyond me. If I trim the style for body:

Code:

body    {
    padding: 0;
    margin: 0 1px 3px 0;
    background-color: #EFEFEF;
}

FF renders the same as IE. However, this is seems like overly complex way to produce whatever you are producing.

Vragabond · Sep 22, 2005

Chris, to be honest, it was IE who was obeying more this time. While he put the body somewhere out there and make it ridiculously small, there was no body in the html to begin with.

testare · Sep 22, 2005

I'm just trying to make a line in the middle with white background and in the right and the left side it should be a gray background.
So that the focus should be in the middle.

testare · Sep 22, 2005

I think i got it to work now.

Vragabon: Is this better or can i make it better and easier?

Code:

body	{
	background-color:#EFEFEF;

	}

#mother {
	position:absolute;
	left: 157px;
	top:-8px;
	width: 695px;
	background-color:#FFFFFF;
	border-right: 1px solid #000000;
	border-left: 1px solid #000000;
	height: 102%;
		}

ChrisHunt · Sep 22, 2005

Vrag:

you've told the browser to put the (implicit) <body>...

There's no actual <body> element in the markup - as I pointed out myself - but FF infers one from the existence of content which has to appear in a <body>. Try viewing the site with the DOM inspector and you'll see a body element, even though none appears in the markup.

I suppose it comes down to the different browsers' handling the "missing body" error in different ways.

Anyway, here's a much simpler solution to the problem:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
  <title>Example</title>

  <style type="text/css">
     html,body {
       background: #efefef;
       padding: 0;
       margin: 0;
       height: 100%;
     }

     #mother {
       margin: 0 0 0 157px;
       border-left: 1px solid #000;
       border-right: 1px solid #000;
       min-height: 100%;
       _height: 100%;
       background: #fff;
     }
  </style>
</head>
<body>
  <div id="mother"></div>
</body>
</html>

I've adapted a technique found on

http://www.quirksmode.org/css/100percheight.html

to allow div#mother to be stretched to the full height of the viewport.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

testare · Sep 22, 2005

I have change so that i have the <body> so why are you talking about missing <body>...

Chris i must say that i like you example, but the white is taking all the way to the right.
How should that be fixed with your example.

I dont mean to be anoying or something like that.
I'm just trying to learn.
Vragabond, Chris thanks for all the help that i getting.

ChrisHunt · Sep 22, 2005

the white is taking all the way to the right.

Sorry, I thought that's how you wanted it. To get a fixed width, just add something like this:

Code:

     #mother {
       margin: 0 0 0 157px;
       border-left: 1px solid #000;
       border-right: 1px solid #000;
       [red]width: 724px;[/red]
       min-height: 100%;
       _height: 100%;
       background: #fff;
     }

If, as you probably should, you then want the div centred in the available screen width, do this:

Code:

     #mother {
       [red]margin: 0 auto;[/red]
       border-left: 1px solid #000;
       border-right: 1px solid #000;
       width: 724px;
       min-height: 100%;
       _height: 100%;
       background: #fff;
     }

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

testare · Sep 22, 2005

Vragabond, Chris thank you

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Works with IE but not with FF

testare

Programmer

ChrisHunt

Programmer

Vragabond

Programmer

Vragabond

Programmer

testare

Programmer

testare

Programmer

ChrisHunt

Programmer

testare

Programmer

ChrisHunt

Programmer

testare

Programmer

Similar threads

Part and Inventory Search

Sponsor