I'm building a page that has a UL list with its items floated to create 2 columns. See http://epraxadev.com/valencia/food_truck_festival/index2.php
It works perfectly in Firefox, Chrome, Safari, IE8, and IE7. The only problem is in IE6. In IE6, instead of the list elements stacking in neat 2-row columns, with the thumbnail floated to the left and the description of the thumbnail floated to the right, the description somehow magically clears the floated thumbnail. Odd!
Here's the markup
<ul id="theTrucks">
<li>
<a class="thumb"><img src="images/trucks/dim-sum.png" width="78" height="79" alt="Dim Sum" /></a>
<div class="details">
<p>The Dim Sum Truck brings ample amounts of steamed shu mai and har gow dumplings, baked BBQ pork buns and more.</p>
<ul>
<li>Website »</li>
<li>Facebook »</li>
<li>Twitter »</li>
</ul>
</div>
</li>
<li>
<a class="thumb"><img src="images/trucks/border-grill.png" width="78" height="79" alt="Border Grill" /></a>
<div>
<p>The Border Grill Truck serves gourmet tacos, quesadillas, ceviches and more.</p>
<ul>
<li>Website »</li>
<li>Facebook »</li>
<li>Twitter »</li>
</ul>
</div>
</li>
<li class="clear"></li>
...repeats
And here's the CSS:
<style type="text/css">
ul#theTrucks { margin:1em 0 0; padding:0; }
ul#theTrucks li { width:320px; float:left; display:inline; margin-right:11px; list-style:none; overflow:hidden; }
ul#theTrucks li a.thumb { float:left; display:inline; width:78px !important; height:79px; margin:0; }
ul#theTrucks li div { width:230px; float:left; display:inline; padding:0; margin:0 0 0 11px; }
ul#theTrucks li div p { margin-bottom:0.5em; font-size:11px; line-height:1.2; }
ul#theTrucks li div ul { padding:0; margin:0; list-style:none; font-size:11px; line-height:1.2; }
ul#theTrucks li ul li { list-style-type:none; margin:0; }
ul#theTrucks li.clear { width:100%; float:none; display:block; margin:0; height:50px; clear:both; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
ul#theTrucks li div { width:100px; clear:none; }
</style>
<![endif]-->
Note the IE6-specific style that makes the div only 100px, so I know it's not because the containing li (at 320px) is too small to contain it.
Figured out the problem. The innermost unordered-list <li> tags were inheriting the width of the container <li> tags, which was 320px. I set the inner <li>s like so:
ul#theTrucks li ul li { width:230px; margin:0; }
and ta da! No more alignment issues =D
http://www.thedimsumtruck.com/Index/Home.html is a frigging mess! You can barely scroll the page in IE8.
Related
I'm trying to make a horizontal list where each of the <li>s in the list have a height of 385px and a width of 400px.
I tried making the list horizontal by using inline-block, but that doesn't seem to be working.
By which, I mean the list is still vertical. The <li>s are the right size, but the list is not horizontal.
How can I make this list horizontal? (Preferably without flexbox)
Here is my CSS:
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:400px;
display:inline-block;
}
and my HTML:
<form action="" method="get">
<fieldset>
<ul id="slides">
<div id="first">
<li>
1
</li>
</div>
<div id="second">
<li>
2
</li>
</div>
<div id="last">
<li>
3
</li>
</div>
</ul>
</fieldset>
</form>
You are making it totally wrong, you are using div which are block level element, also you cannot use any other element except li inside ul, so your markup is invalid, instead do it like this
<ul>
<li><div>A</div></li>
<li><div>B</div></li>
</ul>
<style>
ul li {
display: inline-block;
}
</style>
Add a float:left to #slides li
#slides li{float:left;}
Hope this helps.
Remove the divs and float the lis to the left:
HTML
<form action="" method="get">
<fieldset>
<ul id="slides">
<li id="first">1</li>
<li id="second">2</li>
<li id="third">3</li>
</ul>
</fieldset>
</form>
CSS
html, body{
margin:0;
padding:0;
font-family:'Open Sans', sans-serif;
font-size:16px;
}
#slides{
list-style:none;
list-style-type:none;
}
#slides li{
height:385px;
width:40px;
display:inline-block;
float: left;
}
http://jsfiddle.net/X6LkZ/1/
When I toggle IE9's Compatibility VIEW on/off, my navbar shifts positions:
When Compatibility View: ON:
navbar is centred fine. :)
When Compatibility View: OFF:
navbar is shifted to the right slightly. :(
NOTE: I could NOT attach a screenshot due to certain site restrictions. :(
Obviously I would like to correct this, but cannot; thus, why I am posting here. :)
My CSS file looks as follows:
/*background image for outside area*/
#outside {
background-image:url('/images/body_bg.gif');
}
/*style for main area*/
#main {
font:16px "Trebuchet MS", arial, verdana, serif, monospace;
margin-left:auto;
margin-right:auto;
width:1020px;
border:5px outset darkgrey;
background-color:white;
}
/*background image*/
#bg {
background-image:url('/images/content_bg.gif');
}
/*horizontal list item widths*/
ul.two li{width:50%;}
ul.four li{width:25%;}
ul.five li{width:20%;}
/*submenu list item widths*/
ul.sfour li a{width:25em;} /*alternate value = 19.1em*/
ul.sfive li a{width:18.5em;} /*alternate value = 15.3em*/
/*top navigation bar*/
#topnav ul {
list-style-type:none;
margin-left:auto;
margin-right:auto;
width:100%;
overflow:hidden;
}
#topnav li {
float:left;
}
#topnav li a {
background-color:#606060;
color:white;
display:block;
font-size:large;
font-weight:bold;
font-variant:small-caps;
padding-top:4px;
padding-bottom:4px;
text-align:center;
text-decoration:none;
}
#topnav li a:active {
color:yellow;
}
#topnav li a:hover {
background-color:#888888;
}
/*topnav submenus*/
#topnav li ul {
display:none;
position:absolute;
}
#topnav li:hover ul {
display:block;
}
#topnav li:hover li {
float:none;
}
#topnav li:hover a {
background-color:#888888;
}
#topnav li:hover li a {
display:block;
font-size:small;
font-weight:normal;
font-variant:normal;
text-align:center;
text-decoration:none;
}
#topnav li:hover li a:hover {
background-color:#B0B0B0
}
/*page title*/
h1 {
border-bottom:3px solid black;
color:gray;
margin-left:auto;
margin-right:auto;
width:90%;
}
/*content*/
#content {
margin-left:auto;
margin-right:auto;
width:90%;
}
My _Layout.cshtml file is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>C4DP - #Page.Title</title>
<link href="#Href("~/Styles/Style.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/scripts/functions.js"></script>
<script type="text/javascript" src="/scripts/sorttable.js"></script>
</head>
<body id="outside">
<div id="main">
<img src="/images/title_c4dp.gif" alt="C4DP" width="100%"/>
<div id="bg">
<div id="topnav">#RenderPage("~/navbar_Top.cshtml")</div>
<h1>#Page.Title</h1>
<div id="content">
#RenderBody()
</div>
<div id="bottomnav">#RenderPage("~/navbar_Bottom.cshtml")</div>
</div>
<p id="copyright">© 2012 C4DP. All rights reserved.</p>
</div>
</body>
</html>
The navbar file looks as follows:
#if (WebSecurity.IsAuthenticated) {
if (!Roles.IsUserInRole("admin")) {
<ul class="four">
<li>News</li>
<li>Stats
<ul class="sfour">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Profile
<ul class="sfour">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
} else { //logged in as administrator
<ul class="five">
<li>News</li>
<li>Stats
<ul class="sfive">
<li>Earnings</li>
<li>Session Average</li>
<li>Ranking</li>
</ul>
</li>
<li>Admin
<ul class="sfive">
<li>Cardrooms</li>
<li>Events</li>
<li>Members</li>
</ul>
</li>
<li>Profile
<ul class="sfive">
<li>Personal Info.</li>
<li>Change Password</li>
</ul>
</li>
<li>Logout</li>
</ul>
}
} else {
// nav bar when NOT logged in
<ul class="four">
<li>Home</li>
<li>Rules</li>
<li>Login</li>
<li>Request Membership</li>
</ul>
}
Please help!
It turns out that my navbar needed the {display:inline;} and {padding:0;} attributes added to it to make it work.
Not being a real guru at this stuff, I assume the INLINE attribute prevented it from being "pushed over" by its neighbouring element, and that the PADDING:0; attribute ensured that the navbar fit properly in its parent element.
If a "real guru" (someone with more experience than me) could confirm my assumption, that would be much appreciated. Thank you in advance.
av been scratching my head because of this for too long.I would like to change the width and height of easy slider version 1.7,i have gone through the faqs part of this site after researching in so many other places and cudn't get a solution.Please help.
<!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>
<title>Pilot project</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true,
numeric: true
});
});
</script>
<link href="pilotp.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="v1.7.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div class="header">
<div class="menu">
<ul>
<li>Home</li>
<span>
Web Hosting
Domain Registration
</span>
</li>
<li>Consultancy
<span>
I.S Audit
Information Security
</span>
</li>
<li>
Career's
</li>
<li>
Contact Us
</li>
<li>
Testimonials
</li>
</ul>
</div>
</div>
<div id="container">
<div class="slidercontainer" style="background-color:fuchsia;width:800px;height:300px"><!--Will hold the slider -->
<div id="content" style="background-color:yellow;width:800px; height:299px;">
<div id="slider" style="background-color:pink;width:800px;height:298px;">
<ul>
<li><img src="images/01.jpg" alt="Css Template Preview" /></li>
<li><img src="images/02.jpg" alt="Css Template Preview" /></li>
<li><img src="images/03.jpg" alt="Css Template Preview" /></li>
<li><img src="images/04.jpg" alt="Css Template Preview" /></li>
<li><img src="images/05.jpg" alt="Css Template Preview" /></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
this is the css
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider ul li, #slider2 ul li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:800px;
height:241px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:696px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls
{
height:28px;
margin-top:-20em;
margin-bottom:1em;
margin-right:0px;
margin-left:8px;
padding-top:0px;
padding-bottom:0px;
padding-left:0px;
padding-right:0px;
}
ol#controls li
{
margin:0 15px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a
{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a
{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/*just added */
ol#controls { margin: -30px 0 0 0 !important; }
/* // Easy Slider */
See line 73-76 in the CSS file screen.css:
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
And also change the width of the container:
#container{
margin:0 auto;
position:relative;
text-align:left;
width:696px; /* change this */
background:#fff;
margin-bottom:2em;
}
I have fixed it and it involved changing (increasing or decreasing) the width and height of
#slider ul li
{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:796px;
height:246px;
overflow:hidden;
}
The width and height of the images are of importance also.
Thank you for you assistance!
In javascript file (easyslider.js) remove:
obj.width(w);
obj.height(h);
I am prototyping a Wordpress template and I'm trying to place the same elements on the header like this: http://dl.dropbox.com/u/768097/about.pdf
Here are the HTML and CSS files: http://acreedy.oliveandpickle.com/
I need 4 columns in the header and everything should be placed under the images.
HTML:
<div id="header">
<h1>Alan Creedy</h1>
<ul id="quickInfo">
<li class="mission">Mission Statement</li>
<li>Helping People Think for Themselves</li>
<li>1.919.926.0688</li>
<li>Email Me</li>
</ul>
<ul id="menu">
<li class="current">Home</li>
<li>About</li>
<li>Best Practice Ideas</li>
<li>Management Tools</li>
<li>Preneed</li>
<li>Case Studies</li>
<li>Recommended Resources</li>
<li>Think Tank Forum</li>
</ul>
</div>
CSS:
#header {
border-bottom:3px solid #1582AB;
height:200px;
margin:0 auto;
padding:46px 0 0;
width:1000px;
position:relative;
}
#header h1 {
background:url("images/alan_creedy_headshot_transparent.png") no-repeat left top;
font-size:40px;
height:140px;
padding:8px 0 0 215px;
margin:0;
}
#quickInfo {
position:absolute;
right:10px;
top:10px;
width:400px;
}
#quickInfo li {
list-style-type:none;
}
.mission {
font-size:18px;
}
#menu {
margin:0 auto;
padding:0;
width:1000px;
}
Floating left will most certainly fix your issue, though keep in mind whenever you add padding or margin to your floated element that you will have to adjust your width as well. I checked out your page and you didn't compensate that change. Fix the width accordingly and you should be good to go :D
~ Chris
http://twitter.com/TheCSSGuru
If you're using html5 then you could use aside or section elements instead of div's.
<style>
.column {
float: left;
width: 200px;}
</style>
<aside class="column">
Column1
</aside>
<section class="column">
Column2
</section>
<section class="column">
Column3
</section>
<section class="column">
Column4
</section>
I wanna place two child un-ordered lists side by side.
They are having Class Names L and R
Heres the relevant part of the HTML markup.
<ul class="SearchResult">
<li class="Pagination">
<a id="lnkPageNumber_top_1" class="ACTIVE" onclick="ShowPage(this.id);" style="cursor: pointer;">1</a>
<a id="lnkPageNumber_top_2" onclick="ShowPage(this.id);" style="cursor: pointer;">2</a>
</li>
<li>
<ul class="L">
<li style="border: medium none ;">
</li>
<li class="Pagination">
<a id="lnkImagePageNumber_1" class="ACTIVE" onclick="ShowImage(this.id);" style="cursor: pointer;">1</a>
<a id="lnkImagePageNumber_2" onclick="ShowImage(this.id);" style="cursor: pointer;">2</a>
<a id="lnkImagePageNumber_3" onclick="ShowImage(this.id);" style="cursor: pointer;">3</a>
<a id="lnkImagePageNumber_4" onclick="ShowImage(this.id);" style="cursor: pointer;">4</a>
</li>
</ul>
<ul class="R">
<li class="T">Rose Villa</li>
<li>
<span>
<strong>Price</strong>
: Rs. 2,000,000
</span>
</li>
<li>
<strong>Features</strong>
:
<img height="16" width="16" src="bed.png" alt="Beds:" title="Bedrooms"/>
3
<img height="16" width="16" src="bath.png" alt="Baths:" title="Bathrooms"/>
3
</li>
</ul>
</li>
</ul>
The styleSheet applied is this
ul.SearchResult { width:100%; list-style:none; }
ul.SearchResult li { margin:2px; height:200px; border:solid 1px #B5D335;clear:left; }
ul.SearchResult img { padding:0px; margin:0px; width:235px; height:156px; border:none }
ul.SearchResult li.Pagination { padding:5px; height:auto; }
ul.SearchResult li.Pagination a { color:#669900; font-weight:bold; }
ul.SearchResult li.Pagination a:hover { color:#FF9900; }
ul.SearchResult li.Pagination a.ACTIVE { color:#FF9900; border:solid 1px #B5D335; padding-left:3px; padding-right:3px; }
ul.SearchResult li ul {float:left; list-style:none; }
ul.SearchResult li ul.L { width:245px;} /* Set as Television set BG */
ul.SearchResult li ul.R { width:292px;}
ul.SearchResult li ul li { padding:3px; border:none; height:auto; border-bottom:dotted 1px #C9C9C9; }
ul.SearchResult li ul li.T { text-transform:uppercase; color:#44962A; font-weight:bold }
ul.SearchResult li ul li span { display:table-cell; min-width:125px; width:auto; }
ul.SearchResult li ul li a { color:#44962A; }
ul.SearchResult li ul li a:hover { color:#FF9900; }
But the side by side alignment is not working at all.
What could be wrong?
h?
P.S: and yeah, I saw floating divs in list items
Its DIV mentioned there and ul here. Is "clear:left" applicable for bot?
It may be duplicate post for experts in CSS, but I am not. So please bear with it [:)]
Edit Note:- To explain the stuff in detail heres an image
alt text http://www.yetanothercoder.com/img.jpg
Adding a clear:none to your UL's should sort it, so:
ul.SearchResult li ul {float:left; clear:none; list-style:none; }
floating will position the element, but to let other elements position next to it as oppose to underneath it you need to apply the clear:none :)
hope this helps!