Re: Div rendering

"abcd" wrote:
I have below code

Use a validator. Then learn CSS. Example at bottom.



<span style="width: 250; padding-left:0px; padding-right:5px; padding-top:0px; padding-bottom:5px">

You are using an inline element (SPAN) where a block element (such as DIV) is appropriate.



<div align=center>

[align] is a deprecated attribute for all elements except (COL, COLGROUP, TBODY, TD, TFOOT, TH, THEAD, TR).
http://www.w3.org/TR/html401/index/attributes.html



<font face="Trebuchet MS"" size="2"><b>AAA</b></font>

FONT is deprecated. Use CSS.
http://www.w3.org/TR/html401/index/elements.html



In IE it renders like 3 images in one row where as in Firefox it renders 3 images in 3 seperate lines....

That is only because you did not use a DOCTYPE declaration. Put this at the top of the document, and IE behaves like Firefox:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd";>



What changes do I need to make it so that Firefox also shows me
these 3 images in one row....

See below.



...Is the HTML syntax correct...

Obviously not.


It sounds like you want floating elements. Here is an example using the CSS float property. Note that the outer div must use the clear property if you want to prevent subsequent content from displaying incorrectly.

Uing these style definitions...

div.Outer {
clear:both;
}
div.Container {
padding: 0px 5px 5px 0px;
width: 250px;
float: left;
}
div.Container div {
font-family: Trebuchet MS;
font-weight: bold;
text-align: center;
font-size: x-small;
}
div.Container img {
border: 0px;
}

....this code will do:

<div class="Outer">
<div class="Container">
<div>AAA</div>
<img src="/Yellow.png" height="4" width="186" />
<img src="A28.png" />
</div>
<div class="Container">
<div>BBB</div>
<img src="/Red.png" height="4" width="186" />
<img src="A28.png" />
</div>
<div class="Container">
<div>CCC</div>
<img src="/Red.png" height="4" width="186" />
<img src="A28.png" />
</div>
</div>

--
Dave Anderson

Unsolicited commercial email will be read at a cost of $500 per message. Use of this email address implies consent to these terms.

.

Relevant Pages

  • Re: table td padding
    ... Rearrange the images so the vertical ones are above and under the ... Because the inner table shrinks to width and gets you the look ... When I suggested getting rid of the inner table, replacing with a div, ... fancy border requirements. ...
    (alt.html)
  • Re: church website: having trouble with display in IE
    ... The odd stained-glass window menu is not of my design, ... The table with all your sliced up stained glass imagelets stays up where you want it in Firefox, even at the height of the "word" DIV at the top of the page. ... I hadn't realized you had sliced up images. ... BTW, as I was narrowing things down to make a simplified case of your site, I noticed several instances in your CSS where top, right, bottom, and left values where all identical for a given selector. ...
    (comp.infosystems.www.authoring.stylesheets)
  • Re: Best method for image bordered div?
    ... Three images on the top and and bottom of the div ... about working save for the glitch in the left bottom corner. ... anyone know of a decent image border tutorial? ...
    (alt.html)
  • Re: Div rendering
    ... Then learn CSS. ... You are using an inline element where a block element (such as DIV) ... images in 3 seperate lines.... ... Unsolicited commercial email will be read at a cost of $500 per message. ...
    (microsoft.public.scripting.jscript)
  • Re: drag-n-drop
    ... I need to apply this to a div, ... It is not likely to work on some modern browsers. ... script will work to drag images, text, and a division that contains 3 ... this one, http://cwdjr.net/test/newDrag.html, I found to be closest to what I need, except for one little thing: when I first click on div to move it, it jumps to the bottom of the page this happens only the first time I click on div after ...
    (comp.lang.javascript)
Loading