FF works, but my nested list floats off the right of the page in IE

RyanTuosto

02-27-2008, 06:36 PM

#locations_c {
padding-top:20px;
}

#locations {
width:880px;
}
#locations ul {
list-style-type:none;
width:293px;
}
#locations ul li {
width:293px;
text-decoration:none;
}
#locations ul li ul {
width:273px;
}
#locations ul li ul li {
padding-left:20px;
}
#locations ul li ul li ul {
}
#locations ul li ul li ul li {
width:253px;
}
#locations a {
font-family:arial;
font-size:11px;
width:253px;
text-decoration:none;
color:#000000;
}

#locations a:visted {
color:#000000;
}

#locations a:hover {
color:#ba0000;
}

<div id="locations_c">
<div id="locations">
<ul>
<li><a href="#">Sacramento & Roseville Area</a>
<ul>
<li><a href="#">Roseville</a>
<ul>
<li><a href="#">Holiday Inn Express & Suites </a></li>
<li><a href="#">Orchid Suites </a></li>
<li><a href="#">Best Western Roseville Inn</a></li>
<li><a href="#">Heritage Inn Express </a></li>
</ul>
</li>
<li><a href="#">Rancho Cordova </a>
<ul>
<li><a href="#">Best Western Venetian Court</a></li>
</ul>
</li>
<li><a href="#">Rocklin </a>
<ul>
<li><a href="#">Heritage Inn Express, Rocklin </a></li>
</ul>
</li>
<li><a href="#">Vacaville</a>
<ul>
<li><a href="#">Best Western Heritage Inn</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Greater Bay Area</a>
<ul>
<li><a href="#">Concord</a>
<ul>
<li><a href="#">Best Western Heritage Inn </a></li>
</ul>
</li>
<li><a href="#">Benicia</a>
<ul>
<li><a href="#">Best Western Heritage Inn </a></li>
</ul>
</li>
<li><a href="#">Antioch</a>
<ul>
<li><a href="#">Best Western Heritage Inn </a></li>
</ul>
</li>
<li><a href="#">Martinez</a>
<ul>
<li><a href="#">Best Western John Muir Inn </a></li>
</ul>
</li>
<li><a href="#">Grass Valley & Nevada Union</a>
<ul>
<li><a href="#">BW Gold Country Inn Grass Valley</a></li>
<li><a href="#">Nevada City Inn Nevada City</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Chico Area</a>
<ul>
<li><a href="#">Chico</a>
<ul>
<li><a href="#">Best Western Heritage Inn Chico</a></li>
<li><a href="#">Heritage Inn</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">San Francisco Bay Area</a>
<ul>
<li><a href="#">Santa Rosa</a>
<ul>
<li><a href="#">Holiday Inn Express Santa Rosa</a></li>
</ul>
</li>
<li><a href="#">Oakland</a>
<ul>
<li><a href="#">La Quinta Inn Oakland</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Sonora Area</a>
<ul>
<li><a href="#">Sonora</a>
<ul>
<li><a href="#">Best Western Sonora Oaks</a></li>
<li><a href="#">Inns of California</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

In FF, the last two lists stack under the 3rd.

In IE the last two overflow on the right of the page.

Help would be much appreciated thanks!

jcdevelopment

02-27-2008, 07:09 PM

do you have maybe a screen shot of what its doing?

other than that i will work on it and see what its doing!

edit*

ok i just took a look at it and it looks fine tom me, perhaps its something else that is causing it.. here is what i have

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#locations_c {
padding-top:20px;
}

#locations {
width:880px;
}
#locations ul {
list-style-type:none;
width:293px;
}
#locations ul li {
width:293px;
text-decoration:none;
}
#locations ul li ul {
width:273px;
}
#locations ul li ul li {
padding-left:20px;
}
#locations ul li ul li ul {
}
#locations ul li ul li ul li {
width:253px;
}
#locations a {
font-family:arial;
font-size:11px;
width:253px;
text-decoration:none;
color:#000000;
}

#locations a:visted {
color:#000000;
}

#locations a:hover {
color:#ba0000;
}

</style>

</head>

<body>

