CSS - Ie7 Issue Unordered Lists; Drupal Zen Theme Gallery/forum

I can't seem to find any issues of this on the web, or maybe I'm not doing a correct search. here's my problem.

I'm creating a horizontal menu with an unordered list <ul> with each <li> tag using a background image. My problem is, in IE (both ie6 & 7), the menu seems to display having a staggered cascading effect. Firefox works great as usual...

see screenshot at http://clubsix1.com/images/cascade_effect.png

Here's my CSS code:

Code:

#masthead ul#mystuffnav {
	padding:0;
	margin:0;
	width:334px;
}
#masthead ul#mystuffnav li {
	float:left;
	margin-bottom:1px;
	clear: both;
}

/* Fancy Buttons, My Stuff Nav */
#masthead ul#mystuffnav a.button,
#masthead ul#mystuffnav a.button:link,
#masthead ul#mystuffnav a.button:visited {
    padding:3px 7px 5px;
    text-decoration:none;
    outline:none;
	/*display:block; OQO */
    font-size:10px;
    float:left;
    text-align:center;
    margin:0 1px 0 0;
    line-height:1em;
}

Help is GREATLY appreciated! =)

Working on converting the layout in the attached image and I'm having a problem with the main menu. Here are my problems:

*trying to push down the menu items. Setting padding-top only seems to extend the borders up above the horizontal line and doesn't push the text down.

*getting the highlight color above the text. Some ideas I had were trying to set a background image for each list item (but how can I do this without the borders extending above the horizontal line) or setting a background image of the whole unordered list (but with this will "break" when users have different font sizes).

Any thoughts? Layout is attached as well as what little code I have since I'm just starting on this project.

Thanks in advance,
-b

How do I go about making my unordered list use a image file or the bullet?

Code:

<ul>
  <li><a href="#onesweetcoma">One Sweet Coma </a></li>
  <li><a href="#untitled">Untitled</a></li>
  <li><a href="#freedomfound">Freedom Found </a></li>
  <li><a href="#yourwords">Your Words</a></li>
  <li><a href="#reprise">Reprise</a></li>
  <li><a href="#cantpullaway">Can't Pull Away </a></li>
  <li><a href="#sleepingawake">Sleeping Awake</a></li>
  <li><a href="#wherewestand">Where We Stand</a></li>
  <li><a href="#echooffthewalls">Echo Off the Walls </a></li>
</ul>

my image name is bullet.png

Hi,

Trying to create a menu using <ul> tags and to have a nice spacing between <li> items. I have tried the line-height property but it seems like IE ignores them. Firefox formats the line-height properly. Can anyone help me? Should the line-height be applied to ul or li tags?

/Hubba Bubba

www.l33tmonkey.com/sun/index.html

completely ignoring the image issues, which are next on the list to sort out, I have a problem.

I've gotten hold of two seperate scripts with permission from the author, and they wouldn't wrk together so I linked them externally as two seperate files. Both scripts cater to IE and other common browsers using conditional comments and are reasonably tidy even after I've been playing with them

So here's the problem, the horozontal menu, with the two drop down sub menus, needs to float to the right, the float attribute is already present within the menu script, however, the float attribute will only work when set to the left. I altered it to the right and the menu went haywire.

the scripts and index source can be viewed freely. Any help on this would be really appreciated, I'm no expert on CSS

Here are a couple of questions, all are in reference to THIS LAYOUT

1) There seems to be an Internet Explorer issue where bullets don't always show up on list items, any ideas how to fix this?

2) It wont validate in XHTML simply because of two urls I use, anyone have any hacks as to how to fix this?

3) I've only been able to test on IE and Firefox, so if anyone is on a different browser and can let me know of any other issues it would be amazing.

Thanks in advanced!

Hello,

I'm new to CSS but code is beginning to make more sense, for the most part. I've been able to transform an existing template into something more custom.

The theme over all has turned out well and I'm happy with it. There is one snag that I'm running into and I really would appreciate someone with more experience and a better understanding of css framework to give me guidance.

The issue: The "Comments/Respond" section for each blog post is getting pushed down rather far and there are odd little blue dots showing up to the right, just below the post itself, but before the beginning of the comments section.

