470,815 Members | 1,288 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,815 developers. It's quick & easy.

Stylesheets are not followed after migration

Hi,

We had an existing application in ASP.NET 1.1. After migration I tried to
utilize MasterPages. The test showed that format for most of labels is
treated differently e.g. TextBox'es are much toller, Label's do not have
fixed length as they used to, etc...
After some testing I discovered that problem is in how page format defined.
If I use HTML 4.0 all looking good, if page is XHTML 1.1 it is not.

Please advise on how to make pages coded as XHTML look same as in HTML 4.0

Thank you.
Mar 30 '06 #1
6 1296
If your pages are coded for HTML 4.0 standard then include the HTML 4.0
doctype and not XHTML 1.1...

Mar 30 '06 #2
Jan,

I do not want to change back to HTML 4.0. I want to use XHTML, so my
question is "What makes styles in XHTML look differently than in HTML?"

Thanks.

"ja********@gmail.com" wrote:
If your pages are coded for HTML 4.0 standard then include the HTML 4.0
doctype and not XHTML 1.1...

Mar 30 '06 #3
Hi,

Please can you create 2 small HTML pages in a text editor, with two text
boxes and two labels in each with the exact code applied from a) your
old HTML4 project b) the way that VS2005 has coded it for XHTML 1.1.

* Strip out anything non-essential. *

Test both pages in your browser to ensure you see the problem you are
describing here, then post BOTH chunks of code - I'll be able to tell
you what's going on straight away.

