Float layout problem

J

Jens Lenge

I want to transfer a small table-based Layout to a CSS-based one. The task
is quite simple, just have a paragraph of text appear to the right of an
image with a fixed left margin. The result should work with as many browsers
as possible (and has to work with Internet Explorer 6).

Old version (table-based):
--------------------------------
<table>
<tr>
<td align="center" width="120"> <img src="image.jpg"> </td>
<td align="left" ... (long text paragraph here)... </td>
</tr>
</table>

My CSS approch:
--------------------
<div style="float:left; text-align:center; width:120px">
<img src="image.jpg">
</div>
<divstyle="text-align:left; margin-left:120px">
.... (long text paragraph here)...
</div>

When displayed with IE6, the text div has the correct position, it is
exactly right of the image div without any gap and has the same upper
position as the image div. The problem is that the text inside the div has a
slightly higher indent where it is *besides* the image div than it has
*below* the image div.

Is this normal or just an IE6 bug? How can I fix this (so that it works even
with IE6)?

Jens
 
J

Jens Lenge

brucie said:
<looks around for URL/>

Sorry, its not available on the web. I've stripped down the code to a very
small document and attached it to this posting.

Jens
 
B

brucie

In alt.html Jens Lenge said:
Sorry, its not available on the web.

upload it somewhere
I've stripped down the code to a very
small document and attached it to this posting.

do not post attachments to non binary groups. i'm surprised my
newsserver even let it through.

and i'm not going to open an unknown attachment.
 
J

Jens Lenge

upload it somewhere

I would already have if I could, but I have no access to any webspace right
now.
do not post attachments to non binary groups.

I know this rule, but thought this is just to limit sizes and traffic,
that's why I made it so small.
Sorry if you feel offended, I will not post any further attachments.
and i'm not going to open an unknown attachment.

Ok, I probably also wouldn't.
As I cannot upload, would you please consider having a look at the code
itself?
Here is the attachment as plain text; you could just copy+paste it to a text
file to open it.

In the CSS approach, the first three lines have a little mor indent than the
last three.

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MyTitle</title>
</head>
<body>

<h1>Table-based:</h1>

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="120" align="center" valign="top" bgcolor="#CCCCCC">
(image)<br>(image)<br>(image)
</td>
<td align="left" valign="top" bgcolor="#CCFFCC">
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
</td>
</tr>
</table>

<h1>CSS:</h1>

<div style="float:left; text-align:center; width:120px;
background-color:#CCCCCC">
(image)<br>(image)<br>(image)
</div>
<div style="text-align:left; margin-left:120px; background-color:#CCFFCC">
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
This is a long text paragraph. This is a long text paragraph.<br>
</div>

</body>
</html>
 
B

brucie

In alt.html Jens Lenge said:
I just figured out what makes the difference:
If the element to the left is an <img>, then it works.
If it is a <div > or <p> instead, then the error that I described occurs.
How can I solve this if I need to have may text float right of an <div> or
<p>?

change p{margin-left:110px;} to p{margin-right:110px;}

and

img{float:left;} to img{float:right;}

easy peasy:
http://moreshit.usenetshit.info/image-floated-right-thingy.shit
 
H

Henry

Henry said:
brucie wrote:





You wish...

FWIW in IE6 the image is to big in both examples.


;)


What's wrong with that one?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>New Page 1</title>
<style>
</style>
</head>

<body>

<table border="1" width="98%" id="table1" bordercolorlight="#000000"
cellspacing="0" cellpadding="0" bordercolordark="#000000">
<tr>
<td width="980">
<img border="0" src="02-lge.png" width="100" height="100" align="left">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam
erat volutpat. Nulla ac purus at justo tincidunt semper. Proin
adipiscing. Nullam at mauris. Fusce at quam. Pellentesque habitant
morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Aliquam erat volutpat. Morbi at nunc ut ligula rutrum malesuada.
Pellentesque varius est sed purus. Ut diam lacus, mattis nec, accumsan
ac, pulvinar eu, eros. Cras ipsum. Aliquam augue.</p></td>
</tr>
</table>
</body>
</html>

Size of that is 931 bytes. Is compatible with nearly all browsers.

Size of brucie page is 990 and has a problem in IE6.

I know that I'm the pain in ass but I have to understand properly
something before I would use.

brucie...

you need sex urgently!!!

;)
 
H

Henry

Sorry, I had title to long...

;)

If I would use brucie' title, the size of the file is 909 bytes.

:-O
 
H

Henry

Karl said:
Please don't ever create another web page again.

-Karl


Why?


;P


I'm strugling with css for some time and more I work with tables and
css, more I hate damn thingy.

Hack here, fix here, script here...

If works - don't fix it!

;)
 
H

Henry

brucie said:
In alt.html Henry said:




too big for what?



The image goes over box border in my IE6 with Service Pack 2

My screen res is 1024x768.

:(

In Firefox looks perfect.
 
B

brucie

In alt.html Henry said:
The image goes over box border in my IE6 with Service Pack 2

just realized what you were talking about, its fixed now
My screen res is 1024x768.
irrelevant

In Firefox looks perfect.

because FF and other modern browsers support min-height. a hack is
needed for IE.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,905
Latest member
Kristy_Poole

Latest Threads

Top