Member Avatar for Pim

Hello,

This is the css:

ul
{
float: left; 			/*Het plaatje van de persoon*/
position: fixed;
margin-left: 20px;
margin-top: 2px;
}

li
{
float: top;
postion: fixed;
margin left: 20px;
margin-top: 5px;
list-style: none;
}

p
{
margin left: 5px;
}

body
{
background-color: #66FF66;
}

And the HTML:

<html>
<head>
<title>Ding</title>
<link rel="stylesheet" type="text/css" href="http://opacity.atspace.com/style2.css">
</head>
<body>

<li>
<img src="" width="200" heigth="150" >
<img src="http://www.dogbreedinfo.com/images17/NorthernInuitDogFreya14wks.JPG" width="200" heigth="150" >
<img src="" width="200" 

heigth="150" >
</li>

<ul>
<img src="http://www.zefhemel.com/upload/2008/02/funny-cat.jpg" width="200" heigth="150">
</ul>
<p>
Text
Text
</p>
</body>
</html>

The <u>l items are supposed to float left, and the <li> items are supposed to float to the top, with text in the middle.

In Internet Explorer, this way I can achieve this result, in Firefox I can't. Even though in the CSS file I put the

float: left;

in the ul, the text will be on the left, and not the image.

What would be the way to fix this?

If you have another suggestion to make some images float left and the others up, it is very welcome.

Thank you.

  • 4 Contributors
  • 7 Replies
  • 194 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by Pim

Dani AI

Generated

A quick diagnosis based on the thread: the layout issues in Firefox come from a mix of invalid CSS, malformed HTML and conflicting positioning rules. already flagged that float: top is not a valid value; is correct that li elements must live inside a ul/ol. There are also several typos in the CSS (for example postion, margin left, heigth) and a use of position: fixed on elements that are intended to flow — browsers handle that differently, which explains why IE and Firefox behaved differently.

Practical fixes and a reliable pattern:

  • Use a standards DOCTYPE (for example <!DOCTYPE html>) so browsers render in standards mode.
  • Fix HTML structure (put li inside ul/ol, give images alt attributes) and correct CSS typos (position, margin-left, height).
  • Don’t combine position: fixed/absolute with float for the same element; floated layout applies to normal-flow elements.
  • Contain floats with a clearfix or by giving the sibling a block-formatting context (overflow). That prevents overlap and keeps text beside the image.

Example minimal pattern (HTML + CSS):

<!DOCTYPE html>
<div class="media clearfix">
  <img class="thumb" src="photo.jpg" alt="photo">
  <div class="card">Text goes here…</div>
</div>

<style>
.thumb { float: left; width: 180px; margin: 0 16px 16px 0; display:block; }
.card  { overflow: auto; } /* keeps layout consistent across browsers */
.clearfix::after { content: ""; display: table; clear: both; }
</style>

Troubleshooting tips: open Firefox Inspector and check the Computed Styles to see which properties were applied or ignored; validate the HTML/CSS to catch typos; try a tiny isolated example (image + one box) to reproduce the problem. Finally, consider modern layout (flexbox) when upgrading: display: flex; gap: 16px; align-items: flex-start; gives predictable, cross-browser results.

Recommended Answers

All 7 Replies

Member Avatar for almostbob

There is no float :top; property
float takes left right none

Member Avatar for MidiMagic

The li tag is not allowed to be alone. It must be directly inside a ul or ol pair.

Member Avatar for almostbob

Its also very bad form, to get your images from someone elses servers.

Member Avatar for MidiMagic

The normal way to control where things are on the page is to control the order the items are listed in the html file. Objects are placed from top to bottom, and within a line, from left to right.

Do NOT think of a web page as a sheet of paper that you place things on in various places. Think of it as a scroll that grows longer downward as you add more content.

Member Avatar for Pim

Okay well I modified the design. I've got a new problem with the float property now: I want to make an image float to the left, with a box with text in in on the right. In IE this works fine, Firefox however insists on placing the banaan.jpg over the box. Is this fixable?

CSS:

div.box /* Zorgt voor het textvak in het midden. Zoek naar div bij w3schools. */
{
color: green;
margin: 5px;
border: 1px solid black;
width: 400px;
height: 510px; 
float: none;
}

body
{
background-color: #FFFFFF;
}

img.onder
{
margin: 5px,5px,5px,5px;
float: left;
}


p.text
{
margin: 5px;
}

The HTML code:

<html>
<head>
<title>Ding</title>
<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<img class="onder" src="banaan.jpg">

<div class="box">
<p class="text">
Hier komt de tekst.
</p>
</div>


</body>
</html>

Thank you.

Member Avatar for ccube921

I don't see any elements with a float: right; in your stylesheet.

Member Avatar for Pim

The text shouldn't be on the right of the page, it should be on the right of the image.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.