(although when you do this you'll probably instantly see the problem).

You have to understand that VS.NET 2002, 2003, 2005 all produce
laughable markup, compared to how you would code to open standards if
you were doing it outside the IDE. It's improved quite a bit in VS2005
but it's still a joke.

The bottom line is that the first thing you should do in these
situations is create the HTML in a text file and test it in both IE and
Mozilla.

Andre wrote:
Hi,

We had an existing application in ASP.NET 1.1. After migration I tried to
utilize MasterPages. The test showed that format for most of labels is
treated differently e.g. TextBox'es are much toller, Label's do not have
fixed length as they used to, etc...
After some testing I discovered that problem is in how page format defined.
If I use HTML 4.0 all looking good, if page is XHTML 1.1 it is not.

Please advise on how to make pages coded as XHTML look same as in HTML 4.0

Thank you.

--
Gerry Hickman (London UK)
Mar 30 '06 #4
Hi Gerry,

Please see below example in the HTML and XHTML when it looks differently.
The difference that in IE6 HTML treats "width" as instruction on how wide is
the span, when in XHTML it ignores its value. The height attribute is also
treated differently in HTML and XHTML for "input".
Please advise on how make "span" of specified width and how to keep height
the same.

Thank you.

XHTML:
<!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>
Test
</title>
<style type="text/css">
.forminfofield{font-family: verdana,arial; font-size: 8pt;
font-weight:400; border: solid 1px #adc6f1; font-style: normal; width:190px;
height: 18px; vertical-align: middle; padding-left: 2px; background-color:
#efefef;}
.formfield{font-family: verdana,arial; font-size: 8pt; font-weight:400;
width:190px; height:18px;}
</style>
</head>
<body>
<input id="input1" tabindex="10" class="formfield" style="width:95px;"
value="test" />
<span id="span1" class="forminfofield" style="width:120px;"> </span>
</body>
</html>
HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<head>
<title>
Test
</title>
<style type="text/css">
.forminfofield{font-family: verdana,arial; font-size: 8pt;
font-weight:400; border: solid 1px #adc6f1; font-style: normal; width:190px;
height: 18px; vertical-align: middle; padding-left: 2px; background-color:
#efefef;}
.formfield{font-family: verdana,arial; font-size: 8pt; font-weight:400;
width:190px; height:18px;}
</style>
</head>
<body>
<input id="input1" tabindex="10" class="formfield" style="width:95px;"
value="test" />
<span id="span1" class="forminfofield" style="width:120px;"> </span>
</body>
</html>

Mar 31 '06 #5
Andre wrote:
Please see below example in the HTML and XHTML when it looks
differently. The difference that in IE6 HTML treats "width" as
instruction on how wide is the span, when in XHTML it ignores its
value. The height attribute is also treated differently in HTML and
XHTML for "input".


How about giving it valid markup: the <input> elements should be in a
<form>.

Andrew
Apr 5 '06 #6
Hi Andre,

Sorry for delay in responding.

The code is almost too horrible to comment on; it's a classic case of
hard coding which leads to browser dependency and over complication. I'd
say BOTH versions are wrong. The HTML4 version renders differently in
IE6 to how it does in Mozilla anyway. There are also conflicting
attributes where you've defined width at the style sheet level, and then
again on the HTML tag itself!

The solution is to learn CSS and (x)HTML properly, and then code it from
scratch. Always test in Mozilla, it's much better for developers than IE
- actually it's better for everyone than IE but that's another story.

Regarding the span and width; this confused me, because I've never
thought of a span as having "width", the whole point is that it spans
the content it contains, however, the Microsoft docs say that width
_can_ apply to span - I don't understand that, but if you look at the
proper CSS1 docs here:

http://www.w3.org/TR/REC-CSS1.html

It says that width only applies to "block level" and "replaced"
elements; to me that makes more sense.

Options for nice form layouts include using tables with CSS attributes,
but you should never use tables for actual page layout. If the form
layout is truly tabular then it's OK. An other pure CSS option is to use
relative positioning to place elements side by side (a bit like a table
but with a lot more control). The docs for this are here:

http://www.w3.org/TR/REC-CSS2/

But note that IE6 only has limited support of CSS2.

An example of relative positioning is shown below. This will work in IE6
and Mozilla. I've deliberately left everything in-line here, but in real
life you'd use classes and inheritance instead.

<div id="outer" style="left:50px; top:50px; width:280px; height:60px;
background-color:#FFFF00">
<div id="div1"
style="position:relative;top:20px;left:20px;width: 100px;background-color:#FFFFCC">
This is Div1
</div>
<div id="div2"
style="position:relative;top:0px;left:160px;width: 100px;background-color:#FFFFCC">
This is Div2
</div>
</div>
Andre wrote:
Hi Gerry,

Please see below example in the HTML and XHTML when it looks differently.
The difference that in IE6 HTML treats "width" as instruction on how wide is
the span, when in XHTML it ignores its value. The height attribute is also
treated differently in HTML and XHTML for "input".
Please advise on how make "span" of specified width and how to keep height
the same.

Thank you.

XHTML:
<!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>
Test
</title>
<style type="text/css">
.forminfofield{font-family: verdana,arial; font-size: 8pt;
font-weight:400; border: solid 1px #adc6f1; font-style: normal; width:190px;
height: 18px; vertical-align: middle; padding-left: 2px; background-color:
#efefef;}
.formfield{font-family: verdana,arial; font-size: 8pt; font-weight:400;
width:190px; height:18px;}
</style>
</head>
<body>
<input id="input1" tabindex="10" class="formfield" style="width:95px;"
value="test" />
<span id="span1" class="forminfofield" style="width:120px;"> </span>
</body>
</html>
HTML 4.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<head>
<title>
Test
</title>
<style type="text/css">
.forminfofield{font-family: verdana,arial; font-size: 8pt;
font-weight:400; border: solid 1px #adc6f1; font-style: normal; width:190px;
height: 18px; vertical-align: middle; padding-left: 2px; background-color:
#efefef;}
.formfield{font-family: verdana,arial; font-size: 8pt; font-weight:400;
width:190px; height:18px;}
</style>
</head>
<body>
<input id="input1" tabindex="10" class="formfield" style="width:95px;"
value="test" />
<span id="span1" class="forminfofield" style="width:120px;"> </span>
</body>
</html>

--
Gerry Hickman (London UK)
Apr 13 '06 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

9 posts views Thread by Paddy McCarthy | last post: by
4 posts views Thread by Abram Friesen | last post: by
1 post views Thread by sac | last post: by
6 posts views Thread by Andre | last post: by
reply views Thread by mihailmihai484 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.