473,856 Members | 1,683 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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

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
Jul 20 '05 #1
8 5167
|| 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
Jul 20 '05 #2
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:6e m;">
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.jp g' class='tee_thum bnail' 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
Jul 20 '05 #3
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/
Jul 20 '05 #4
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/
Jul 20 '05 #5
|| name | Spartanicus <me@privacy.net > | message |
|| news:ns******** *************** *********@news. spartanicus.utv internet.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:6e m;">


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.jp g' class='tee_thum bnail'
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
Jul 20 '05 #6
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
Jul 20 '05 #7
|| name | Spartanicus <me@privacy.net > | message |
|| news:vu******** *************** *********@news. spartanicus.utv internet.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_contai ner" 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
Jul 20 '05 #8
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
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
3499
by: Xah Lee | last post by:
with strict HTML spec, can one have <p> tags inside table's <td> tag? also, in strict XHTML, can one have <p> tages inside <div>? Thanks. Xah xah@xahlee.org ∑ http://xahlee.org/
9
3152
by: Julia Briggs | last post by:
How do I construct a <iframe> or equivalent for FireFox/NS browsers, inside a screen centered <div> tag? Can it be done?
3
3816
by: Josef K. | last post by:
Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644" onclick="__doPostBack('SitesRadioButtonList_3','')" language="javascript" />
2
2973
by: Nikolai Onken | last post by:
Hey, I am trying to learn the exact behavior of CSS and was just placing a couple of <div>'s after each other. Each of the <divhas a <pwithin and some text within the <p> Now when I add a background-color to the div, the color won't fill up the entire space I believe it should. The div only has color around the text though it has one line space to the above element. I hope it is clear what I mean:
28
5390
by: Kent Feiler | last post by:
1. Here's some html from a W3C recommendations page. <P>aaaaaaaaa<DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</DIV> 2.Although I didn't think it would make any difference, I tried it with the </p>s included as well. <P>aaaaaaaaa</p><DIV>bbbbbbbbb</DIV><DIV>cccccccc<P>dddddddd</p></DIV>
5
13601
by: Agix | last post by:
Hi there, Please check out : http://clarifysolutions.co.uk/certenroll/ The source is included below. This page is a test, so I can play about with paddings, margins and layouts using divs as semantically meaningless containers for bunch's of other elements - like everyone keeps telling me to make my code standards compliant. This request is not because I want a fix, but because I want to
5
39017
by: chakradhari.ashish | last post by:
Does anybody know how can I load an html page inside a <div</div> where the content gets update on the onclick even of anchor <a href=> </a>? I googled around and followed some links pointing me that it is possible to use javascript combined with CSS for doing this? Any ideas? Chakra
10
3212
by: Summercoolness | last post by:
so i am starting to use more of <br /and <div style="clear: both" / which is the XHTML style... now, won't those actually confuse the old browsers? for example, will the old browser treat the "div" as not closing, and so everything after the div will be treated as part of that div?
5
5271
nathj
by: nathj | last post by:
Hi All, I'm working on a new site that has a two column layout underneath a title bar. If you check out: http://www.christianleadership.org.uk/scratch/mainpage.php using IE or Opera you will see what I am after as these browsers work fine. However, in FF the results are slightly different - take a look and you'll see that the <p>, within <div class="mainContent"> has shot way over to the right. I've been working on this for 2days now...
0
9755
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10376
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
1
7928
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7084
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5754
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5954
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4567
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4168
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3194
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.