All geek questions in one place

How to fix this simple CSS error in IE?

I have four elements divlocated on the left. The third divis cleared.
In Firefox and Chrome, the elements are arranged as expected: the first and second divare adjacent to each other and are above the third and fourth div, which are also adjacent to each other.
IE7, on the other hand, places the fourth divnext to the first and second divand third divbelow.

I know that I can fix this by adding an item brafter the second div, but I would prefer not to edit the markup if I don't need it. Is there a more elegant way to solve the problem?

I tried to fix it for a while in Google, but did not find it, which is quite surprising, given how elementary the problem is. Maybe I'm missing something obvious, is there a link site that lists simple CSS issues like this one, or am I just not aware of basic CSS?

Edit: I made the code sample a little more complicated after Nazgulled “solved” the problem (see comments). Now instead

div, and the third divis cleared instead of the second.

Here is the complete source code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
            div
            {
                width: 100px;
                height: 100px;
                color: white;
                font-size: 3em;
                float: left;
            }

            #divone
            {
                background-color: red;
            }

            #divtwo
            {
                background-color: blue;
            }

            #divthree
            {
                background-color: green;
                clear: both;
            }

            #divfour
            {
                background-color: purple;
            }
        </style>
    </head>
    <body>
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </body>
</html>

Here's what it looks like in Chrome:
Chrome example http://img301.imageshack.us/img301/3135/chromev2tp4.png

Here's what it looks like in IE7:
Example IE http://img111.imageshack.us/img111/8195/ie7v2cg3.png

+3
4

...

CSS. IE7, , HTML.

, div , div - . , CSS.

Object Oriented CSS Framework div, , OOCSS. CSS IE7, OOCSS , .


, , , , , CSS. , , , , ; , .

, IE7 CSS, . CSS - , , CSS HTML. , OOCSS, , CSS.

, .

+3

, , :

  • float div
  • clear #divtwo
  • float: left #divtwo #divthree

chrome Firefox, IE 7 ( ).

+5

, , <div> , clear #divthree. #divthree #divfour #divone #divtwo, :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>IE Float Test</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style type="text/css">
                #divone, #divtwo, #divthree, #divfour
                {
                        width: 100px;
                        height: 100px;
                        color: white;
                        font-size: 3em;
                        float: left;
                }

                #divone
                {
                        background-color: red;
                }

                #divtwo
                {
                        background-color: blue;
                }

                #divthree
                {
                        background-color: green;
                }

                #divfour
                {
                        background-color: purple;
                }

                #container {
                        width: 200px;
                        zoom: 1;
                }
        </style>
    </head>
    <body>
    <div id="container">
        <div id="divone">one</div>
        <div id="divtwo">two</div>
        <div id="divthree">three</div>
        <div id="divfour">four</div>
    </div>
    </body>
</html>

zoom #container , IE6/7 Escaping Floats Bug.

, <br> <div> #divtwo clear: left;:

<div id="divone">one</div>
<div id="divtwo">two</div>
<br style="clear: left;" />
<div id="divthree">three</div>
<div id="divfour">four</div>

, westciv.com.

+2

:

display:inline-block;

at #divtwo. If this works, I would certainly add some conditional comments for IE7

0
source

Source: https://habr.com/ru/post/1702202/

More articles:


All Articles