Now, I did try plugging the CSS code into the validation service and have found some warnings. The thing is, many of these issues were in the template (I didn't change them or edit them). So would the errors that the validation tool found be interfering with how the comment section is getting pushed down?

Example of errors:

Quote:
318 input[type="text"], textarea Property box-shadow doesn't exist in CSS level 2.1 but exists in : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1)
319 input[type="text"], textarea Property -moz-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1)
320 input[type="text"], textarea Property -webkit-box-shadow doesn't exist : inset 1px 1px 1px rgba(0,0,0,0.1) inset 1px 1px 1px rgba(0,0,0,0.1)
823 .wp-caption Property -moz-border-radius-bottomleft doesn't exist : 3px 3px
824 .wp-caption Property -moz-border-radius-bottomright doesn't exist : 3px 3px
825 .wp-caption Property -moz-border-radius-topleft doesn't exist : 3px 3px
826 .wp-caption Property -moz-border-radius-topright doesn't exist : 3px 3px
1149 .submitbutton Value Error : float attempt to find a semi-colon before the property name. add it
1286 pre Property -webkit-text-size-adjust doesn't exist : 140% 140%
1289 code Property -webkit-text-size-adjust doesn't exist : 160% 160%
1296 #access, .entry-meta, .entry-utility, .navigation, .widget-area Property -webkit-text-size-adjust doesn't exist : 120% 120%
1299 #site-description Property -webkit-text-size-adjust doesn't exist : none none


The thing is, I'm rather confused as to where to pinpoint the gap.

In the CSS stylesheet the blog posts which are called out as "Content" live under an id called "Main". The comments seem to live under Main as well and seem to be in their own segment. I just can't figure out how to either pull the comment segment/table whatever you'd call it up more snug with the post, or eliminate whatever excess space is pushing comments down so far and causing the mysterious blue dots.

I would post a link to what I'm talking about but I'm too new to the forum.

Thanks in advance!

have a blog post page on this website:
plesae searhc for "refbc" and you will come to the real estate foundation of BC website - go to news and events, news

The title of each blog post is tagged to use H3, with a font size of 18px. This looks fine to me.

The last 4 posts from this page also appear on the home page of the site (sorry I was not allowed to post links ...)

They are under "Foundation News". The title of each post is bigger then H3 although it is h3.

I was told that the home page font (or all fonts) is controlled by sIFR, which I don't know how to work with.

This site is developed by someone else, but he has left and I need to do some changes. One being to make the blog post titles on the home page smaller. But I can't see how to do it, and I don't know how to work with this sIFR that the previous person has generated.

My boss thinks that it is something really simple - like just make them smaller. So I need to produce some results quickly.

Can someone help? I am very desperate here after about a week of trying to get this to work.

Thanks.
.

allanwav.com < that's my site. i can't get the freaking little orange boxes that appear on the bottom left and right of the screen after you've clicked on the word "oof".

here's my stylesheet:

/**
* Global Styles
*/
* {
margin:0pt;
padding:0pt;
}

p {
margin: 10px 0;
}

ol, ul {
margin: 0 10px 0 35px;
}

a {
color: #FF5A00;
}

em, cite, address {
font-style: italic;
}

strong {
font-weight: bold;
}

code{
font-family: "Courier New", Courier, monospace;
}

a:hover {
text-decoration: none;
}

body {
background: #ffffff url(images/sidebar2.gif) repeat-x;
color: #6B6B6B;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
font-size: 12px;
}

tbody {
border-top: none;
}

table {
margin-bottom: 15px;
}

td, th {
padding: 3px;
}

h1, h2, h3, h4 {
font-weight: normal;
letter-spacing: -0.035em;
}

h3, #aggregator h3.feed-item-title {
font-size: 17px;
}

h4 {
font-size: 14px;
}

fieldset {
padding: 8px;
margin: 3px 0;
border: 1px solid #F2F2F2;
}

dl dt {
margin-top: 5px;
}

dl dd {
margin-bottom: 5px;
}

tr.even, tr.odd {
background-color:#fcc66;
}

input.form-text, textarea.form-textarea {
border: 1px solid #a0a0a0;
padding: 2px;
}

/**
* Pager Stylings
*/
.item-list ul.pager li.pager-current {
color: #fff;
padding: 0.5em;
background-color: #bbb;
border: 1px solid #000;
}

