CSS - Vertical List Is Hiding Divs Containing Images

Okay, I have an unordered list of images (im usings lists for ajax reasons). I have formatted the list to look much like a 4x4 table. Each cell has an image in it. I need to make the images vertical-align middle. at the moment the code i have is this:


Code:

<ul style="margin:0;padding:0;list-style-type:none;">
<li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li>
<li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li>
<li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li>
<li style="text-align: center; width: 140px; background-color: #e7e7e7; height: 150px;float: left;"><div style="height: 150px;"><a href="#"><img src="image.gif" style="vertical-align: middle;" ></a></div></li>
</ul>

I added the div in hopes that this would help the vertical align, however it still aligns at top. Any ideas? I MUST use the list. Thanks for any help!

Hi, I'm trying to redesign my website to be CSS and XHTML compliant. While I've managed it and everything is almost perfect, IE has one very minor glitch. The page is http://hiveworldterra.ibboard.co.uk/HWTv2.html

My 3-col design is based on (and modified from) a 3 col layout I found on the net (there is a credit in the CSS of the page).IE displays everything perfectly and even resizes horizontally without a problem, but as soon as you try to resize vertically, the left column will often overlay the center column. Refreshing the page without resizing the window fixes it and resizing the page horizontally fixes it.

As per usual, Firefox is perfectly fine, no matter how you resize the page (until you get down to rediculously small, at which point its to be expected!)

It doesn't seem to be a width issue, as I've got a 1280x1024 monitor at work and at full width on one monitor or down at 500px wide there are only a handful of vertical sizes where the left column doesn't overlap, but every time it does overlap then if you resize horizontally by a single pixel then it fixes itself.

Anyone have any ideas or IE only hacks (preferably neat ones!) to stop this minorly annoying behaviour? From problems I had while modifying the original layout, it almost seems as if IE is losing the float on the left column.

Thanks

I have a CSS tabbed menu that shows horizontal in FF and Google Chrome (not sure about others at this point), but in IE7, it shows as vertical.

I've checked the CSS & HTML in the W3C validators and come back with no errors, so I'm not sure why I'm having this problem. Any suggestions you could offer would be appreciated.

CSS:
Code:

body {
	background-color: #5D5D5D;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}

/* Layout Specs */

#container {
	width: 950px;
	margin: 0 auto;
	text-align: left;
}
h1, h2, h3, p {
	margin: 10px 255px 10px 15px;
}
div.logo {
	text-align: left;
}
div.content {
	position: absolute;
	background-color: #FFFFFF;
	color: #504E52;
	width: 950px;
	margin: 0px 255px 0px 0px;
	z-index: 1;
}
div.header {
	background-image: url('images/header.png');
	background-position: top;
	background-repeat: no-repeat;
	margin: 0px 0px 0px 0px;
	padding: 0px;
	width: 950px;
	height: 200px;
	z-index: 2;
	clear: both;
}
div.rtcol {
	position: relative;
	float: right;
	width: 235px;
	background-color: #E7EEF9;
	color: #504E52;
	border-left: 1px solid #7BD5EA;
	z-index: 2;
}
p.rtcol {
	margin: 0px;
	padding: 0px;
}

/* Tab Menu */

ol#menu {
	height: 2em;
	list-style: none;
	float: right;
	margin: 0;
	padding: 0;
}
ol#menu li {
	margin: 0px 0px 0px 3px;
	float: left;
	text-align: center;
}
ol#menu a {
	background: url('images/tab.png');
	color: #504E52;
	display: block;
	float: right;
	height: 2em;
	line-height: 2em;
	padding-left: 10px;
	text-decoration: none;
	font-weight: bold;
}
ol#menu a:hover {
	background-position: 0 -80px;
}
ol#menu a:hover span {
	background-position: 100% -80px;
}
ol#menu li.current {
	background-color: #68B2C3;
	background-position: 0 -80px;
}
ol#menu li.current a {
	background-position: 0 -40px;
	color: #FFFFFF;
	font-weight: bold;
}
ol#menu li.current span {
	background-position: 100% -40px;
}
ol#menu span {
	background: url('images/tab.png') 100% 0;
	display: block;
	line-height: 2em;
	padding-right: 10px;
}

/* Text: Headings, etc. */

h1, h2, h3 {
	text-transform: uppercase;
	color: #6083BB;
}
h1 {
	font-size: 1.5em;
}
h2 {
	font-size: 1.25em;
}
h3 {
	font-size: 1em;
}
h1.rtcol, h2.rtcol, h3.rtcol {
	color: #E36A07;
}

And the HTML:
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<title>Untitled Document</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
 
<body> 
<div id="container"> 
	<div class="logo"><img src="images/logopng.png" alt="P.C. Quick"></div> 
	<ol id="menu"> 
		<li class="current"><a href="index.html"><span>Home</span></a></li> 
		<li><a href="services.html"><span>Services</span></a></li> 
		<li><a href="contact.html"><span>Contact</span></a></li> 
	</ol> 
	<div class="header">&nbsp;</div> 
	<div class="content"> 
		<h2>Test Title</h2> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum mattis nisi id convallis. Nullam aliquam pellentesque lectus, eu hendrerit lectus dapibus et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Aliquam scelerisque, metus in euismod lacinia, augue tellus tempus urna, lacinia vulputate lectus quam nec ipsum. Integer iaculis nulla eu turpis fermentum quis dapibus enim consectetur.</p> 
		<p>Nunc pulvinar cursus dolor id ornare. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum aliquet ornare lacinia. Integer sed ante leo, eu dictum enim. Ut risus purus, convallis eu rhoncus at, ultricies ut diam. Ut vel mi ut nibh tincidunt pretium sit amet quis urna. Donec sed auctor eros. Vestibulum nec odio ante.</p> 
	</div> 
	<div class="rtcol"> 
		<h3 class="rtcol">Computer Training Courses</h3> 
		<p class="rtcol">Tired of condescending looks from your kids?<br>Call us for more info! 
	</div> 
</div>	
</body> 
</html> 

I have a list, Each item has a graphic as a background image, so each li is 60px high

Some of the text is long and wraps

Some of the text remains on one line

This means the the spacing is not consistent and looks a little odd

I've tried

Code:

ul#myListId li {
     vertical-align:middle;
}

and

Code:

ul#myListId li * {
     vertical-align:middle;
}

This has no effect in any of the browsers

I know a lot of people have made posts about vertical aligning but nearly all were involving text. I'm trying to vertically align a small image, but every time i do it within the img tag it screws up the adjacent text on IE and only IE. I know it has to do with how vertical align is supposed to be used, specific blocks or inline or something.

How would I go about vertically aligning that small arrow image on the top properly.
http://chics.onivertneb.com/align.htm

Hello,

Thank you for reading my post

This is what I try to create.
A Vertical Navigator column with images, without knowing their size, as links and javascript actions. The images should be Horizontally centered.
I want to set the width of the div 'navBar' dynamically so that the images inside the 'navElement's grows or shrink but stays in center.
The images could be between 55 - 90 pixels width. And I want to have them grow or shrink between 40 - 80 px width.

What I already got :
The links and javascript actions are working. Also have a column working where the images are centered with a known size, but not working with images without knowing the size.

I did try and search for several hours, but couldn't find a good solution.

Mainly my question would be, how I can shrink or grow an image without knowing his size.


Basicly my html code is

Code:

<div id="navBar">
  <div class="navElement" id="nav1">
	<img class="navImg" src="images/home.gif" />
  </div>
  <div class="navElement" id="navN">
	<img class="navImg" src="images/notHome.gif" />
  </div>
</div>

my latest css for unknown image size

Code:

#navBar { /* main page navigation container */
	height: 460px;
	width: 70px; /* 1. this will be dynamically set */
	left: 100px;
	top: 151px;
	position: absolute;
	visibility: visible;
	}
.navImg {
	height: auto;
	width: auto;
	/*	height: 60px;*/
	/*width: inherit;*/
	position: relative;
	top:0px;
margin:0 auto;
}
#navElement1 {
	position: relative;
	width: auto;
	height: 70Px;
	top:0px;
margin:0 3px;
	visibility: visible; }

With javascript I add a onclick event handler on each navImg wich trigger the action. This works to.

Please, Is someone willing to help with pointers.

Thanks in Advance
SC

I am having problems with vertical aligning both texts and images. Can someone show me a working example or tell me where I messed up the codes below?

http://efetuncel.win.aplus.net/ryt/new/

Code:

#rcontent{
	float:right;
	width:490px;
	padding:0px;
}
#rcontent .category{
	float:left;
	width:240px;
	height:120px;
	margin:30px 0px 0px 5px;
	background: url(images/bg_home_category.gif)
}
#rcontent .category img{
	float:left;
	vertical-align:middle;
}


        <div id="rcontent">
            <div class="category">
            	<img src="images/home_categories_gb.gif" alt="" />
            </div>
            <div class="category">
            </div>            
            <div class="category">
            </div>
            <div class="category">
            </div>   
	    </div>

This is sort of an addendum to my earlier post on CSS, but with a new problem, now the problem is with IE.

I am trying to get the SuckerFish drop downs to work and have been successful in Firefox, but IE is giving me problems. The best thing to do is look at it in action:

http://www.forma3.com/stuff/css/index-v1.2.html
http://www.forma3.com/stuff/css/css/index-v1.2.css

I am guessing it is related to the parent child relationship in IE, namely the drop down is adopting the style (float: left) that is set for the horizontal menu. I had to put in an underscore for the "#nav li" since it was causing problems in Mozilla. Unfortunately, this causes a validation error.

Hello,
I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color.

Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it.

I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work.

Thanks!

Randy

This is an simple example:
Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}

#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}

#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}

#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}

#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}

li {
list-style:none;
}

</style>
</head>

<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html> 

I have a series of DIVs on a page , each contains some links and an image. The DIVs seem to expand to accommodate the text but not the images. An example can be seen he http://193.82.99.145/ICISTest2/

How can i get the DIVs to expand to fit the images?


HTML:
<div class ="boxes">
<div class="boxheader">Are you looking for information?</div>
<img src="./images/box_information.gif">
<ul id="navlist">
<li><a href=".\FindInformation\faq.htm">Search for services that can help</a><br>
<li><a href=".\FindInformation\sports.htm">Sporting opportunities in Sussex</a><br>
<li><a href="http://193.82.99.145/ICISforms/Enquiry/index.htm">Ask us for information</a><br>
<li><a href=".\FindInformation\events.htm">Events and activities in your area</a><br>
<li><a href=".\FindInformation\newsletter.htm">ICIS newsletter</a><br>
<li><a href=".\FindInformation\noticeboard.htm">News items</a></ul>
</div>

<div class ="boxes">
<div class="boxheader">Are you looking after someone?</div>
<img src="./images/box_caring.gif">
<ul id="navlist">
<li><a href=".\ForCarers\index.htm">Help for carers</a><br>
<li><a href=".\ForCarers\carerscard.htm">Emergency Alert Card Scheme for carers</a><br>
<li><a href=".\ForCarers\wellspring.htm">Newsletter for children with special needs</a><br>
<li><a href=".\ForCarers\carersonline.htm">West Sussex carers website</a><br></ul>
</div>

<div class ="boxes">
<div class="boxheader">How do we help other organisations?</div>
<img src="./images/box_organisations.gif">
<ul id="navlist">
<li><a href=".\ForOrganisations\roomhire.htm">Hire of ICIS rooms and equipment</a><br>
<li><a href=".\ForOrganisations\index.htm">Other resources for organisations</a><br></ul>
</div>
</td><td valign="top">

<!-- HOTSPOT BOX -->
<div class ="boxes2">
<a href="./FindInformation/newsletter.htm">Summer newsletter now available!</a><br>
<a href="http://www.carersweek.org">National Carers Week</a><br>
13-19 June 2005<br>
<a href="./AboutSite/whatsnew.htm">What's new on this site</a>
</div>
<!-- END HOTSPOT BOX -->


<div class ="boxes">
<div class="boxheader">About ICIS</div>
<ul id="navlist">
<img src="./images/box_about.gif">
<li><a href=".\AboutICIS\contact.htm">Our contact details</a><br>
<li><a href=".\AboutICIS\index.htm">What we do</a><br>
<li><a href=".\AboutICIS\volunteering.htm">Volunteering at ICIS</a><br>
<li><a href=".\AboutICIS\jobs.htm">Jobs at ICIS</a><br>
<li><a href=".\AboutICIS\feedback.htm">Tell us what you think of our service</a><br>
<li><a href=".\AboutICIS\donations.htm">Make a donation</a><br>
</div></ul>

<div class ="boxes">
<img src="./images/box_sports.gif" class="floatimgright">
<b><a href=".\FindInformation\sports.htm">Sussex Disability Sports Database</b></a>
</div>

