Secondary Css document having no effect on related div with id

Question

On my site for whatever reason the CSS is refusing to take effect on the html and as far as I can tell its only from that specific sheet, my global one seems to be working fine.

HTML:

<!DOCTYPE html>
    <html>
    <head>
    <title>Anise Technologies</title>
    <meta charset="utf-8">
    <?php include 'global/includes/header.php'?>
    <link rel="stylesheet" type="text/css" href="home.css">
    </head>
    <body>
    <?php include 'global/includes/nav.php'?>
        <div id="main">
            <div id="slider">
            </div>
            <div id="promo-tiles">
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    <?php include 'global/includes/footer.php'?>
    </body>
    </html>

CSS:

@charset "utf-8";
/* CSS Document FOR HOME PAGE ONLY*/
.main {
    height: 100%;
}
.slider {
    height: 60%;
}
.promo-tiles {
    height: 30%;
}
.promo-tiles-ul{
    width: 25%;
    display: inline-block;
    list-style: none;
}
.promo-tiles li{
    color: white;
}

Please provide HTML/CSS sample. Unless you php is totally broken what you use to render the page makes no difference to CSS. — Alexei Levenkov, Jan 18 '16 at 02:10
@AlexeiLevenkov the PHP code is working perfect and the html and CSS or right there — Luc, Jan 18 '16 at 02:11
Than remove unrelated PHP references/tag from code (I've removed all unrelated "stuck here" / "starting for fun" text from the post, consider keeping it that way unless you find that "stuck" somehow related to your problem) — Alexei Levenkov, Jan 18 '16 at 02:13

DiddleDot · Accepted Answer · 2016-01-18T02:30:40.607

1

You're using the class selector. Change them to the id selector

#main {
    height: 100%;
}
#slider {
    height: 60%;
}
#promo-tiles {
    height: 30%;
}
#promo-tiles ul{
    width: 25%;
    display: inline-block;
    list-style-type: none;
}
#promo-tiles li{
    color: white;
}

edited Jan 18 '16 at 02:30

answered Jan 18 '16 at 02:14

DiddleDot

745
5
16

I wasn't to cry but thanks :P and for whatever reason the percent isn't working with heights only EMs are not sure why – Luc Jan 18 '16 at 02:19
If you want to have a height as a percentage, the element you are trying to set the height as a percentage must have a parent element with a fixed height. Have a look at the answer here for a more detailed explanation - http://stackoverflow.com/questions/1622027/percentage-height-html-5-css – DiddleDot Jan 18 '16 at 02:23
that worked thanks! And for what ever reason the list-style: none is doing nothing either... – Luc Jan 18 '16 at 02:28
The correct syntax should be `list-style-type: none;` I'll edit the answer. – DiddleDot Jan 18 '16 at 02:29
ok I'm using sublime text for the first time so I'm not exactly used to the differences between it an dreamweaver thanks tho! – Luc Jan 18 '16 at 02:31

score 0 · Answer 2 · answered Jan 18 '16 at 02:15

0

You are using classes in CSS and expect it somehow find elements by ID. Pick one and it would work fine:

#main {
    height: 100%;
}

Or with classes

<div class="main">

answered Jan 18 '16 at 02:15

Alexei Levenkov

98,904
14
127
179

I wasn't to cry but thanks :P and for whatever reason the percent isn't working with heights only EMs are not sure why – Luc Jan 18 '16 at 02:19
@user3784444 getting height 100 on HTML elements is interesting exercise, but that is not point of your post from what I can tell... (You really need to know 100% of what - if you clarify your goal you may be able to find existing questions on that or ask new one). – Alexei Levenkov Jan 18 '16 at 02:24

Secondary Css document having no effect on related div with id

2 Answers2