Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
vertical alignment of the LEGEND element
36 views
Skip to first unread message
Krzysztof Żelechowski
Aug 12, 2012, 4:21:32 PM8/12/12
to
Hi, I would like to achieve the following layout:
[LOGO]
--- Legend ---
To this end, I tried using the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<FORM METHOD=POST ACTION="#" ENCTYPE="MULTIPART/FORM-DATA" ><FIELDSET
><LEGEND >Legend</LEGEND ></FIELDSET ></FORM >
</body>
</html>
with the following style:
LEGEND { BACKGROUND: URL("http://www.webdevout.net/favicon.png");
BACKGROUND-REPEAT: no-repeat; PADDING-TOP: 3EX; VERTICAL-ALIGN: bottom;
POSITION: relative; BOTTOM: 3EX }
But whatever I do, the Legend is rendered as if with VERTICAL-ALIGN: middle.
[LOGO]
--- ---
Legend
What should I do to move the legend up?
Chris
[LOGO]
--- Legend ---
To this end, I tried using the following markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<FORM METHOD=POST ACTION="#" ENCTYPE="MULTIPART/FORM-DATA" ><FIELDSET
><LEGEND >Legend</LEGEND ></FIELDSET ></FORM >
</body>
</html>
with the following style:
LEGEND { BACKGROUND: URL("http://www.webdevout.net/favicon.png");
BACKGROUND-REPEAT: no-repeat; PADDING-TOP: 3EX; VERTICAL-ALIGN: bottom;
POSITION: relative; BOTTOM: 3EX }
But whatever I do, the Legend is rendered as if with VERTICAL-ALIGN: middle.
[LOGO]
--- ---
Legend
What should I do to move the legend up?
Chris
karpavici...@gmail.com
Sep 29, 2015, 8:36:31 AM9/29/15
to
Might work, try moving it up with negative margin-top, padding-top, not the best option but sometimes help
0 new messages