css running notes

satya - Wednesday, August 17, 2011 9:12:01 AM

margin controls outside and padding inside

margin controls outside and padding inside

satya - Wednesday, August 17, 2011 9:16:25 AM

background image positioning in css

background image positioning in css

Search for: background image positioning in css

satya - Wednesday, August 17, 2011 9:17:45 AM

the school delivers again on this question

the school delivers again on this question

satya - Wednesday, August 17, 2011 9:30:25 AM

what is *top in css

what is *top in css

Search for: what is *top in css

satya - Wednesday, August 17, 2011 9:39:33 AM

read this url for an explanation

read this url for an explanation

satya - Wednesday, August 17, 2011 9:46:35 AM

another explanation

another explanation

satya - Wednesday, August 17, 2011 9:47:02 AM

asterisk in front of or preceding a css property

asterisk in front of or preceding a css property

Search for: asterisk in front of or preceding a css property

satya - Wednesday, August 17, 2011 11:50:45 AM

so the answer is


.my_div {top:50px; *top=30px}

Most or all browsers except ie ignores the *top and uses the top as 50 pixels. ie 7 and below will recognize both and uses the later as it takes precedence just because it comes later.

This is a hack that says use 50px in all browsers but use 30 if you are ie7 or lower. Need to check if this is just for ie7 and below or for all ie.

Experts seem to indicate not to use this type of hack if there is an alternative.

satya - 6/19/2013 2:14:17 PM

what is float clear in html?

what is float clear in html?

Search for: what is float clear in html?

satya - 6/20/2013 2:05:02 PM

good font for paragraphs

good font for paragraphs

Search for: good font for paragraphs

satya - 6/20/2013 2:06:29 PM

Read this article for some best practices on typography on the web

Read this article for some best practices on typography on the web

satya - 6/20/2013 2:27:13 PM

Here are some comparisons of google web fonts

Here are some comparisons of google web fonts

satya - 6/28/2013 9:47:39 AM

in html How do i bottom align an element in a div?

in html How do i bottom align an element in a div?

Search for: in html How do i bottom align an element in a div?

satya - 6/28/2013 9:56:45 AM

How do I align an element to the bottom of a div in html?

How do I align an element to the bottom of a div in html?

Search for: How do I align an element to the bottom of a div in html?

satya - 6/28/2013 9:58:38 AM

Here is a similar question on SOF

Here is a similar question on SOF

satya - 6/28/2013 10:11:31 AM

The approach that seemed to work for me


<!-- parent div -->
<div style="position:relative">

   <!-- body div -->
   <div>....</div>

   <!-- always bottom div -->
   <div style="position:absolute; top:70%; left:50%">
       <p>Some image or text</p>
   </div>

</di>

satya - 7/13/2013 2:56:47 PM

ie float left losing height

ie float left losing height

Search for: ie float left losing height

satya - 7/13/2013 3:03:53 PM

html display table cell

html display table cell

Search for: html display table cell

satya - 7/13/2013 3:15:46 PM

What is happening

when i give my child divs containing paragraphs as floats the parent div is coming up with a height of 0 even thought text is displayed. This is messing up margin calculations etc.

One symptom of this is if I set the border on the parent div, this border is drawn as a single line on top of the child text and not encompass it.

For now I used display:table-cell on the parent div to fix this. not sure why it works.

satya - 7/13/2013 3:39:06 PM

Names of key typefaces


Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Baskerville

satya - 7/22/2013 2:54:42 PM

How do you place an anchor in html

How do you place an anchor in html

Search for: How do you place an anchor in html

satya - 7/22/2013 2:57:06 PM

Here is an example


<a name="some-name">sometext</a>

and then

<a href="#some-name">go to sometext</a>