<div class ="boxes">
<img src="./images/box_carerscard.gif">
<b><a href=".\ForCarers\carerscard.htm">Carers Emergency Alert Card Scheme</b> </a>
</div>

<div class ="boxes">
<img src="./images/box_news.gif">
<b><a href=".\FindInformation\newsletter.htm">ICIS newsletter</b></a>

</div>
<div class ="boxes">
<img src="./images/box_news.gif">
<b><a href=".\ForCarers\wellspring.htm">Wellspring Newsletter</b></a>
</div>

<div class ="boxes">
<img src="./images/box_question.gif">
<b><a href=".\AboutSite\guide.htm">Do you need help using this website?</b></a>
</div>


CSS:
.boxheader {padding: 2px; background: #ffffff; color: #000000; font-weight:bold; font-size:medium; border-top: 0px solid #cccccc; border-bottom: 0px solid #cccccc; height: 10px; text-align: left; }

.boxes {height: auto; text-align: left; background: #ffffff; padding: 5px; border: 1px solid #663399; margin: 10px; margin-top: 0px; line-height: 1.5em;}
.boxes a {color: #660099; font-weight:bold; text-decoration: none; }
.boxes a.active {color: #660099; font-weight:normal; text-decoration: NONE; }
.boxes a:hover {color: #666666; font-weight:bold;text-decoration: none; }
.boxes a:visited {color: #660099;font-weight:normal;text-decoration: none; }
.boxes img{float: right; overflow: auto; height:100%;}

.images {padding: 5px; }

/* Hotspot Box on home page */
.boxes2 {text-align: left; background: #ffffff; padding: 5px; border: 2px solid #99cc00; margin: 10px; margin-top: 0px; line-height: 1.5em;}
.boxes2 a {color: #99cc00; font-weight:bold; text-decoration: none; }
.boxes2 a.active {color: #339900; font-weight:normal; text-decoration: NONE; }
.boxes2 a:hover {color: #666666; font-weight:bold;text-decoration: none; }

Thanks for your help

I cannot figure this out. I've tried adding clear: both in several places, I've tried overflow: hidden and I've tried cursing. Nothing works! How can this be fixed so that in IE6 the divs are not staggered vertically??

Code:

<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="38" border="0"></div>
<div style="float: right; height: 38px; width: 102px;">copy</a><br>copy</a></div>

</div>


<div style="height: 38px; margin: 0px; padding: 0px; width: 140px;">

<div style="float: left; height: 38px; width: 38px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="19" border="0"></div>
<div style="float: right; height: 38px; width: 102px;"><img style="border: 1px solid #444444; vertical-align: middle" src="http://www.diversifieddesigns.com/GRAPHICS/Spacer.gif" alt="" width="38" height="8" border="0"></div>

</div>

I've been trying to solve this problem about my website.

My site

What it is suppose to look like.

Image

Thanks in advance.

At h**p://www.topofferspage.com in IE6, the bullet points do not have images appearing unlike Firefox.

Before anyone says it's because of validation errors, it's not. I can turn off the offending stylesheets just fine and I get the same problem.


Little help? Why would background images not work in IE6 but every other browser?

If you take at the link below I'm having trouble with the top menu.

http://departments.brooklands.ac.uk/ifp/test/

I'm trying to use background images as buttons with normal xhtml text links.

But I can't seem to get the text in the middle of the buttons.

I think I may be going about this in the wrong way, so if anyone could take a look that would be great.

Thanks

Jemes

Code:

#topbar{
padding-top:18px;
border: 0px solid #000000;
background-image:url(../images/top.gif);
background-repeat:no-repeat;
height:120px;
margin-left:16px;
}

#topmenu{
margin:32px 0px 0px 30px;
font-size: 10pt;
font-weight:bold;
height:30px;
}

#topmenu ul{
    margin:0px;
    padding:0px;
list-style-type: none;
}

#topmenu ul li{
    padding-right:4px;
}

.home{
float:left;
display:inline;
background-image: url(../images/home.gif);
background-repeat: no-repeat;
height:33px;
width:45px;
}

.active{
float:left;
display:inline;
background-image: url(../images/top_active.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}

.norm{
float:left;
display:inline;
background-image: url(../images/top_norm.gif);
background-repeat: no-repeat;
height:33px;
width:106px;
}

#topmenu li a{
text-decoration: none;
color: #AC5BA0;
padding-right: 0.7em;
height:30px;
}

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!