Starting Over - floated image not aligning unordered list properly in IE

Hi again.

The page is showing the images now on geocities. Still have the
problem where the text does not start at the same level as the top of
the image in IE. It does show properly in Firefox and Netscape.

Recall I added I this to my css


#contentleft .news .leftpadding .newsitems p {
margin-left: 80px;
}


The url again is http://geocities.com/terrance.murray/veggies

--
Thanks,
Terry

Terry <terry.murray (AT) rogers (DOT) com> wrote: news:1187976158.379935.235630
@x40g2000prg.googlegroups.com:

The url again is http://geocities.com/terrance.murray/veggies

Free host, php, no adds

http://www.leadhoster.com/signup.html

--
BootNic Friday August 24, 2007 2:29 PM
Man who fight with wife all day get no piece at night.
*Ancient Chinese Proverbs*

Terry wrote:

Hi again.

Still have the
problem where the text does not start at the same level as the top of
the image in IE. It does show properly in Firefox and Netscape.

When I first looked at the source, I found the method for 'newsitems' to
be awkward and overly complex. I tried to fathom where IE could be
getting the extra white space from. It appears to be an unalterable
white space for a List since I could not compensate. When reaching a
deadlock such as this look for an alternate method. As the saying goes,
"there's more than one way to skin a cat".

I love the KISS method. I would not use List for those 'newsitems'
especially since different browsers handle Lists differently. I would
simply use a DIV and place the images and texts directly inside it. In
order to give each individual 'newsitem' a different background color
alternating pink/purple, place each into different DIVs, each having a
different class. This works fine for all browsers. You may also find
that you can eliminate one or two DIVs such as DIV.leftpadding.

--
Gus

On Aug 24, 3:57 pm, Gus Richter <gusrich... (AT) netscape (DOT) net> wrote:

Terry wrote:
Hi again.

Still have the
problem where the text does not start at the same level as the top of
the image in IE. It does show properly in Firefox and Netscape.

When I first looked at the source, I found the method for 'newsitems' to
be awkward and overly complex. I tried to fathom where IE could be
getting the extra white space from. It appears to be an unalterable
white space for a List since I could not compensate. When reaching a
deadlock such as this look for an alternate method. As the saying goes,
"there's more than one way to skin a cat".

I love the KISS method. I would not use List for those 'newsitems'
especially since different browsers handle Lists differently. I would
simply use a DIV and place the images and texts directly inside it. In
order to give each individual 'newsitem' a different background color
alternating pink/purple, place each into different DIVs, each having a
different class. This works fine for all browsers. You may also find
that you can eliminate one or two DIVs such as DIV.leftpadding.

--
Gus

Thanks for getting back to me Gus.

I guess the reason that I used a list to handle the 'newsitems' is
because a book that I just got yesterday used that method to do
something very similar.

I will not be using those colors with the news items I just wanted to
see what was going on. I wanted to see what elements were creating
which spaces.

So if understand you correctly create a container div for each news
item.
In the container div place two more divs - one for the image and one
for the text.
I guess I should then float the div containing the image left and make
sure that the margin of the div containing the text is greater than
the width of the div containing the image.

Do I have it right?

I think someone else suggested that instead of using float that I make
my text div display:inline and give my image the align attribute.
I thought,however, that the align attribute is deprecated.

If you understand what was suggested in the other method could you
please explain it to me.

By the way, I just got set up with a free server.

My website address is http://terry.atwebpages.com

--
Thanks,
Terry

In article <SPWdnYImldliZlPbnZ2dnUVZ_gqdnZ2d (AT) golden (DOT) net>,
Gus Richter <gusrichter (AT) netscape (DOT) net> wrote:

Terry wrote:

I am still hoping that someone can address the problem which is text
which is part of an unordered list is not aligning itself properly
against a left floated image.

It does what it was designed to do on Firefox and Netscape.

The way a float works is that subsequent text shrinkwraps around the
float. You see this behavior clearly on IE. It also happens on Firefox,
etc. except that the text is not sufficiently long enough to clear the
image. Increase the text size by one or more lines and you will see it
also shrinkwrap.

In order to *not* have the text shrinkwrap around the image, simply
apply to the text a margin value which is wider than the image width and
the text will keep within the margin.

And know that WinIE6 (at least) adds 3px in many circumstances
between the float and the adjacent content. This was done, imo,
to allow some grace between a floated picture and adjacent text,
well intentioned enough. Some people call it a bug. Authors now
use floats to layout generally and it goes against standards
which many other browsers respect and they curse this deviation
on the part of IE. The most frustrated of them are those who
worry about pixel perfection.

--
dorayme

Terry wrote:

So if understand you correctly create a container div for each news
item.
In the container div place two more divs - one for the image and one
for the text.
I guess I should then float the div containing the image left and make
sure that the margin of the div containing the text is greater than
the width of the div containing the image.

Do I have it right?

Well, try this:

<div id="contentleft">
<div class="leftheading"><img src="images/newsandevents.jpg"
alt="newsheading" height=25 width=179></div>

<img src="images/broccoli_main.jpg" alt="Broccoli" height="60" width="76">
<p class="date">18/12/2005</p>
<p><a href="">Well let's see</a> if this works. I am certainly hoping
that it will.</p>
<div class="horRule" style="clear:both;"><hr></div>

<img src="images/pastries.jpg" alt="Pastries" height="60" width="76">
<p class="date">18/12/2005</p>
<p><a href="">You never know</a> it might work. Let's hope for the
best.</p>
<div class="horRule" style="clear:both;"><hr></div>
</div>

Note that it has no further DIVision other than the Clearing DIVs.
If you require selective changes, then sure, create more DIVs around
each section as needed.

For the above, changes try some of these Style Additions to your existing:

#contentleft img {float:left;}
#contentleft .date {margin-top:0;}
#contentleft p {text-align:left;margin-left:80px;}

That's not to say to leave all your styles like that - it needs fine
tuning and a bit of cleaning up. Best to start afresh.

I think someone else suggested that instead of using float that I make
my text div display:inline and give my image the align attribute.
I thought,however, that the align attribute is deprecated.

text-align is what is used for "inline" elements.
margin-left and/or margin-right is used for block elements.

If you understand what was suggested in the other method could you
please explain it to me.

I'm not sure, but I believe that the intent was to change the <p>
element from Block to Inline. It won't work as desired, since the text
will then align to the bottom of the image - img is an inline element
and will take text-align no problem, in fact, it has a default of
text-align:left (for LTR).

My website address is http://terry.atwebpages.com

Excellent.

--
Gus

Hi Gus.

I think someone else suggested that instead of using float that I make
my text div display:inline and give my image the align attribute.
I thought,however, that the align attribute is deprecated.

text-align is what is used for "inline" elements.
margin-left and/or margin-right is used for block elements.

If you understand what was suggested in the other method could you
please explain it to me.

I'm not sure, but I believe that the intent was to change the <p
element from Block to Inline. It won't work as desired, since the text
will then align to the bottom of the image - img is an inline element
and will take text-align no problem, in fact, it has a default of
text-align:left (for LTR).

Actually what the fellow was suggesting is use align=left (not css,
just straight html markup) on the image and then have a div around the
text which should have the display property set to inline.

Unfortuately, when I tried this method the last line of the text
wrapped around the image and I was also not able to get any horizontal
space between the image and the text.

I had to add a height=100% to the containing div of the text div in
order to get the text to start at the same level as the top of the
image.
I also tried giving the div containing the text a margin-left=80px
entry but that did not help either.

I think I am going to try your method now.

The url for the page when method of the other guy was used is
http://geocities.com/terrance.murray...es/default.htm



--
Thanks,
Terry

Hi again Gus.

Terry wrote:

I think I am going to try your method now.

Thanks alot. Your method worked and is a whole lot simpler than the
method that I was trying to employ originally.

I will have it up on my real site soon.

--
Thanks again,
Terry