.item-list ul.pager li {
padding: 0;
margin: 0 0 0.25em 0.5em;
font-size: 14px;
}

.item-list ul.pager li a {
border: 1px solid #F0F0F0;
padding: 0.5em;
text-decoration: none;
}

.item-list ul.pager li a:hover {
background-color: #FFFFCC;
}

.item-list ul.pager {
margin: 1.75em 0 0.75em;
}

/**
* Layout Styles
*/
div#wrapper {
margin: 0 auto;
width: 960px;
background: transparent url(images/img02.gif) repeat-y;
}

div#wrapper2 {
background: transparent url(images/orangebodysidebar.gif) no-repeat scroll left bottom;
}

div#container {
background: transparent url(images/uppercontentbox.gif) no-repeat;
}

div#logo {
float: left;
}
div#logo h1 {
font-size: 40px;
letter-spacing: -3px;
margin: 0;
padding: 78px 0 0 78px;
text-transform: lowercase;
border-bottom: none;
}

div#logo div.site-slogan {
padding: 0 0 0 90px;
color: #fff;
margin-top: -5px;
font-style: italic;
font-size: 13px;
}

div#logo h1 a {
color: #fff;
text-decoration: none;
}

/**
* Menu
*/
div#menu {
float:right;
}

div#menu ul {
padding: 112px 78px 0 0;
}

div#menu a {
color: #fff;
font-size: 13px;
font-weight: bold;
text-decoration: none;
margin: 0 5px;
}

div#menu a:hover {
border-bottom: 3px solid #FF5A00;
padding-bottom: 0;
}

/**
* Header stylings
*/
div#header {
background:url(images/banner.gif) no-repeat;
height:164px;
width:1024px;
}

/**
* Content section
*/
div#main {
float: left;
padding: 0 0 0 76px;
width: 575px;
}

div.messages {
font-size: 22px;
margin: 20px 5px;
padding: 8px;
color: #000;
}

div.node {
margin: 30px 0;
}

div.node-page-view {
margin: 0 0 30px;
}

div.status {
background: #FF0;
border: 1px solid #FF5A00;
}

div.warning {
background: #ff9;
border: 1px dotted #f00;
margin-bottom: 10px;
}

div#mission {
text-align: justify;
border: 1px solid #eee;
margin: 10px 0pt;
padding: 16px;
}

div.book-navigation {
margin: 20px 0;
}

div.book-navigation .menu {
padding: 1em 0 1em 3em;
}

h1.title {
font-size: 28px;
color: #37404C;
margin-bottom: 11px;
padding-bottom: 8px;
}

h1.title a {
color: #37404C;
}

h2 {
font-size: 24px;
font-weight: bold;
}

div.node h2.title {
margin-bottom: 10px;
padding-bottom: 9px;
}

div.node h2.title a {
color: #37404C;
text-decoration: none;
}

div#main div.tabs {
margin: 15px 0;
}

ul.tabs {
border-bottom: none;
}

div#main div.tabs li a {
border-bottom: 1px solid #BBBBBB;
margin-right: 12px;
color: #308;
}

div#main div.tabs li a:hover {
background-color: #F8F8FF;
}

div#main div.tabs li a:active,
div#main div.tabs li a.active {
color: #000;
}

div.node fieldset.collapsed {
border: none;
margin-bottom: -15px;
}

div.node fieldset legend {
padding-right: 22px;
background: url(images/tag_orange.png) no-repeat right;
}

div.meta {
background: url(images/img07.gif) repeat-x bottom;
line-height: normal;
padding: 10px;
clear: both;
}

div.meta div.submitted {
float: left;
}

div.meta div.links {
float: right;
}

/**
* Comment Style
*/
#aggregator .feed-item-categories,
div.meta div.links ul.links a {
background-repeat: no-repeat;
padding-left: 18px;
}

div.meta div.links ul.links li.comment_add a {
background-image: url(images/comment_add.gif);
}

div.meta div.links ul.links li.comment_comments a {
background-image: url(images/comment.png);
}

div.meta div.links ul.links li.comment_edit a {
background-image: url(images/comment_edit.png);
}

div.meta div.links ul.links li.comment_delete a {
background-image: url(images/comments_delete.png);
}

