CSS - Unordered Lists, Ie, And Background Images...

Hello,

I need to make some unordered lists within a page appear with a graphic as a bullet, and some appear with a disc. My current code is:

Code:

ul {list-style-image: url(../img/redarrow.gif)} 

But this makes all unordered lists appear with the graphic, and of course if I comments out that code, all unordered lists appear with a disc.

Please let me know if it is possible to code it so that I can have both in a page.

Thanks!

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

Quick question...

I am trying to make an unordered list and have the first level have no indent/margin. But I want the second level to be indented 15 pixels. I'm having problems getting this done. Any suggestions?

Thanks

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

I've got an odd bug in IE7 that's got me completely stumped.

I'm using drupal for sort of an art/comic site, and I've built my own theme off of the Zen theme, for anyone who's familiar with it.

My main page works just fine.

Once I get to either the gallery or forum things start to collapse and get weird. My sidebar loses it's positioning, and the width of the list items in the unordered list shrink down to the size of the image or tex they contain, rather than extending to fill their container.

The only consistency I can find here is that they're both using unordered lists, but beyond that I'm not sure what's going on.

I've tried to go through and swat any obvious CSS and HTML errors, so any advice or insight on this would be much appreciated.

eta: looks like I can't post an opening topic with links yet, so I'll have to post them as a reply or something.

Hello,

I was wondering if anyone could shed some light on this problem I'm having with my navigation bar. I've Googled and tried every [seemingly] logical combination, but can't get it to work -- and it's driving me nuts!

Basically, I have a div containing an unordered list and an image. The image is a non-semantic hack I've had to put in for the design, without making it massively complicated... Anyway, the problem is with the ul, which contains lis that are just images (tabs). Like so:

Code:

<div id="tabs">
  <ul>
    <li><a href="..."><img src="..."></a></li>
    <li><a href="..."><img src="..."></a></li>
    [etc.]
  </ul>
  <img src="filler.png">
</div>

Each image is a different width; and the above is simplified for clarity... Anyway, this works perfectly in Firefox, Opera and even IE. However, in Safari and Chrome, the lis have a few extra, blank pixels of padding on the right edge of the image; whereas I want all the images to butt-up against each other.

My CSS is as follows:

Code:

#tabs {
  word-spacing: -4px; 
}

#tabs ul {
  display: inline; list-style: none;
  margin: 0px; padding: 0px;
}

#tabs li {
  display: inline;
}

The word-spacing for the div removes the spacing you automatically get in Firefox/Opera/IE -- I found -4px was enough to remove the gap entirely -- but in Safari/Chrome, a gap remains. If you make the value even smaller (e.g. -5px, -60px, etc.) it makes no difference in any browser; if you make it bigger, then the gaps widen in all browsers. However, WebKit browsers always have that extra padding on the right edge.

Any ideas on how to get rid of this?... I've tried "display: inline-block", "-webkit-border-horizontal-spacing" with various values, "white-space: nowrap"; even altering the HTML so that the images and lis have explicitly defined widths. Nothing works!

I'm looking to use lists to create 2 columns of info:

Info 1 Info A
Info 2 Info B

Presumably I would do this like (excuse the inline style):

Code:

<ul style="display:inline">
  <li  style="display:inline">
    <ul style="display:inline">
      <li>Info 1</li>
      <li>Info 2</li>
    </ul>
  </li>
  <li  style="display:inline">
    <ul style="display:inline">
      <li>Info A</li>
      <li>Info B</li>
    </ul>
  </li>
</ul>

This outputs:
Info 1
Info 2
Info A
Info B


I'm also looking to do a mix of images and text in a list, but have alignment issues.

Code:

<ul style="display:inline;list-style:none">
  <li style="display:inline">Some</li>
  <li style="display:inline">random</li>
  <li style="display:inline">words</li>
  <li style="display:inline">with</li>
  <li style="display:inline">an</li>
  <li style="display:inline"><img src="mypic.jpg"></li>
  <li style="display:inline">mixed</li>
  <li style="display:inline">in</li>
</ul>

Is this bad practice? Should I just make a table, or a seperate div to contain the images and text apart from each other?

Tia!

PS. Hi Kravvitz :P

Hi

I found it:
**********************
Code:

#tableLeftCol ul.menu li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}
	
	#tableLeftCol ul.menu li#current ul li a {
		background-image: none;
	}

***************************

I have a nested list representing a menu.

I want the active menuitems (listitem) link to have a background image.

When active menuitem is a parent then all the childs also get the background image......

How to I change the CSS so only active menuitems link get the background image set, and not the child links of the parent?
If possible, I want to make it work without changing any in the HTML!

Here is current CSS and list structu

Code:

#tableLeftCol ul.menu li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}
	
	#tableLeftCol ul.menu li ul li#current a {
		background-image: url('../images/menu-active-rect.gif');
		background-position: right top;
		background-repeat: repeat-y;
	}

Code:

<div id="tableLeftColPadding">				
	<ul class="menu">
		<li id="current" class="parent active item54">
			<a href="/index.php?option=com_content&view=article&id=48&Itemid=54">
				<span>Parent</span>
			</a>
			
			<ul>
				<li class="item57">
					<a href="/index.php?option=com_content&view=article&id=50&Itemid=57">
						<span>Child-A</span>
					</a>
				</li>
				<li class="item81">
					<a href="/index.php?option=com_content&view=article&id=71&Itemid=81">
						<span>Child-B</span>
					</a>
				</li>
				<li class="item59">
					<a href="/index.php?option=com_content&view=article&id=52&Itemid=59">
						<span>Child-C</span>
					</a>
				</li>
			</ul>
		</li>
	</ul>
</div>

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though.

This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background.

This is the css:
Code:

.professor_forum_row {
	background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}

.professor_corner_tab {
	background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}

the html is just a table with those classes assigned to the row and first td.

Any ideas on why this is happening?

Thanks,
Ryan

Hi

I have a table which i want to add 2 background images too.
what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible?

Hi there,

hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image.

this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves.

here is my code but none of the top or bottom background images show.

please help, thanking you in advance.

css:
#feature {
float:right;
width: 287px;
height: auto;
}
.featuretop {
background-image:url(../images/css/featuretop.gif);
background-position:top;
background-repeat:no-repeat;
}
.featuremiddle {
background-image:url(../images/css/feature.gif);
background-position:center;
background-repeat:repeat-y;
}
.featurebottom {
background-image:url(../images/css/featurebottom.gif);
background-position:bottom;
background-repeat:no-repeat;
}


html code:
<div id="feature">
<div class="marTOP10">
<div class="featuretop"></div>
<div class="featuremiddle"></div>
<div class="featurebottom"></div>
</div>
</div>

K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box.
HTML Coding
*************
<div id="special_feature_top">
<img src="images/specialfeatures.jpg" width="800" height="30" alt="" />
</div>

<div id="special_feature_mid">
<img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" />
<img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" />
<img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" />
</div>

<div id="special_feature_btm">
<img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" />
</div>


CSS Coding
*************
#special_feature_mid {
padding: 1px 0px 1px 10px;
background-image: url('images/content_bg.jpg');
}

That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks

Matta

Hi Folks,
I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins.

Is it possible to somehow attach an image to one side of an element?
Thanks
John

I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property.

My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site.

In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like:

<div id="image" class="page_two">

Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this

body
{
margin:0px;
}

and then attach an additional style sheet to each page that supersedes the body tag in the main sheet?

I hope I am making sense...


thanks

jon