By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,261 Members | 1,658 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,261 IT Pros & Developers. It's quick & easy.

basic formatting questions

P: 3
I'm having trouble getting some basic understandings of how web pages, specifically developed using Visual Studio 2008, are constructed.

The code below started as an empty Default.aspx page to which I added only an asp:Label and an asp:TextBox.
When I added only a font-family to the <body>, the font of the TextBox doesn't change. Why not?

The actual browser I'm starting with is IE8 and I have seen slight differences from trying to use FireFox. But I don't even want to begin talking about browser inconsistencies yet.

On another message board, someone suggested adding a set of reset CSS which I obtained from Eric Meyer's site. That didn't make any difference and I don't really see why it was suggested.

I believe that, whatever the concept is that I am missing, it lies at the base of understanding web pages in general, and CSS in particular.

Can anyone point out what I'm missing or doing wrong?

Here's the code:
Expand|Select|Wrap|Line Numbers
  1. <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="TestDefaults._Default" %> 
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml" > 
  6. <head runat="server"> 
  7.     <style type="text/css"> 
  8.         /* http://meyerweb.com/eric/tools/css/reset/  
  9.         v2.0 | 20110126 
  10.         License: none (public domain) 
  11.         */ 
  12.  
  13.         html, body, div, span, applet, object, iframe, 
  14.         h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
  15.         a, abbr, acronym, address, big, cite, code, 
  16.         del, dfn, em, img, ins, kbd, q, s, samp, 
  17.         small, strike, strong, sub, sup, tt, var, 
  18.         b, u, i, center, 
  19.         dl, dt, dd, ol, ul, li, 
  20.         fieldset, form, label, legend, 
  21.         table, caption, tbody, tfoot, thead, tr, th, td, 
  22.         article, aside, canvas, details, embed,  
  23.         figure, figcaption, footer, header, hgroup,  
  24.         menu, nav, output, ruby, section, summary, 
  25.         time, mark, audio, video { 
  26.                 margin: 0; 
  27.                 padding: 0; 
  28.                 border: 0; 
  29.                 font-size: 100%; 
  30.                 font: inherit; 
  31.                 vertical-align: baseline; 
  32.         } 
  33.         /* HTML5 display-role reset for older browsers */ 
  34.         article, aside, details, figcaption, figure,  
  35.         footer, header, hgroup, menu, nav, section { 
  36.                 display: block; 
  37.         } 
  38.         body { 
  39.                 line-height: 1; 
  40.         } 
  41.         ol, ul { 
  42.                 list-style: none; 
  43.         } 
  44.         blockquote, q { 
  45.                 quotes: none; 
  46.         } 
  47.         blockquote:before, blockquote:after, 
  48.         q:before, q:after { 
  49.                 content: ''; 
  50.                 content: none; 
  51.         } 
  52.         table { 
  53.                 border-collapse: collapse; 
  54.                 border-spacing: 0; 
  55.         } 
  56.     </style> 
  57.     <title></title> 
  58. </head> 
  59. <body> 
  60.     <form id="form1" runat="server" style="font-family: 'Trebuchet MS', Helvetica, Sans-Serif;"> 
  61.     <div> 
  62.          <asp:Label ID="Label1" runat="server" Text="AaBbCcDdEeFfGgHhIiJjKkLlMmTt" /> 
  63.          <br /> 
  64.          <asp:TextBox ID="TextBox1" runat="server" Width="400" Text="AaBbCcDdEeFfGgHhIiJjKkLlMmTt" /> 
  65.     </div> 
  66.     </form> 
  67. </body> 
  68. </html> 
  69.  
  70.  
Sep 5 '11 #1
Share this Question
Share on Google+
8 Replies


Frinavale
Expert Mod 5K+
P: 9,731
Try this:

<asp:TextBox ID="TextBox1" runat="server" Width="400" Text="AaBbCcDdEeFfGgHhIiJjKkLlMmTt" style="font-family: 'Trebuchet MS', Helvetica, Sans-Serif;" />

Let me know if it works for you...if it does we can create a css style that target's "input" elements (which is what your textbox renders as).
Sep 8 '11 #2

P: 3
Thank you but yes, I understand that I can 'fix' the textbox directly.