div.meta div.links ul.links li.comment_reply a {
background-image: url(images/comments.png);
}

div.meta div.links ul.links li.comment_new_comments a {
background-image: url(images/alert.png);
}

div.meta div.links ul.links li.node_read_more a {
background-image: url(images/readmore.png);
}

div.meta div.links ul.links li.blog_usernames_blog a {
background-image: url(images/user-plain-blue.png);
}

div.meta div.links ul.links li.book_add_child a {
background-image: url(images/addpage.png);
}

div.meta div.links ul.links li.book_printer a {
background-image: url(images/print.png);
}

div.meta div.links ul.links li.comment_forbidden a {
padding-left: 0px;
}

/*
div.meta div.links ul.links li.node_read_more a {
background-image: url(images/readmore.png);
}
*/

div.comment {
margin-bottom: 15px;
border: 1px solid #ccc;
padding: 8px;
}

div.comment h3.title {
font-size: 16px;
}

div.comment h3.title a {
color: #111;
text-decoration: none;
}

div.comment span.new {
float: right;
margin: 0 10px 10px;
}

form#comment-form div.comment-published {
margin-top:15px;
}

/**
* Admin section stylings
*/
div.admin {
padding-top: 0px;
}

div.admin .left {
margin-left: 3px;
}

div.admin .right {
margin-right: 3px;
}

div.admin-panel h3 {
background: #F3F3F3;
color: #000;
font-weight: bold;
padding: 3px;
}

div.compact-link {
text-align: center;
margin-bottom: 20px;
font-size: 18px;
}

/**
* Block styles
*/
div.block h2.title {
font-size: 16px;
margin-bottom: 10px;
padding-bottom: 4px;
}

div.block {
margin-bottom: 25px;
}

div.block div.content {
text-align: justify;
}

#edit-search-block-form-1-wrapper label {
display: none;
}

form input.form-submit {
background: #6E9D00 url(images/img18.gif) repeat-x;
border-color: #BAD300 rgb(125, 171, 0) rgb(87, 137, 0) rgb(169, 200, 23);
border-style: solid;
border-width: 1px;
color: #FFF;
font-size: 11px;
font-weight: bold;
padding: 1px 5px;
}

/**
* News Aggregator stylings
*/
#aggregator h3.feed-item-title a {
text-decoration: none;
}

#aggregator .feed-item-categories {
background-image: url(images/tag_orange.png);
}

#aggregator .feed-item-meta {
float: right;
margin-left: 0.8em;
text-align: right;
padding: 7px;
border-bottom: 1px solid #F2F2F2;
border-left: 1px solid #F2F2F2;
border-right: 1px solid #F2F2F2;
background: #f8f8ff;
}

#aggregator .feed-item, #aggregator div.links {
margin-bottom: 30px;
}

/**
* Forums styling
*/
div#forum table {
margin-top: 10px;
}

div.forum-topic-navigation a.topic-previous {
background-image: url(images/arrow-single-left-green.png);
background-repeat: no-repeat;
background-position: left;
padding-left: 15px;
}

div.forum-topic-navigation a.topic-next {
background-image: url(images/arrow-single-right-green.png);
background-repeat: no-repeat;
background-position: right;
padding-right: 15px;
}

/**
* Sidebar styles
*/
div#sidebar-right {
float: right;
padding: 10px 76px 0 0;
width: 200px;
}

div#sidebar-right div.item-list ul {
padding:0pt 0pt 0.25em;
}

div#sidebar-right div.item-list ul li {
list-style-type: none;
margin: 0pt 0pt 0.25em;
}

div#sidebar-right li.leaf,
div#sidebar-right li.collapsed,
div#sidebar-right li.expanded {
list-style-image: none;
list-style-type: none;
}

div#sidebar-right .block ul {
padding: 0 0 0.25em;
list-style: none;
}

div#sidebar-right .block ul.menu li {
margin: 0;
}

div#sidebar-right .block ul ul.menu {
margin: 0 0 0 12px;
}

/**
* Open ID login links
*/
li.openid-link a {
padding-left: 22px;
}

html.js #user-login-form li.openid-link, html.js #user-login li.openid-link {
margin:10px 0pt;
}

