Help with <p> margins inside <div> please!

[slim]

hi again all,

i am still working on the website as mentioned in earlier threads and
have hit another snag...

http://awash.demon.co.uk/index.php

http://awash.demon.co.uk/vd.css

the php is pulling a name and placing it under the thumbnail (the text is
red) in a <p>. i have successfully set the colour to red through the
stylesheet, however, no notice is being taken of:

margin-top:0.2em;

or, indeed when i was playing about, this:

font-size:80%;

can anybody please let me know what i'm doing wrong? i'm guessing these
formatting instructions are being superceded by something else. if that
is the case, i have no idea what!

thanks in advance for any pointers. oh, and feel free to pull apart the
rest of the site for bad practice, i'm open to comments to improve the
code.

cheers
--
slim

[slim]

|| name | slim <sl**@antiCorp.invalid> | message |
|| news:Xn**************************@38.144.126.106: ||

hi again all,
<snip>
http://awash.demon.co.uk/index.php

http://awash.demon.co.uk/vd.css
<snip>
thanks in advance for any pointers. oh, and feel free to pull apart
the rest of the site for bad practice, i'm open to comments to improve
the code.

cheers
--
slim

not to worry - i fixed the <p> margin problem using a different
technique. the other comments would still be appreciated if you have 2
mins to spare :)
--
slim

[Spartanicus]

slim <sl**@antiCorp.invalid> wrote:

feel free to pull apart the
rest of the site for bad practice, i'm open to comments to improve the
code. XHTML 1.0 Transitional
Using XHTML is silly, Transitional is for legacy documents, newly
authored documents should use Strict.
<div id="header"><h1>
Why the div wrapper? H1 is a block level element, styles you have
attached to the wrapper div can be added to the H1.
<div id="navigation">
That's a list.
<p>
<span class="current">latest</span>
That's not a paragraph.
<input type="text" name="criteria" style="width:6em;">
Move the inline css to the external stylesheet.
&nbsp;
Margins should be specified via css.
<div id="contentwrap">
<div id="rightcol">
<h2>latest tees</h2> <div class="teeblock_outercontainer">
Div/span soup.
<div class="spacer">&nbsp;</div>
Again, margins should be specified with css.
<img src='./images/tees/thumbs/t_shitwizard.jpg' class='tee_thumbnail' alt='you are the shitwizard!'/>

The images should not be resized by the browser, and definitely not by
specifying the desired dimensions in css.

--
Spartanicus

[John Moyer]

Spartanicus wrote:

slim <sl**@antiCorp.invalid> wrote:

feel free to pull apart the
rest of the site for bad practice, i'm open to comments to improve the
code.

XHTML 1.0 Transitional

Using XHTML is silly, Transitional is for legacy documents, newly
authored documents should use Strict.

It seems to me that transitional is useful so that one may apply a
background image and colors for browsers that cannot see the style
sheet. How is this incorrect for new documents?

John Moyer
http://www.rsok.com/~jrm/

[Brian]

John Moyer wrote:

It seems to me that transitional is useful so that one may apply a
background image and colors for browsers that cannot see the style
sheet.
Yes, transitional can accomplish that, assuming the client is capable of
color and images.
How is this incorrect for new documents?

New documents should not make assumptions about the capabilities of the
client beyond assuming reasonably conforming html parsing, and thus
should send only marked up content in the html documents. Styles should
be presented separately from the content, to allow visitors to alter the
presentation if the need or desire arises. And styling info should be in
a separate file so that clients that either cannot use or do not want it
do not need to download it.

--
Brian (remove "invalid" from my address to email me)
http://www.tsmchughs.com/

[slim]

|| name | Spartanicus <[e-mail]> | message |
|| news:ns********************************@news.spart anicus.utvinternet.i
|| e: ||

slim <sl**@antiCorp.invalid> wrote:

feel free to pull apart the
rest of the site for bad practice, i'm open to comments to improve the
code.

XHTML 1.0 Transitional

Using XHTML is silly, Transitional is for legacy documents, newly
authored documents should use Strict.

i tried to change this, checked it out in 3 browsers and found a total
mess in ie6 & opera7.1. although, i think that may have been me tinkering
before. i will leave this as is until i sort out my current problems and
then change it.

<div id="header"><h1>

Why the div wrapper? H1 is a block level element, styles you have
attached to the wrapper div can be added to the H1.

when i take away the containing div, the header does not accept all the
style attributes i give it and does not display the same. for example, in
firefox, there is a gap between the bottom of header.jpg and the bottom
border. is there some part of <h> tags that overrules styles i apply?

<div id="navigation">

That's a list.

good point. that's kind of done, except i'm still using a div to frame
it, or <ul> won't take the style attributes i need to keep the design the
same.

<p>
<span class="current">latest</span>

