Stylesheets are not followed after migration

G

Guest

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.
 
J

jan.hancic

If your pages are coded for HTML 4.0 standard then include the HTML 4.0
doctype and not XHTML 1.1...
 
G

Guest

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.
 
G

Gerry Hickman

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.
 
G

Guest

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>
 
A

Andrew Morton

Andre said:
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".
Click to expand...

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

Andrew
 
G

Gerry Hickman

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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Why is this WordPress comments form not submitting? 1
Help with my responsive home page 2
onscroll Event Not Firing in ASP.NET 2.0 2
Asp.Net AJAX dynamically added Tab Control not displaying 7
VS 2005 XHTML Compliancy problem 3
Problem in CSS3 2
Stupid Developer Tricks 4
IIS problem - Publishing site using .net 2005þ 1

Members online

Total: 65 (members: 3, guests: 62)
Robots: 475

Forum statistics

Threads
473,995
Messages
2,570,226
Members
46,816
Latest member
nipsseyhussle

Latest Threads

Top