But my question is why doesn't the textbox pay attention to the font-family already specified on the form?

Why is it at all necessary to add another style attribute to the textbox when there is already one on the form which contains the textbox?

How can they be called 'cascading' style sheets if they don't cascade?

By extension, I could conceivably specify every possible property on every single control, but that's just silly.

How can I understand what attributes need to be specified and what inheritances will work or not when this simple example doesn't work?
Sep 9 '11 #3

Frinavale
Expert Mod 5K+
P: 9,731
I'm not really sure why the HTML <input type="text" /> is not styled when you set the font-family for the parent element.

It has something to do with the browser's implementation.
CSS styles still "cascade"...just some controls are implemented differently than others and you have to implement styles with that in mind.

-Frinny

(PS I'm moving this to the HTML forum where you may get a better answer)
Sep 9 '11 #4

drhowarddrfine
Expert 5K+
P: 7,435
When I added only a font-family to the <body>, the font of the TextBox doesn't change. Why not?
Because you change the font-family on the form. That should cascade to the following elements within the form.

The actual browser I'm starting with is IE8 and I have seen slight differences from trying to use FireFox. But I don't even want to begin talking about browser inconsistencies yet.
Start now or you'll be ruined for life. Never, EVER use IE as a reference browser during testing. It is inept, years behind all others in modern standards and practices and the worst browser on the planet by far. Always, ALWAYS use a modern browser, ANYTHING but IE, to initially test your markup. Then you know your code is good and should work in all modern browsers but the multitude of problems with IE are known, as are the hacks to fix it. Never, EVER trust IE to do ANYTHING right!

You are using the transitional doctype. New web pages have no use for that. Always use strict.
Sep 9 '11 #5

P: 3
I've been trying so many things from different forums that my text didn't match up with the actual code.

As you can see, I did put the font-family on the form, not the body.
That didn't help either.

How do I get control of the doctype with ASP.Net?

As far as browser choice goes, I'm just the architect and developer. The customer controls what the browser platform is. In this case, they are insisting on IE, so it doesn't matter whether my coding looks good in any other.
Sep 9 '11 #6

drhowarddrfine
Expert 5K+
P: 7,435
Then the issue may be caused by when ASP creates the HTML vs when the browser styles with the CSS though I don't think that's the issue. My opinion of asp.net is just as low as that of IE. Can you post the *generated* markup or provide a link?
How do I get control of the doctype with ASP.Net?
Don't know. That's a question for the other board.
The customer controls what the browser platform is. In this case, they are insisting on IE
Yes. I've had many an uneducated customer in my time.
Sep 9 '11 #7

Frinavale
Expert Mod 5K+
P: 9,731
The issue is not caused when ASP creates the HTML.
TextBoxes are simply rendered as <input type="text"> with an ID and maybe some JavaScript that is executed when the focus is taken off of the control (if you have AutoPostback set on the ASP.NET TextBox control).

It's just a styling thing that needs to be addressed.

If you are required to support IE then you need to create extra styling that addresses IE specific styling needs. There are ways to do this without making the HTML invalid too.

It's really not that hard to create a style for type input that sets the font-family.

For example:
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.   body
  3.   {
  4.     font-family:  'Trebuchet MS', Helvetica, Sans-Serif;
  5.   }
  6.   input
  7.   {
  8.     font-family: 'Trebuchet MS', Helvetica, Sans-Serif;
  9.   }
  10. </style>
Or even:
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.   body, input
  3.   {
  4.     font-family:  'Trebuchet MS', Helvetica, Sans-Serif;
  5.   }
  6. </style>

I do not recommend changing the doc-type in ASP.NET either...I tried once (hehe bad idea)...if you Really want to try, then simply open the page (or the MasterPage if you're using them) and change the doctype. But be aware that it will cause problems.

-Frinny
Sep 9 '11 #8

drhowarddrfine
Expert 5K+
P: 7,435
I thought the question was why the styling isn't being applied even though he entered it into the form element.

EDIT: I think the problem lies in that we're trying to style the input text from the form element. Apparently that doesn't work but I don't remember the rule for when that gets applied. It does work if you apply it directly to the input tag but not the form so obviously I've forgotten how this works.
Sep 9 '11 #9

Post your reply

Sign in to post your reply or Sign up for a free account.