Проблемы оступа Mozilla Chrom между элементами.

noskovgleb · December 2, 2012


<!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>
        <title>Page</title>
        <meta http-equiv="Content-Type" content="text/html charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="styles/style.css" />
    </head>
    <body>
        <div id="logo">
            <table>
                <tr>
                    <td>
                        <img src="images/logo.jpg" alt="Логотип"/>
                    </td>
                    <td class="right">
                        <p class="grey">For Additional Information, Contact Us!</p>
                        <p class="green">info@memostra.com</p>
                    </td>
                </tr>
            </table>
        </div>
        <div id="topmenu">
            <ul>
                <li class="active">
                    <a href="#">
                        <span>
                            Home
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            About
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            Clothing
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            Shoes
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            Electronics
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            Perfumes
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <span>
                            Contact Us
                        </span>
                    </a>
                </li>
            </ul>
            <div id="contact">
                <a href="#">
                    <img src="images/mail.jpg" alt="mail" />
                </a>
                <a href="#">
                    <img src="images/facebook.jpg" alt="facebook" />
                </a>
            </div>
            <div class="clear"></div>
        </div>
        <div id="header" >
            <img src="images/design_03.jpg" alt="Шапка сайта" />
            <div id="content_header">
                <h1>Welcome to Mostra!</h1>
                <h3>Quality Products - Great Prices!</h3>
                <p>
                    <a href="#">
                        <span>
                            Check it Out!
                        </span>
                    </a>
                </p>
            </div>
        </div>
        <div id="menu">
            <table border="1px">
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td class="active">
                                    <a href="#">
                                        <span>
                                            All Categories
                                        </span>
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        <span>
                                            Men
                                        </span>
                                    </a>
                                </td>
                                <td>
                                    <a href="#">
                                        <span>
                                            Women
                                        </span>
                                    </a>
                                </td>
                            </tr>
                        </table> 
                    </td>
                    <td class="right">
                        <div id="search">
                            <form name="searchform" action="#" method="post">
                                <table>
                                    <tr>
                                        <td>
                                            <div>
                                                <input type="text" name="words" value="Browse Products" />
                                            </div>
                                        </td>
                                        <td>
                                            <input type="image" src="images/search.jpg" />
                                        </td>
                                    </tr>
                                </table>
                            </form>
                        </div>
                    </td>
                </tr>
            </table>


        </div>



    </body>
</html>

CSS файл


/* 
    Document   : styles
    Created on : 29.11.2012, 9:27:31
    Author     : Admin
    Description:
        Purpose of the stylesheet follows.
*/
body{
    font-family: Arial, "Timew New Roman", sans-serif;
    padding-left: 41px;
    padding-right: 41px;
    padding-top: 20px;
    padding-bottom: 12px;
}

#logo table{
    width: 100%;
}

.right{
    text-align: right;
}

#logo p{
    margin: 0px;
    font-style: italic;
}

.grey{
    color: #bab8b8;

}

.green{
    color: #87ac75;
    font-weight: bold;
}

#topmenu ul li{
    float: left;
    list-style: none;

}

#topmenu ul{
    margin: 0px;
    padding: 0px;

}
.clear{
    clear: both;
}

#topmenu{
    margin-top: 10px;
    background-color: #218cc8;
}

#topmenu ul li a{
    color: #fff;
    display: block;
    font-size: 120%;
    padding: 10px 29px;
    text-decoration: none;
}

#topmenu ul li.active a, #topmenu ul li a:hover{
    background-color: #125c87;
}

#contact{
    margin-right: 20px;
    margin-top: 10px;
    float: right;
}

#contact a{
    text-decoration: none;
}

#header  img{
    width: 100%;
    margin-top: 16px;
}

#content_header{
    float: right;
    position: relative;
    text-align: right;
    top: -160px;
    right: 40px;
}

#content_header h1, h3{

    text-align: right;
    margin:0px;
    padding: 0px;
}

#content_header h1{
    color: #5390b4;  
    font-size: 210%;
}

#content_header h3{
    color: #87abbf;
    font-size: 100%;
}

#content_header a{
    text-decoration: none;
    color: white;
    background-color: #f28221;
    padding: 8px 20px;
}

#content_header p{
    margin-top: 40px;
}

#menu{
   margin-top: 10px;

}
#menu table{
    width: 100%;
    text-align: center;
}

#menu table table{
    width: auto;
}

#menu td a{
    background-color: #ededed;
    color: #d2d2d1;
    text-decoration: none;
    padding: 10px 20px;
    font-weight: bold;
    display: block;
}

#menu td.active a , #menu td a:hover{
    background-color: #d2d2d1;
    color: #136392;
}
#menu .right{
    float: right;
    text-align: right;
}



#search div input{
    border: 3px solid #c5debb;
    height: 30px;
    width: 200px;
    padding-left: 5px;
    color: #676767;
}

#search div{
    border: 1px solid #a5c796;
}

#header{
    border: 1px solid black;
}

Николя223 · December 2, 2012

даже и смотреть не стану... margin и padding сбрасывать нужно в начале CSS. у хрома своя стилевая таблица для несброшенных))

Yazon_Nile · December 4, 2012

Скрин бы, с проблемными местами)

Justnewone · December 4, 2012

Блин, ну неужели так трудно ссылку с примером повесить, решение за 1-15 минут. А теперь вот кто захочет копипастить?

Sign In

Проблемы оступа Mozilla Chrom между элементами.

Question

noskovgleb

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Николя223

Link to comment

Share on other sites

Yazon_Nile

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information