Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Unordered list troubles


  • Please log in to reply

#1
Whitters

Whitters

    Member

  • Member
  • PipPip
  • 18 posts
I am redesigning a couple pages for my college, and there is a section that needs to look like it has been formatted with tables, but my boss thinks that an unordered list would be better suited to the task.

http://services.juni...ew/housing.html

<ul id="halls">
		<li>
			<ul>
				<li class="reshalls">Residence Halls</li>
				<li class="spacer">&nbsp;</li>
				<li class="info">Hall-Specific Information</li>
			</ul>
		</li>
		<li>
			<ul>
				<li class="thehall">
					<ul>
						<li><h2>Cloister</h2></li>
						<li><img src="http://services.juniata.edu/reslife/i/reshalls/tn_cloister.jpg" width="150" height="113" alt="The Cloister" /></li>
					</ul>
				</li>
				<li class="thespacer">&nbsp;</li>
				<li class="theinfo">
					<ul>
						<li>Room: 14'10" x 12'</li>
						<li>Closet: built in with door</li>
						<li>Windows: 3'5"w x 4'10"h (with blinds)</li>
						<li>&nbsp;</li>
						<li>Houses 94; Includes an outdoor grill and a lounge with a fireplace; Cloister occupies a central location on campus; students in Cloister determine its community standards.</li>
					</ul>
				</li>
			</ul>
		</li>
		<li>
			<ul>
				<li class="thehall">
					<ul>
						<li><h2>Cloister</h2></li>
						<li><img src="http://services.juniata.edu/reslife/i/reshalls/tn_cloister.jpg" width="150" height="113" alt="The Cloister" /></li>
					</ul>
				</li>
				<li class="thespacer">&nbsp;</li>
				<li class="theinfo">
					<ul>
						<li>Room: 14'10" x 12'</li>
						<li>Closet: built in with door</li>
						<li>Windows: 3'5"w x 4'10"h (with blinds)</li>
						<li>&nbsp;</li>
						<li>Houses 94; Includes an outdoor grill and a lounge with a fireplace; Cloister occupies a central location on campus; students in Cloister determine its community standards.</li>
					</ul>
				</li>
			</ul>
		</li>
	</ul>

is where the coding is loacted, but the problem is that it looks fine in Safari and FireFox, but blows up in IE (and I know its due to the display: table-cell; property in the style sheet:

#halls ul {
list-style: none;
}

#halls li {
list-style-type: none;
}

#halls li.reshalls {
display: table-cell;
width: 160px;
background-color: #369;
list-style-type: none;
font: 12pt verdana;
color: #FFF;
padding: 4px;
}

#halls li.spacer {
display: table-cell;
width: 10px;
background-color: #FFF;
list-style-type: none;
}

#halls li.info {
display: table-cell;
width: 380px;
background-color: #369;
list-style-type: none;
font: 12pt verdana;
color: #FFF;
padding: 4px;
}

#halls li.thehall {
display: table-cell;
width: 160px;
background-color: #FFF;
list-style-type: none;
padding: 4px;
}

#halls li.thespacer {
display: table-cell;
width: 10px;
background-color: #FFF;
list-style-type: none;
}

#halls li.theinfo {
display: table-cell;
width: 380px;
background-color: #FFF;
list-style-type: none;
padding: 4px;
}

But, I don't know how to get it to work in IE too. I know that you can add extra css with the * html stuff so that it will also work in IE, but my boss doesnt want that. He wants CSS that works with both browsers. I've completely exhausted my ideas, and am open to any others.

Thanks if anyone can help me out.
- Whitney

Edited by Whitters, 10 February 2006 - 11:20 AM.

  • 0

Advertisements







Similar Topics

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP