I do not understand why the editor shows one distance between the blocks, but in browsers it is completely different ... The photo shows in detail. Thank you in advance.

Placed photo here:

alt text

alt text

alt text

Code:

.okno1{width:290px; height:235px; border:2px solid; border-color:#66CCCC; background-color: #FFFF99; margin:5% 0% 0% 11%; } .okno1 ul{ line-height:25px; list-style-type: none; padding-left:25px } .okno1 img{ padding:3px;} .okno1 h3{text-align: center; } .okno2{ width:290px; height:236px; border:2px solid; border-color:#66CCCC; margin:0%; position:absolute; right:400PX; top:200PX; }
  • Here is the site, we find there why: [website] [1] In the search engine we are looking for articles on the topic of cross-browser compatibility, also go to [htmlbook] [2] [1]: xiper.net [2]: htmlbook.ru and learn html / css. - Gene Ant
  • she has already learned a lot ... watched video courses and also constantly looks in htmlbook, but I can't solve the problem ( - Oleksiy Graban
  • Of course, I apologize, but only for these first styles: border: 2px solid; border-color: # 66CCCC; margin: 5% 0% 0% 11%; I can say for sure that you know not so much about CSS. I, too, was just a beginner in the layout and after watching a couple of lessons CSS thought I had already learned it, and when it came to the matter it turned out that I don’t know anything . I advise you to at least go through a few more courses by other authors and read articles about CSS, well, the last one is to write the code with your hands, and not in the editor. - NewLife

3 answers 3

Check the site display in the IDE is not worth it. The site is always tested in the browser. This is the only way to verify the correctness of the site display. It is better to test in the latest versions of all browsers. Do not trust the built-in IDE engine. I ran into this time with the same problem.

I do that. In the IDE, I first write the code, I look at how it is visualized in the built-in engine. Then I launch it in FireFox and with the help of FireBug I edit it live, I see what is changing. All changes are transferred to the development environment. After that I look in other browsers of the latest versions. I look separately in IE9, there are no display problems in it. It also has a developer tool with the ability to enable IE8 and IE7. You can also make changes to the code in order to understand what needs to be fixed. In IE6, I do not look.

For layout tasks, this method will be enough.

    You correctly answered. Since each browser pixel size is different. For example, even the smallest. for each browser you need to adjust. You can try in%.

    • Yes, I know ... even in% does not help, I tried of course. - Oleksiy Graban
    • Do you need to lower that yellow block? - Node_pro
    • no. I do not need the same distance between the blocks. That would be displayed both in the editor and in the browser. For me at the moment it is crooked everywhere. - Oleksiy Graban
    • margin to help, LOL - Zowie
    • thanks, Cap! - Oleksiy Graban

    at least use reset.css to get started