<div id="locations_c">
<div id="locations">
<ul>
<li><a href="#">Sacramento & Roseville Area</a>
<ul>
<li><a href="#">Roseville</a>
<ul>
<li><a href="#">Holiday Inn Express & Suites </a></li>
<li><a href="#">Orchid Suites </a></li>
<li><a href="#">Best Western Roseville Inn</a></li>
<li><a href="#">Heritage Inn Express </a></li>
</ul>
</li>
<li><a href="#">Rancho Cordova </a>
<ul>
<li><a href="#">Best Western Venetian Court</a></li>
</ul>
</li>
<li><a href="#">Rocklin </a>
<ul>
<li><a href="#">Heritage Inn Express, Rocklin </a></li>
</ul>
</li>
<li><a href="#">Vacaville</a>
<ul>
<li><a href="#">Best Western Heritage Inn</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Greater Bay Area</a>
<ul>
<li><a href="#">Concord</a>
<ul>
<li><a href="#">Best Western Heritage Inn </a></li>
</ul>
</li>
<li><a href="#">Benicia</a>
<ul>
<li><a href="#">Best Western Heritage Inn </a></li>
</ul>
</li>
<li><a href="#">Antioch</a>
<ul>
<li><a href="#">Best Western Heritage Inn </a></li>
</ul>
</li>
<li><a href="#">Martinez</a>
<ul>
<li><a href="#">Best Western John Muir Inn </a></li>
</ul>
</li>
<li><a href="#">Grass Valley & Nevada Union</a>
<ul>
<li><a href="#">BW Gold Country Inn Grass Valley</a></li>
<li><a href="#">Nevada City Inn Nevada City</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Chico Area</a>
<ul>
<li><a href="#">Chico</a>
<ul>
<li><a href="#">Best Western Heritage Inn Chico</a></li>
<li><a href="#">Heritage Inn</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">San Francisco Bay Area</a>
<ul>
<li><a href="#">Santa Rosa</a>
<ul>
<li><a href="#">Holiday Inn Express Santa Rosa</a></li>
</ul>
</li>
<li><a href="#">Oakland</a>
<ul>
<li><a href="#">La Quinta Inn Oakland</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Sonora Area</a>
<ul>
<li><a href="#">Sonora</a>
<ul>
<li><a href="#">Best Western Sonora Oaks</a></li>
<li><a href="#">Inns of California</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

jerry62704

02-27-2008, 07:13 PM

Just a FYI. Click the "#" button on the editor bar and you will get paired code tags in the post. Put your code in it and you will have a much smaller vertical footprint and a scrollable window in the post.

RyanTuosto

02-27-2008, 07:28 PM

#locations_c {
padding-top:20px;
padding-left:40px;
}

#locations {
width:880px;
}
#locations ul {
list-style-type:none;
width:293px;
float:left;
text-align:left;
}
#locations ul li {
width:293px;
text-decoration:none;
clear:right;
}
#locations ul li ul {
width:273px;
float:left;
}
#locations ul li ul li {
width:253px;
padding-left:20px;
padding-bottom:0px;
}
#locations ul li ul li ul {
float:none;
}
#locations ul li ul li ul li {
width:253px;
}
#locations a {
font-family:arial;
font-size:11px;
text-decoration:none;
color:black;
}

#locations a:visted {
color:black;
}

#locations a:hover {
color:#ba0000;
}

The initial problem is fixed, now however, the footer is not being pushed down by these elements in FF unless I add a height to #locations.

structure is as follows:

<div id="container">
<%= render :partial => 'header' %>
<%= render :partial => 'nav' %>

<div id="content">
<div id="box">
<div id="locations_c">
<div id="locations">
<%= render :partial => 'locations' %> ### This is the list ###
</div>
</div>
</div>
</div>

<div id="footer_c">
<div id="footer">
<ul>
<li><%= link_to "Home", :controller => 'pages', :action => 'index' %></li>
<li><%= link_to "About Us", :controller => 'pages', :action => 'about' %></li>
<li><%= link_to "Property Collection", :controller => 'pages', :action => 'locations' %></li>
<li><%= link_to "Employment", :controller => 'pages', :action => 'employment' %></li>
<li><%= link_to "News", :controller => 'pages', :action => 'news' %></li>
<li><%= link_to "Contact Us", :controller => 'pages', :action => 'contact' %></li>
<li><%= link_to "Site Map", :controller => 'pages', :action => 'Sitemap' %></li>
</ul>
</div>
</div

</div>

jcdevelopment

02-27-2008, 07:36 PM

does your footer have clear:both on it!!