That's not a paragraph.

also fixed, thanks.

<input type="text" name="criteria" style="width:6em;">

Move the inline css to the external stylesheet.

have done, thank you.

&nbsp;

Margins should be specified via css.

this was used as part of a fix i found whilst browsing: i want to display
the dotted boxes containing each t-shirt in a row until they need to
break for a new line, this trick was recommended to fix the fact that
they float:left and so occupy no space.

is there a better way to do this? i am currently using a slightly
different version of the same workaround, i'd like to be able to achieve
the boxes displaying as i describe legitimately if possible.

<div id="contentwrap">
<div id="rightcol">
<h2>latest tees</h2>

<div class="teeblock_outercontainer">

Div/span soup.

too many? the contentwrap div was used to fix a bug (which has now
reappeared) where the right column was appearing after the left column
vertically.

the rightcol div is then defined to house the various parts 10em across
so as to meet the leftcol - is this not necessary then?

and finally, the divs used to construct the t-shirt dotted boxes were the
only way i could see to achieve the look i wanted without using a table -
would you be able to suggest a better way of achieving that style with
cleaner code?

i'm new(ish) to this and willing to learn, but i'm kind of putting things
together as i pick it up, so it's not always the best approach.

<div class="spacer">&nbsp;</div>

Again, margins should be specified with css.

see my response above. i'd love to know how to eliminate this if
possible.

<img src='./images/tees/thumbs/t_shitwizard.jpg' class='tee_thumbnail'
alt='you are the shitwizard!'/>

The images should not be resized by the browser, and definitely not by
specifying the desired dimensions in css.

really? i thought i would be doing the user a favour by defining a fixed
aspect ratio in ems so the images would resize with the user's font.
could you explain why it is bad practice?

thanks very much for all the critique - it's been a help. now if only i
could fix that damned right column, i would move on to sorting out the
other bits!
--
slim

[Spartanicus]

slim <sl**@antiCorp.invalid> wrote:

Using XHTML is silly, Transitional is for legacy documents, newly
authored documents should use Strict.
i tried to change this, checked it out in 3 browsers and found a total
mess in ie6 & opera7.1.

Switching to Strict results in standard compliant rendering, it exposes
faults/omissions in your html/css that are masked by Quirk mode
rendering.

Why the div wrapper? H1 is a block level element, styles you have
attached to the wrapper div can be added to the H1.

when i take away the containing div, the header does not accept all the
style attributes i give it and does not display the same. for example, in
firefox, there is a gap between the bottom of header.jpg and the bottom
border. is there some part of <h> tags that overrules styles i apply?

A browser applies default style values for any element, it's up to you
to change them if these result in undesired rendering.

That's a list.

good point. that's kind of done, except i'm still using a div to frame
it, or <ul> won't take the style attributes i need to keep the design the
same.

Again there is no need, <ul> is also a block level element, styles
currently attached to the div can be added to the <ul>.

&nbsp;

Margins should be specified via css.

this was used as part of a fix i found whilst browsing: i want to display
the dotted boxes containing each t-shirt in a row until they need to
break for a new line, this trick was recommended to fix the fact that
they float:left and so occupy no space.

is there a better way to do this? i am currently using a slightly
different version of the same workaround, i'd like to be able to achieve
the boxes displaying as i describe legitimately if possible.

Make a minimized test case and I'll have a look.

Div/span soup.

too many? the contentwrap div was used to fix a bug (which has now
reappeared) where the right column was appearing after the left column
vertically.

