CODEWITHSUNDEEP
htmlcss
edooley
edooley

Reputation: 27

Why isn't my css affecting my div?

My css has been working fine on the past 2 pages of a site I am working on, but all of the sudden, I have a div that I am trying to style, but nothing I put into css takes effect on the div. Maybe I'm missing something simple or have something named wrong, but I cannot figure out what is wrong here. Below, I am trying to edit the div "3left", it has an image up top, and a paragraph of text below the image, but I am unable to change the background color, or position the div where I want to within the div "page3". Thanks in advance.

heres the bit of html I am working with:

<div id="page3">
            <div id="3left">
              <image src="images/entertop_03.png"></image>
                <h4>text<br>

text<br>
text<br>
text<br>
text <a href="#" class="class1">text</a><br>
text</h4>
            </div>
</div>

and my css:

#page3 {
       background-image: url("../images/page3back_01.jpg");
    background-size: cover;
    width: 100%;
    height: 100%;

    min-height: 730px;
    font-size: 16px;
    height: 2em;


}

#3left {
    width:100%;
    margin-top: 50px;
    max-width: 440px;
    height: 330px;
    background-color: #221f1f;



}

Upvotes: 1

Views: 83

Answers (3)

NikolaiDante
NikolaiDante

Reputation: 18639

It's because the ID starts with a number.

The CSS specification has details on what is allowed.

All CSS syntax is case-insensitive within the ASCII range (i.e., [a-z] and [A-Z] are equivalent), except for parts that are not under the control of CSS. For example, the case-sensitivity of values of the HTML attributes "id" and "class", of font names, and of URIs lies outside the scope of this specification. Note in particular that element names are case-insensitive in HTML, but case-sensitive in XML.

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Upvotes: 4

noctrnal
noctrnal

Reputation: 191

Class identifiers are allowed to start with a number, but ID identifiers are not.

[id='1800number_box'] {
 /* does work */
}

#1800number_box {
  /* doesn't work */
}

/* Or, you can "escape" the number, which looks funky but works: */
#\31 800number_box {
  /* does work */
}
/* See: http://mothereff.in/css-escapes */`

Upvotes: 0

Sooraj
Sooraj

Reputation: 10567

You have used <image> instead of <img> and you have used an id starting with a number, Following will work fine.

#page3 {
       background-image: url("../images/page3back_01.jpg");
    background-size: cover;
    width: 100%;
    height: 100%;

    min-height: 730px;
    font-size: 16px;
    height: 2em;


}

#left3 {
    width:100%;
    margin-top: 50px;
    max-width: 440px;
    height: 330px;
    background-color: #221f1f;



}
<div id="page3">
            <div id="left3">
              <img src=""></img>
                <h4>text<br>

text<br>
text<br>
text<br>
text <a href="#" class="class1">text</a><br>
text</h4>
            </div>
</div>

Upvotes: 1

Related Questions