...

View Full Version : list-style not working



joliett89
01-06-2013, 11:58 AM
I have the following css code in a html iframe, and I am not able to display the squares on the page:



<style type="text/css">
body {
font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 21px;
}
h3 {
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
ul {
padding: 0px;
list-style: square;
}
a {
text-decoration: none;
color: #1982D1;
}
a:hover {
text-decoration: underline;
}
</style>


Does anybody know why? Maybe it has something to do with list-style not working with block elements (or inline)?

Thanks.

Excavator
01-06-2013, 05:31 PM
Hello joliett89,
Look at it this way -
ul {
/*padding: 0px;*/
list-style: square;
}



...
OR like this -
ul {
padding: 0px;
list-style: square inside;
}

Look at this article (http://www.alistapart.com/articles/taminglists/) for an explanation where the li bullet lives.

joliett89
01-06-2013, 05:37 PM
I added the "inside" and it is working. I had to add padding because webkit browsers add 40px by default (for some reason). Thanks a lot!

joliett89
01-07-2013, 09:02 AM
I actually have another issue with this. The iframe and the rest of the sidebar are suppose to look the same, but they dont align horizontally (see picture below). The bullets for the iframe list are inside the iframe, and the ones for the sidebar are, for some reason outside of the widget area (which is 188px wide).

This is the code for the widget (which contains the iframe <188px wide> and also "Archives" and "Meta" elements below):



#secondary {
float: right;
margin-right: 7.6%;
width: 18.8%;
}


The code for the iframe is:



<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
body {
font: 13px "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
line-height: 21px;
}
h3 {
color: #666;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
line-height: 2.6em;
text-transform: uppercase;
}
ul {
#padding: 0px;
list-style: square;
}
a {
text-decoration: none;
color: #1982D1;
}
a:hover {
text-decoration: underline;
}
</style>
<title></title>
</head>
<body>
<h3>pornstar blogs</h3>
<ul>
<li><!--list elements go here--></li>
</ul>
</body>
</html>


This is the regular Wordpress TwentyEleven theme, and I am working on it at http://office-porn.com (no adult content).

What do you think would be the best way to get around this issue. Is the only solution moving elements on the bottom to align with those in the iframe on the top?

Thank you in advance for any info.

http://ghetto-porn.com/iframe.jpg

Excavator
01-07-2013, 09:16 AM
First off, it looks like your template is using a reset (http://meiert.com/en/blog/20080419/reset-style-sheets-are-bad/) that's zeroing out the default padding that allows an li's bullets to work.

If the bit of CSS you used to put those bullets on the inside targets only the ul in your iframe, you will need to be more specific in targeting either all ul's or just the iframe and sidebar ul's when either replacing what your reset removed or putting the bullets inside.

Did that make any sense at all?

joliett89
01-07-2013, 09:25 AM
Thank you for quick reply. Here is the reset (it is a default Wordpress theme's CSS so I am sure a lot of people out there is using it):



/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
outline: 0;
}
body {
background: #fff;
line-height: 1;
}
ol, ul {
list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}


The sidebar area is set to 188px (that's what comes out of percentage rule) and I set the iframe to 188px also. I would not want to modify the reset (if I dont have to), and it would be best to make the iframe look like the rest of the them and not the other way around, but I am not sure if it is possible...

Excavator
01-07-2013, 09:50 AM
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

If you remove those bits in red, all your ul/li's will have their default margin and padding.

---------
That may have too broad an affect for you now that you've built the whole site with that reset in place. You might have to reposition all your ul lists.

It might be easier to target the two ul's you're having trouble with. Without seeing your markup, I can't tell what id's or classes are already in place that you might be able to use.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum