Use of CSS and Master Pages

[Guest]

I'm not sure if this is the right place to ask this question, but if there is
a better place, I cannot find it.

I have a web that uses Master Pages. The basic layout is acieved using
<table> - this method is deprecated and I am trying to convert it to use CSS.
I understand CSS pretty well, and did a small pilot to see how it would all
work. Then I decided to do it on the real project.

Let's just take one small simple example that illustrates the problem. Let's
say I have within my Master Page a div, coded as follows:

<div id="logodiv" runat="server"><img src="mylogo.jpg" /></div>

And now let's suppose in the CSS file I have something like:

#logodiv { vertical-align: middle; float: left }

All should be hunky dory, but alas, it isn't because by the time the browser
sees the HTML they id of the div isn't logodiv anymore but, say _ctl0_logodiv.

Obviously, I could change the CSS file to hard code _ctl0_logodiv instead of
logodiv, but this is clearly not good.

Similarly, I could put in the .cs file a statement like:

logodiv.style = "vertical-align: middle; float: left";

But this defeats the purpose since I am trying to put the STYLE in the CSS,
and the code in the .cs and the content in the .master

How am I supposed to resolve this problem?

 

[Guest]

Martin,

Two possible solutions:
- first, as your div is a logo div - there is no need to run it at server -
remove runat tag - your css will work;
- second, as you may have other elements that you need to control on the
server side - use class (CssClass) attribute/property to define your css
styles - do not rely on element IDs

HTH

 

[Kevin Spencer]

The use of element ids in CSS is very limited, because it confines the scope
of the style to a single element. The use of CSS classes, on the other hand,
allows you to apply the same style to an entire group of elements with a
single expression. There are other selectors as well which come in handy,
including element name selectors, contextual selectors, attribute selectors,
etc. To take full advantage of the power of CSS, it's good to know what they
all are, and when to use which ones.

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net

 

[Guest]

Firstly I would like to thank both of the people who replied to my question
for their time. As it happens, I was aware of both of these solutions.
However, this isn't really a proper solution and it seems to me this is a
hole in .Net that MS should address.

There is a good reason why CSS allows IDs to be used as selctors. It's not
really for MS to decide unilaterally that selector IDs are unnecessary.

When ASPs were invented they were the best thing since sliced bread. But it
didn't take long before people realized that mingling the HTML with the
business logic was a mistake. Thus MS invented ASP.Net and it was an amazing
advance.

I see the ability to break out the formatting from the .aspx file, into a
separate .css file as a similarly huge step. I think MS needs to give a lot
of thought in making sure the full power of CSS is available in .Net rather
than limiting it.

The use of element IDs in this case is entirely appropriate because in this
case, limiting the formatting to a single element is exactly what is intended.

Maybe what is really needed is some kind of "code-behind' file for .css
files that allows for their transformation.

 

[Kevin Spencer]

A CSS class can apply to a single element, as long as the element has a
unique class name. The only difference is the selector syntax. If a CSS
selector is for an element ID, the element must have a unique id. I don't
see the issue here.

--
HTH,

Kevin Spencer
Microsoft MVP

Printing Components, Email Components,
FTP Client Classes, Enhanced Data Controls, much more.
DSI PrintManager, Miradyne Component Libraries:
http://www.miradyne.net