xhtml & margin-top

bernhard schelling · Jul 28, 2005

hi,
by migrating an existing site to xhtml i encountered a strange behaviour in
Firefox & Opera:
If I change the doctype to xhtml the top-margin on the form element seems
to go up -


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
#search{
margin-top:95px
}
</style>
</head>
<body>
<div style="height:100px;border:1px red solid"><input type="text"
id="search"/></div>
</body>
</html>

any hints?
thanks in advance
bernhard

Spartanicus · Jul 28, 2005

bernhard schelling said:
by migrating an existing site to xhtml

Generally not a wise move:
http://www.spartanicus.utvinternet.ie/no-xhtml.htm

i encountered a strange behaviour in
Firefox & Opera:
If I change the doctype to xhtml the top-margin on the form element seems
to go up -


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Nowt to do with "XHTML", it's due to the change from quirks mode
triggered by transitional doctype sans url to standard compliant mode
triggered by the XHTML Strict doctype

richard_quick_uk · Jul 30, 2005

Hi,

Try this instead...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DT D/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Title</title>
</head>
<body>
<div style="min-height:12px;border:1px red solid; padding-top:
95px;"><input type="text" id="search"/></div>
</body>
</html>

If you're using xhtml strict you first need to make sure your page
validates (hence the inclusion of <title> tags etc).

The main problem here seems to be that you'd set the height attribute,
which Mozilla interprets correctly as a fixed height (with any content
overflowing the div by default) while IE incorrectly interprets height
as a minimum height (expanding the div to fit the content by default).

Hope this helps,

Richard Quick

Toby Inkster · Jul 30, 2005

richard_quick_uk said:
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />

Tee hee hee. ;-)

Robert Frost-Bridges · Jul 30, 2005

Toby said:
Tee hee hee. ;-)

Why tee hee hee?

regards,

Jedi Fans · Jul 31, 2005

Robert said:
Why tee hee hee?

regards,

tag soup

Toby Inkster · Jul 31, 2005

Robert said:
Why tee hee hee?

The Content-Type header indicates that the file is HTML, but the "/>"
at the end of the meta tag indicates that it's XHTML.

Should really be either:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
or:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">

Els · Jul 31, 2005

Toby said:
The Content-Type header indicates that the file is HTML, but the "/>"
at the end of the meta tag indicates that it's XHTML.

Should really be either:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
or:
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1">

With a slash on the last one I suppose? ;-)

Toby Inkster · Aug 1, 2005

Els said:
With a slash on the last one I suppose? ;-)

D'oh!

Robert · Aug 2, 2005

D'oh!

It's ok, I got what you meant anyway.

richard_quick_uk · Aug 6, 2005

Which is great in theory - except IE doesn't support:

<meta http-equiv="Content-Type" content="application/xhtml+xml ;
charset=iso-8859-1" />

So you have to serve it as text/html

Toby Inkster · Aug 6, 2005

richard_quick_uk said:
Which is great in theory - except IE doesn't support:
<meta http-equiv="Content-Type" content="application/xhtml+xml ;
charset=iso-8859-1" />

It doesn't generally pay the slightest bit of attention to the META tags
at all, so you may use the above construct with no negitive consequences.

Top NOT top?	2	Feb 13, 2021
Help with code	0	Jun 12, 2022
Help with Visual Lightbox: Scripts	2	May 3, 2023
XHTML - how extend/create ELEMENT body in my DTD?	0	Oct 29, 2019
Please Help?	0	Jul 23, 2022
Help with my responsive home page	2	Dec 14, 2022
I am trying to detect Which image id="" was clicked ?	22	Jan 3, 2023
vertical scrolling + margin-bottom	4	Jan 1, 2008

xhtml & margin-top

bernhard schelling

Spartanicus

richard_quick_uk

Toby Inkster

Robert Frost-Bridges

Jedi Fans

Toby Inkster

Els

Toby Inkster

Robert

richard_quick_uk

Toby Inkster

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads