CODEWITHSUNDEEP
htmlcssstylesoverlap
Ruben Amendoeira
Ruben Amendoeira

Reputation: 9

Multiple CSS styles disrupting eachother

I've been trying to have my website's navigation bar markup in a seperate file, and then include it on the head of all the website's pages. However, I use a css style named navstyles.css for my toolbar and in my other page i use a css style named mainstyle.css and they seem to mess up when used in the same file (even tho im using them at different times)

toolbarkmarkup.php

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/navstyles.css">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script src="./scripts/navscript.js"></script>

    <div class = "container">
        <div id='cssmenu'>
            <ul id = "ulyo">
                <li class = "logoSpace" id = "logoSpace"><a href = '#'></a></li>
                <li><a href='#'>Home</a></li>
                <li><a href='#'>Search</a></li>
                <li><a href='#'>Trends</a></li>
                <li class = "emptySpace" id = "emptySpace"><a href='#'></a></li>
                <li class = "profileSpace" id = "profileSpace"><a href='#'>Profile</a>
                    <ul>
                        <li><a href='#'>Settings</a></li>
                        <li><a href='#'>Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <script>
        pos();
    </script>
</head>
<body>
</body>

showpage.php

<head>
    <?php
    include 'toolbarmarkup.php';
    ?>
    <link rel="stylesheet" type="text/css" href="./css/mainstyle.css"/>
</head>
<body></body>

mainstyle.css 

body {
    white-space: pre-wrap;
    /* CSS3 */
    white-space: -moz-pre-wrap;
    /* Firefox */
    white-space: -pre-wrap;
    /* Opera <7 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* IE */
    background: #f9f9f9;
    font-family: 'Helvetica';
    line-height: 20px;
}



.header{
    width: 100%;
    height: auto;
    background-color: blue;
}

.image{
    margin: auto;
    width :100%;
    height: auto;
    max-height : 500px;
    padding-bottom: 70px;
}

.infoText{

    padding-top: 20px;
    vertical-align:middle;
    margin: auto;
    max-width: 900px;
    width: 90%;
    color: #262626;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16;
}

.titleText{
    margin: auto;
    font-size: 30;
    font-family: Century Gothic, sans-serif;
    text-align: center;
    color: black;
}

.buttons{
    margin: auto;
    text-align: center;
    padding: 10px;
    height: 45px;
    width : 120px;
}

.buttons img{

    margin-left:auto;
    margin-right:auto;
}

img:hover{
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

navstyles.css

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    line-height: 1;
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}


body{
    line-height: 0px;
}

.content{
    background: red;
}

.logoSpace{
    width: 200px;
    text-align: center;
    background-image: url("./img/logo.png");/
    background-repeat:   no-repeat;
    background-position: center center;
    top: 6px;
}

.form{
    display:inline;
}


.profileSpace{
    content: "efuh";
}




.container{
    width: 100%;
    background: grey;
    height: 47px;
    position: fixed;
    top: 0px;
    left: 0px;
    background: #333333;
}


#cssmenu #menu-button {
    display: none;
}
#cssmenu {
    height: inherit;
    position: fixed;
    top: 0px;
    left: 0px;
    font-family: Helvetica, sans-serif;
    background: #333333;
}
#cssmenu > ul > li {
    float: left;
}


#cssmenu.align-center > ul {
    font-size: 0;
    text-align: center;
}
#cssmenu.align-center > ul > li {
    display: inline-block;
    float: none;
}
#cssmenu.align-center ul ul {
    text-align: left;
}
#cssmenu.align-right > ul > li {
    float: right;
}
#cssmenu > ul > li > a {
    padding: 15px;
    padding-top: 19px;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #dddddd;
    font-weight: 700;
    text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
    color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
    padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:affrter {
    position: absolute;
    top: 22px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';
}
#cssmenu > ul > li.has-sub > a:before {
    position: absolute;
    top: 19px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
    top: 23px;
    height: 0;
}
#cssmenu ul ul {
    position: absolute;
    left: -9999px;
}
#cssmenu.align-right ul ul {
    text-align: right;
}
#cssmenu ul ul li {
    height: 0;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#cssmenu li:hover > ul {
    left: auto;
}
#cssmenu.align-right li:hover > ul {
    left: auto;
    right: 0;
}
#cssmenu li:hover > ul > li {
    height: 35px;
}
#cssmenu ul ul ul {
    margin-left: 100%;
    top: 0;
}
#cssmenu.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
}
#cssmenu ul ul li a {
    border-bottom: 1px solid rgba(150, 150, 150, 0.15);
    padding: 11px 15px;
    width: 170px;
    font-size: 12px;
    text-decoration: none;
    color: #dddddd;
    font-weight: 400;
    background: #333333;
    background: #525252;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
    border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
    color: #ffffff;
    background: #333333;
}

#cssmenu ul ul li.has-sub > a:after {
    position: absolute;
    top: 16px;
    right: 11px;
    width: 8px;
    height: 2px;
    display: block;
    background: #dddddd;
    content: '';

}
#cssmenu.align-right ul ul li.has-sub > a:after {
    right: auto;
    left: 11px;

}
#cssmenu ul ul li.has-sub > a:before {
    position: absolute;
    top: 13px;
    right: 14px;
    display: block;
    width: 2px;
    height: 8px;
    background: #dddddd;
    content: '';

    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
    right: auto;
    left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
    top: 17px;
    height: 0;
}
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {


    body{
        line-height: 0px;
        font-size: 0px;
    }

    #emptySpace{
        width: 0px;
        height: 0px;
        background: green;
        display:none;
        visibility: hidden;
    }

    .logoSpace{
        width: 0px;
        height: 0px;
        background: grey;
        content: '';
        visibility: hidden;
    }

    #cssmenu {
        width: 100%;
    }
    #cssmenu ul {
        width: 100%;
        display: none;
    }
    #cssmenu.align-center > ul {
        text-align: left;
    }
    #cssmenu ul li {
        width: 100%;
        border-top: 1px solid rgba(120, 120, 120, 0.2);  background: #333333;
    }
    #cssmenu ul ul li,
    #cssmenu li:hover > ul > li {
        height: auto;
    }
    #cssmenu ul li a,
    #cssmenu ul ul li a {
        width: 100%;
        border-bottom: 0;
    }
    #cssmenu > ul > li {
        float: none;
    }
    #cssmenu ul ul li a {
        padding-left: 25px;
    }
    #cssmenu ul ul ul li a {

        padding-left: 35px;
    }
    #cssmenu ul ul li a {
        color: #dddddd;
        background: #525252;
    }
    #cssmenu ul ul li:hover > a,
    #cssmenu ul ul li.active > a {
        color:  #ffffff;
        background: #333333;
    }
    #cssmenu ul ul,
    #cssmenu ul ul ul,
    #cssmenu.align-right ul ul {
        position: relative;
        left: 0;
        width: 100%;
        margin: 0;
        text-align: left;
    }
    #cssmenu > ul > li.has-sub > a:after,
    #cssmenu > ul > li.has-sub > a:before,
    #cssmenu ul ul > li.has-sub > a:after,
    #cssmenu ul ul > li.has-sub > a:before {
        display: none;
    }
    #cssmenu #menu-button {
        display: block;
        padding: 17px;
        color: #dddddd;
        cursor: pointer;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 700;
    }
    #cssmenu #menu-button:after {
        position: absolute;
        top: 22px;
        right: 17px;
        display: block;
        height: 4px;
        width: 20px;
        border-top: 2px solid #dddddd;
        border-bottom: 2px solid #dddddd;
        content: '';
    }
    #cssmenu #menu-button:before {
        position: absolute;
        top: 16px;
        right: 17px;
        display: block;
        height: 2px;
        width: 20px;
        background: #dddddd;
        content: '';
    }
    #cssmenu #menu-button.menu-opened:after {
        top: 23px;
        border: 0;
        height: 2px;
        width: 15px;
        background:  #ffffff;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #cssmenu #menu-button.menu-opened:before {
        top: 23px;
        background:  #ffffff;
        width: 15px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    #cssmenu .submenu-button {
        position: absolute;
        z-index: 99;
        right: 0;
        top: 0;
        display: block;
        border-left: 1px solid rgba(120, 120, 120, 0.2);
        height: 46px;
        width: 46px;
        cursor: pointer;
    }
    #cssmenu .submenu-button.submenu-opened {
        background: #262626;
    }
    #cssmenu ul ul .submenu-button {
        height: 34px;
        width: 34px;
    }
    #cssmenu .submenu-button:after {
        position: absolute;
        top: 22px;
        right: 19px;
        width: 8px;
        height: 2px;
        display: block;
        background: #dddddd;
        content: '';
    }
    #cssmenu ul ul .submenu-button:after {
        top: 15px;
        right: 13px;
    }
    #cssmenu .submenu-button.submenu-opened:after {
        background:  #ffffff;
    }
    #cssmenu .submenu-button:before {
        position: absolute;
        top: 19px;
        right: 22px;
        display: block;
        width: 2px;
        height: 8px;
        background: #dddddd;
        content: '';
    }
    #cssmenu ul ul .submenu-button:before {
        top: 12px;
        right: 16px;
    }
    #cssmenu .submenu-button.submenu-opened:before {
        display: none;
    }
}

Problem is, the body seems to take styles from the header style and vice versa, any advice? Appreciate it

Upvotes: 0

Views: 49

Answers (1)

Jacob Petersen
Jacob Petersen

Reputation: 1453

Since both CSS files will be sent to the browser for the page, both CSS files will be used by the browser for the whole page. Once that happens, you're at the mercy of CSS specificity rules. This is too much CSS to solve in a forum like this but here are some resources that might help you understand the problem:

Mozilla Developer Network

Quora post on CSS ordering

Smashing Magazine Article

Upvotes: 1

Related Questions