css running notes

margin controls outside and padding inside

background image positioning in css

Search for: background image positioning in css

the school delivers again on this question

what is *top in css

Search for: what is *top in css

read this url for an explanation

another explanation

asterisk in front of or preceding a css property

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


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

what is float clear in html?

Search for: what is float clear in html?

good font for paragraphs

Search for: good font for paragraphs

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

Here are some comparisons of google web fonts

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?

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?

Here is a similar question on SOF


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

ie float left losing height

Search for: ie float left losing height

html display table cell

Search for: html display table cell

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.


Georgia
Arial
Verdana
Lucida Grande
Helvetica
Times New Roman
Baskerville

How do you place an anchor in html

Search for: How do you place an anchor in html


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

and then

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