Adding spurious markup is not the way to fix problems, tackle it at the
source by learning more about how css works. Ask here if you get stuck,
one problem per post and a minimized test case greatly increases your
chances of someone helping out.
the rightcol div is then defined to house the various parts 10em across
so as to meet the leftcol - is this not necessary then?
At most you need 3 generic block level wrappers (<div>'s) for a site
like this, one for the header/navbar, one for the left col and one for
the content next to the left col. But you've got far more div/span
wrappers than that.
and finally, the divs used to construct the t-shirt dotted boxes were the
only way i could see to achieve the look i wanted without using a table -
would you be able to suggest a better way of achieving that style with
cleaner code?

i'm new(ish) to this and willing to learn, but i'm kind of putting things
together as i pick it up, so it's not always the best approach.

<div class="spacer">&nbsp;</div>

Again, margins should be specified with css.

see my response above. i'd love to know how to eliminate this if
possible.

Redoing an entire page is a lot of work, break it down for us.

The images should not be resized by the browser, and definitely not by
specifying the desired dimensions in css.

really? i thought i would be doing the user a favour by defining a fixed
aspect ratio in ems so the images would resize with the user's font.
could you explain why it is bad practice?

Browsers do a poor job at resizing images
Images don't need to resize with a user's font setting
Images larger than needed take longer to download
Images should remain the same size when a page is viewed sans css

--
Spartanicus

[slim]

|| name | Spartanicus <[e-mail]> | message |
|| news:vu********************************@news.spart anicus.utvinternet.i
|| e: ||

Switching to Strict results in standard compliant rendering, it
exposes faults/omissions in your html/css that are masked by Quirk
mode rendering.
i see, thanks. once these problems are fixed, i will switch over and then
fix any problems that entails.
A browser applies default style values for any element, it's up to you
to change them if these result in undesired rendering.
again, i see. i have fixed this, thank you.
Again there is no need, <ul> is also a block level element, styles
currently attached to the div can be added to the <ul>.
and this is fixed too - you're helping a great deal, thanks.

this was used as part of a fix i found whilst browsing: i want to
display the dotted boxes containing each t-shirt in a row until they
need to break for a new line, this trick was recommended to fix the
fact that they float:left and so occupy no space.

is there a better way to do this? i am currently using a slightly
different version of the same workaround, i'd like to be able to
achieve the boxes displaying as i describe legitimately if possible.

Make a minimized test case and I'll have a look.

i have made a page here:

http://awash.demon.co.uk/vd_test.php
http://awash.demon.co.uk/vd_test.css

which contains just the elements needed to display the tee-shirts in the
way i would like them to look. this works the way it is outside of the
main page.

although, as you say, it's not good markup due to the number of block
elements. i suspect this may be the cause of other problems (see below).
Adding spurious markup is not the way to fix problems, tackle it at
the source by learning more about how css works. Ask here if you get
stuck, one problem per post and a minimized test case greatly
increases your chances of someone helping out.
good point. i did ask here and someone suggested that fix as a workaround
for the leftcol div affecting the rightcol div when styles were applied
to it - a problem was arising where the rightcol was placed below the
leftcol. when i first applied that fix it worked.

i have stripped down the page and there are minimised test cases are at:

http://awash.demon.co.uk/vd_coltest_works.php
http://awash.demon.co.uk/vd_coltest_broken.php
http://awash.demon.co.uk/vd_coltest.css

i have highlighted with html comments the part that seems to break the
layout. i think the two main presentation issues i have are related.

it would appear that using the spacer div trick to display the tee-shirt
blocks on the page one after the other, wrapping when necessary, is
breaking the columns. this can be seen working fine without the columns
in the first test case earlier in this reply.

my guess is that a problem with using float:left on the div
"tee_container" and then compensating with the spacer is responsible.
At most you need 3 generic block level wrappers (<div>'s) for a site
like this, one for the header/navbar, one for the left col and one for
the content next to the left col. But you've got far more div/span
wrappers than that.

i have reduced the number of divs in the main page at:

http://awash.demon.co.uk/index.php

to just the left col, the content wrapper and the right col.

unfortunately, more divs are added by containers to house the tee shirt
blocks. perhaps this will be remedied by your reply to the question of
altering that layout - i'm keen to display the t-shirt blocks another way
if it can be done whilst maintaining presentation.
Browsers do a poor job at resizing images
i see, that doesn't surprise me :)
Images don't need to resize with a user's font setting
won't my page be less accessible if someone with bad sight resizes the
font larger and they are still presented with thumbs smaller in size
above it?
Images larger than needed take longer to download
but surely the client would still download the same .jpg from my server
and then resize dynamically?
Images should remain the same size when a page is viewed sans css

ahhhh, the penny snaps ;) is there a better way to tackle the problem of
the thumbs remaining the same dimensions when font size is altered?

thanks again for all your help, the time you've spent and the pointers
you've given me. in future i will endeavour to ask questions here in the
format you have suggested.

cheers
--
slim

[Spartanicus]

slim <sl**@antiCorp.invalid> wrote:

Make a minimized test case and I'll have a look.
i have made a page here:

http://awash.demon.co.uk/vd_test.php

That's simply a section of your page, a minimizes test case has been
stripped down to the bare minimum needed to illustrate a single issue.
The point is to make it easier for others to help you, it's a chore
having to work your way through someone else's code to get to the real
problem. You are very familiar with your code, others aren't.
http://awash.demon.co.uk/vd_test.css

Posting a link to a site's linked stylesheet is helpful when asking for
a site review, for a minimized test case it's a bother. To get to the
issue I now have to juggle a news reader window to read what the problem
is, a window with your css, a window with your markup and a browser
window.

A minimized test case should look like this:
http://www.spartanicus.utvinternet.i...loat_issue.htm

All you have to do to is to open a single browser window, no source view
is needed, the problem is described on the page itself, both the css and
html code is displayed. The html/css code has been stripped of anything
that isn't directly related to the issue.

Indenting your code also helps others to make sense of your code,
especially nested div's are a pain to decipher without indented code.

--
Spartanicus