[Solved] Strange Nested Element Issue

[Roxon]

I’m very confused and frustrated. Here’s what my HTML and the result without any element such as H2, H1, or UL.

                


2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris arcu metus, tempor eget aliquet vel, luctus ut ligula. Curabitur et augue nunc, id molestie magna. Vivamus eu dui vitae est scelerisque adipiscing. Sed ac felis sapien, in scelerisque ligula. Suspendisse potenti. Aliquam lobortis, turpis ut hendrerit dictum, eros turpis tristique sem, at semper erat nulla ac nulla. Aliquam erat volutpat. Quisque vestibulum, augue non ultrices condimentum, nulla dui aliquam nunc, at eleifend justo odio eu augue. Donec egestas ipsum quis est tempor blandit. Phasellus tincidunt sem vel ligula ullamcorper sed gravida neque pretium. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus nunc arcu, commodo ut volutpat at, rutrum vitae felis.

The result: http://i153.photobucket.com/albums/s228/siioking/1-7.png

However, if I simply add this in:

Frustrating list item

Bam, it’s wrecked. http://i153.photobucket.com/albums/s228/siioking/2-1.png
Why does it completely split from all styling of the parent? I combed my CSS but failed to find the problem. I thought some nice person could take a quick look through and locate the problem.

/* -- Main



*/

body {

background: url(../images/home.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

margin: 0;

}

div[name=wrapper] {

width: 940px;

margin: 0 auto;

}

h1[name=header] {

margin: 7px 0px;

padding: 0px 20px;

color: #fff;

width: 200px;

text-align: center;

font-family: "ff-nuvo-web-pro-1", "ff-nuvo-web-pro-2";

background-color: rgba(0, 0, 0, 0.6);

font-size: 2em !important;

}

::selection {

background-color: #d0d2c4;

}

::-webkit-selection {

background-color: #d0d2c4;

}

::-moz-selection {

background-color: #d0d2c4;

}

/* -- Content



*/

#home p, #about p, #section p {

margin-top: 45px;

font-family: "ff-nuvo-web-pro-1", "ff-nuvo-web-pro-2";

color: #fff;

background-color: rgba(0, 0, 0, 0.7);

padding: 7px 10px;

width: 550px;

}

#home:first-letter, #about:first-letter, #services:first-letter {

float: left;

margin: 8px 15px 2px 0px;

padding: 0px 12px 0px 0px;

border-right: 1px solid #666;

font-size: 32px;

}

#people {

line-height: 2;

}

#people a:link, #people a:visited {

font-family: Arial, sans-serif;

border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;

padding: 5px 8px;

background-color: rgba(211, 211, 211, 0.7);

color: #fff;

text-decoration: none;

}

#people a:hover {

background-color: rgb(211, 211, 211);

color: #000;

}

/* -- Arrows & such



*/

#arrow-left, #arrow-right {

position: absolute;

z-index: 20000;

width: 84px;

height: 84px;

}

#arrow-left:active, #arrow-right:active {margin-top: 1px;}

#arrow-left {background-image: url('../images/arrow_left.png')}

#arrow-left:hover {cursor: pointer; cursor: hand; background-image: url('../images/arrow_left_over.png')}

#arrow-right {background-image: url('../images/arrow_right.png')}

#arrow-right:hover {cursor: pointer; cursor: hand; background-image: url('../images/arrow_right_over.png')}

[Roxon]

Shouldn’t the UL inherit the styles of the p tag if it’s nested in it?

[SmashDeveloper]

#home p, #about p, #section p {

margin-top: 45px;

font-family: "ff-nuvo-web-pro-1", "ff-nuvo-web-pro-2";

color: #fff;

background-color: rgba(0, 0, 0, 0.7);

padding: 7px 10px;

width: 550px;

}

You would need to change this to:

#home p, #about p, #about ul  #section p { /* add the other elements you want to use... it's now hardcoded in but it should work */

margin-top: 45px;

font-family: "ff-nuvo-web-pro-1", "ff-nuvo-web-pro-2";

color: #fff;

background-color: rgba(0, 0, 0, 0.7);

padding: 7px 10px;

width: 550px;

}

[Roxon]

I don’t think you understand what I’m trying to achieve. I want OL and ULs to be nested inside a P tag, and inherit its CSS properties.

[Roxon]

Oh, so can I make the UL display: inline?

Edit: no, I see. Bad practice.

[Author]

Posts