/**
* Post-content blocks
*/
div#precontent {
margin: 10px 50px;
padding: 0 24px;
}

div#postcontent {
background: #F2F2F2 url(images/img11.gif) repeat-x;
margin: 10px 50px 0;
padding: 10px 28px;
}

/**
* Footer Styles
*/
div#postcontent .block {
float: left;
margin: 0 20px 25px;
width: 225px;
}
div#postcontent .block-region, div#precontent .block-region {
clear: both;
}

div#footer {

}

div#footer_copy {
text-align: center;
margin-top: 12px;
}

/**
* OpenID link styling
*/
li.openid-link a {
padding-left: 22px;
}

/**
* Comment Pictures
*/
div.comment div.picture {
float: left;
margin: 5px;
}

/**
* Node Pictures
*/
div.node div.picture {
float: right;
margin: 5px;
}

i have to move our site to drupal, and am having a huge issue with a certain div design.

Version 1 - Original, old site shows it working perfectly

but...

Version 2 - Drupal, new site shows all the divs incorrectly.

i have spent the past week, from 9-5 trying to figure this out but i think i have just burned out. .. can someone please help me here as this needs to be done since this is on the main page.

I know it has something to do with the side-feature and afeature divs ...

I'm trying to edit a free Wordpress theme called "Imprezz 1.3" so that the date of each post is displayed about 20 pixels more to the left. Here's a picture of what I'm going for:

i.imgur.com/l2EyM.png

I've tried to mess with positioning and z-index in the stylesheet for .postTime, .postDay & .postEra without much success (I get the div to move but the part that's supposed to be 'sticking out' of the page doesn't show). Any help would be much appreciated!

Thx

Hey Guys,

I hope this is in the right forum. I've purchased a wordpress theme and it contains a video background using JWPlayer.

Part of the JWPlayer functionality is that it allows play/pause control when hovering over the video and a "hover hand" replaces the regular cursor.

I'd like the cursor to stay the same at all times, and remove the ability to play/pause the video. So it's essentially just a regular looking background that's a video.

I've done some searching online and it appears this is possible by placing a transparent div frame over the entire page with a cooresponding z index.

Seems easy enough, but I'm not very familiar with CSS and the more I look online for the best way to go about this, the more confused and lost I'm getting.

Can anybody shed some light on the best way to go about this? Certainly it must be quite straightforward?

I have a pretty awesome looking wordpress theme. I was wondering if someone could guide me through making a small change to it though!

Firstly, here is the page now: theangrywalrus.com/blog

What I would like to do, is take the black bar at the top and stretch it so it goes under the title of my site, and ends near where the 'content' starts. Then I'd like to move the gradient bg image down so it starts under where the black bar ends.

So far, using the firefox web dev plugin, I've only been able to get the black bar/gradient working in one part of the page, where the content is. How can I get it to be how I want it? Could someone show me how to get this done please? I'd really appreciate some help.

My style sheet is he theangrywalrus.com/blog/wp-content/themes/simpla/style.css

I want to redo my tumblr blog but it requires css and i kinda suck at CSS.

I was reading something on the net about it but after awhile, all the information started to get kind of hazy.

If you guys could just tell me where i need to start off and what i need to do, i would greatly appreciate it. Thanks

I am trying to edit the style sheet in twenty eleven in WP to get the menu to do something specific.

I am at the very beginning so there is no content, and the actual style isn't even set - I'm just trying to get my head around things.

The site is <a href="http://middevontyres.co.uk/test/">here</a>.

Ok at the moment on the active page, the menu has the image with the black and white checking on it - this I was able to work out pretty easily and the styling is:

<code>#access .current_page_item > a {

background-image: url(images/active2.png);
background-repeat: no-repeat;

font-weight: bold;
color: #FF0000;

}</code>

The problem I have, is in the sub-menu I want the active page to be an image with only 1 column of checks, (active3.png). The existing style sheet uses the above current page item right down the menu.

I tried to create a new section:

<code>#access .current_page_item > ul a {

background-image: url(images/active3.png);
background-repeat: no-repeat;

font-weight: bold;
color: #CC33CC;

}</code>

(The colours are irrelevant it is just my way of tracking which code applies where. Anyway this style isn't being picked up.

I suspect I'm not understanding the structure properly.

Your advice would be appreciated.