Inline divs of unorder lists

I’m trying to create 3 inline divs than contain unordered lists and having some difficulty (each div will eventually use a jquery innerfade plugin slide show which uses unordered lists for each slide show)

Here’s the sample code:

css:


.trio_div {
width:600px;
}
.trio_one {
display:inline;
width:200px;
}
.trio_two {
display:inline;
width:200px;
}
.trio_three {
display:inline;
width:200px;
}

html:


<div class="trio">
<div class="trio_one">
    <ul id="pic_rotate1" style="list-style-type: none; list-style-image: none; list-style-position: outside;"> 

            <li><a href="#"><img src="/images/1.jpg" /></a>
            </li>
            <li><a href="#"><img src="/images/2.jpg" /></a>
            </li>
            <li><a href="#"><img src="/images/3.jpg" /></a>
            </li>
    </ul>
</div>
<div class="trio_two">
    <ul id="pic_rotate2" style="list-style-type: none; list-style-image: none; list-style-position: outside;"> 

            <li><a href="#"><img src="/images/10.jpg" /></a>
            </li>
            <li><a href="#"><img src="/images/20.jpg" /></a>
            </li>
            <li><a href="#"><img src="/images/30.jpg" /></a>
            </li>
    </ul>
</div>
<div class="trio_three">
    <ul id="pic_rotate3" style="list-style-type: none; list-style-image: none; list-style-position: outside;"> 

            <li><a href="#"><img src="/images/12.jpg" /></a>
            </li>
            <li><a href="#"><img src="/images/22.jpg" /></a>
            </li>
            <li><a href="#"><img src="/images/32.jpg" /></a>
            </li>
    </ul>
</div>

</div>

I would like each vertical lists to display horizontally across the page without using tables:

Any help would be greatly appreciated.

Thanks very much.

Hi, welcome to SitePoint!

What you probably have seen is that this:
display: inline;
width: some width;

doesn’t work. Inlines can’t be given widths like that. Instead they’ll use their content inside to determine their width.

However you can try one of two things instead of display: inline.

You could try floating them. http://www.sitepoint.com/forums/showpost.php?p=1374925&postcount=15

Or you could try using display: inline-block. This one is a problem in FF2 (K-Meleon and I think also Seamonkey count as FF2) and IE needs some help as well.

*Edit, actually, unless your divs are holding an extra background image or border, you could even remove the inner divs and just have the ul’s themselves.

<div class=“trio”>
<ul class=“trio_one”>
the first list…</ul>
<ul class=“trio_two”>
the second list…</ul>
<ul class=“trio_three”>
the third list…</ul>
</div>

.trio {
width:600px;
}
.trio ul {
float: left;
width:200px;
}

or, using inline-block

.trio ul {
display: -moz-inline-box;
display: inline-block;
width: 200px;
}

IE 6 and 7 need code after this that states: .trio ul {display: inline;}

if the li’s inside the ul’s are kept as blocks, I remember Firefox2 will still have even more issues… something to do with the number of block children inside the display: -moz-inline-box elements. If floats do not do what you want and want to try inline block, I will look it up and post here.

Thanks. I’ll try those ideas. I did try using float and could get 2 of the 3 slide shows to display inline (using margins),but the third always ending up either over top the other two or underneath (ie 6 was a whole other issue!).

I have a static images working inline as shown below and would simply like to replace each graphic with an unordered list of graphics :

#trio_ads {
position:absolute;
display:inline;
margin: 10px 0 0 0;

}
.trio {
margin:5px 0px 0px 175px;
width:780px;
padding:0px 0px 10px 0px;

}
.trio .ad {
margin:10px 0px 0px 0px;
display:inline;
padding:0px 2px 0px 0px;

}
.trio .ad_middle {
display:inline;
padding:0px 2px 10px 0px;
vertical-align:top;

}
.trio .ad_last {
display:inline;
padding:0px 0px 0px 0px;

}

<div id=“trio_ads”>
<div class=“trio”>
<div class=“ad”><a href=“#”><img src=“/images/pic1.gif” border=“0”/></a></div>
<div class=“ad_middle”><a href=“#”><img src=“/images/pic2.gif” border=“0” /></a></div>
<div class=“ad_last”><a href=“#”><img src=“/images/pic3.gif” border=“0”/></a></div></div>
</div>
</div>

Let me know if that makes its clearer… in the meantime, I’ll try some of your recommendations

First, I’ll tell you that you really want the unordered list in the plain code. Unless you are explicitly hiding the lists from search engines and people without Javascript on (I understand this is sometimes the case). Otherwise, it’s wiser to start off with the unordered lists, and have jQuery actually swap them for the images onload, and then wait for the users to do whatever they’re supposed to do from there.

Second, ideally yes you can get all the floats to fit, but to make sure a bug or some unexpected extra width is causing the third one to wrap, you’ll want to (at first) give the floats a background colour so you can see them better.

The link I gave above about floats does mention the most common gotchas and problems with floats, including IE’s bugs, and how to fix. Also, if the floats have padding on the sides, or margins, know that those count towards total width! So three 200px-wide boxes CAN fit in a 600px-wide box, but not if there’s ALSO padding or margin on those… cause then you have boxes wider than 200px, so of course the floats will wrap. The inlines don’t, because they’re not starting at 200px wide anyway.

Your code for the absolutely positioned box also says “display: inline”. Since that’s ignored by all browsers, you can remove it.

Looking at the rest of your code, you could I think still use ul’s in place of the divs, esp if you agree to let jQuery do the initial swapping instead of the hard code starting with the images first. The JS would simply literally exchange the <ul class=“ad”> with a <div class=“ad”> and so long as your CSS only looks at
.ad
instead of
ul.ad
or
div.ad
the CSS will work either way (which is nice).

Otherwise if that gets too complicated you can also keep your current divs and swap the a for the ul… just an extra container really.

Anyway, give it a try, and post your new code here if you have problems; we can help.

Also, if you’re working with a live server, that’s also nice. You can post a link to your page-in-progress by omitting the http:// stuff and wrapping parens around your dots:

sitepoint(.)com/forums for example. This lets us see immediately how the page looks in multiple browsers too.

Thanks so much for your input. Trying a few things. Look like its working ok in FF, IE8 and IE7 but not in IE6 (may have to hack with negative margins???)

Maybe this will shed some more light on it… or maybe you can suggest a different plugin/ or html/css. The jquery plugin code with my slide shows looks like this and can be found
www(.)wiseguysliquors(.)com/new-slide:

here’s the css formating taken from my css file:

#new_trio_ads_test{
position:absolute;
margin: 10px 0 0 0;

}
.trio_new_test {
margin:5px 0px 0px 0px;
width:560px;
padding:0px 0px 10px 0px;

}
.trio_new_test .ad_test {
float:left;
margin:0px 0px 0px 0px;
display:inline;
padding:0px 2px 0px 0px;

}
.trio_new_test .ad_test_middle {
float:left;
padding:0px 2px 10px 250px;
vertical-align:top;

}
.trio_new_test .ad_test_last {
float:left;
padding:0px 0px 0px 250px;

}

html:

      &lt;script type="text/javascript"&gt;

//<![CDATA[

$(document).ready(function() {

        $('#beer_rotate').innerfade({

                    speed: 'slow',

                    timeout: 3000,

                    type: 'random_start',

                    containerheight: '170px'

        });
        $('#spirits_rotate').innerfade({

                    speed: 6000,

                    timeout: 3600,

                    type: 'sequence',

                    containerheight: '170px'

        });
        $('#wine_rotate').innerfade({

                    speed: 'slow',

                    timeout: 3200,

                    type: 'sequence',

                    containerheight: '170px'

        });

});

//]]>

</script>
<div id=“new_trio_ads_test”>
<div class=“trio_new_test”>
<div class=“ad_test”>
<ul id=“beer_rotate” style=“list-style-type: none; list-style-image: none; list-style-position: outside;”>

        &lt;li&gt;&lt;a href="/Beer/Blue-Moon-Belgian-White.html"&gt;&lt;img src="/images/home/trio/beer/blue-moon.jpg" alt="Blue Moon Belgian" title="Blue Moon Belgian White" /&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/Beer/Buffalo-Bills-Orange-Blossom.html"&gt;&lt;img src="/images/home/trio/beer/buffalo-bill.jpg" alt="Buffalo Bills Orange Blossom" title="Buffalo Bills Orange Blossom" /&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="/Beer/Dogfish-Head-Aprihop.html"&gt;&lt;img src="/images/home/trio/beer/dogfish-head.jpg" alt="Dogfish Head Aprihop" title="Dogfish Head Aprihop" /&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/Beer/Shiner-Bock.html"&gt;&lt;img src="/images/home/trio/beer/shiner-bock.jpg" alt="Shiner Bock" title="Shiner Bock" /&gt;&lt;/a&gt;

        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/Beer/Three-Floyds-Rabbid-Rabbit.html"&gt;&lt;img src="/images/home/trio/beer/three-floyds-rabbid-rabbit.jpg" alt="Three Floyds Rabbid Rabbit" title="Three Floyds Rabbid Rabbit" /&gt;&lt;/a&gt;
        &lt;/li&gt;
&lt;/ul&gt;

</div>
<div class=“ad_test_middle”>
<ul id=“spirits_rotate” style=“list-style-type: none; list-style-image: none; list-style-position: outside;”>

        &lt;li&gt;&lt;a href="/Spirits/Tequila/"&gt;&lt;img src="/images/home/trio/spirits/tequilas.jpg" alt="tequila" title="tequila" /&gt;&lt;/a&gt;
        &lt;/li&gt;

        &lt;li&gt;&lt;a href="/Spirits/Ketel-One-627.html"&gt;&lt;img src="/images/home/trio/spirits/ketel-one.jpg" alt="Ketel One" title="Ketel One" /&gt;&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;&lt;a href="/Spirits/Jack-Daniels-Old-Number7-Black-295.html"&gt;&lt;img src="/images/home/trio/spirits/jack-daniels.jpg" alt="jack daniels" title="jack daniels" /&gt;&lt;/a&gt;
        &lt;/li&gt;
&lt;/ul&gt;

</div>
<div class=“ad_test_last”>
<ul id=“wine_rotate” style=“list-style-type: none; list-style-image: none; list-style-position: outside;”>
<li><a href=“/Spirits/Ketel-One-627.html”><img src=“/images/home/trio/spirits/ketel-one.jpg” alt=“Ketel One” title=“Ketel One” /></a>
</li>

        &lt;li&gt;&lt;a href="/Spirits/"&gt;&lt;img src="/images/home/trio/wine/orin-swift-prisoner.jpg" alt="Prisoner" title="Prisoner" /&gt;&lt;/a&gt;
        &lt;/li&gt;

&lt;/ul&gt;  

</div>
</div>
</div>

As I mentioned, its all over the place in IE6. I don’t have Safari, chrome, etc test…
How does it look??

Thanks

Thanks for the link.

I don’t know jQuery so I can’t help specifically with that. In general, you should be able to get the non-JS page looking and acting decently, THEN tackle the JS. If we end up thinking the JS is actually causing a problem, this can go (as a new thread) to the Javascript forums, where there are people familiar with libraries like jQuery.

Anyway, looking at your page in general, some tips:

<?xml version=“1.0” encoding=“iso-8859-1”?>

You have this at the top of your page, and no I don’t blame you for having it… even the Doctypes page at the w3c say to use it. However it’s for real XHTML (as XML needs to have that opening tag). But your site is just a website, not XML data being displayed as some type of HTML… so remove it.
You know you don’t have real XHTML because your meta tag here: <meta http-equiv=“Content-Type” content="text/html; charset=iso-8859-1" />
(and also your server) says it’s really just html (which, btw, is what you want… IE cannot deal with true XHTML and your Javascript would not work either).

It just so happens that having ANYTHING before the doctype is a trigger for retard mod—er, “Quirks Mode” in IE6, meaning it’s using rules meant for pages written back in the days of grunge bands and geocities.

IE7 knows to ignore that XML prologue, but anything else before the doctype will put it into Quirks Mode too. Meaning it would render your page the way IE5 does. : )

This is your current doctype:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Go ahead and make it strict (instead of transitional). This lets the validator help you find nasty old-fashioned tags you shouldn’t be using anyway, so you can get rid of them and have a nicer-coded page.

So I ran your page through the validator, just to see how many errors there were (some errors may affect rendering in a browser while others don’t).

108 errors! However a lot of them are things like not using the /> endings that go with your chosen doctype. Also, usually fixing on error can fix 10 others, when your errors are things like tag mismatches.

For errors of “no alt attribute” on images that you have as decoration (so shouldn’t have any alt text), you fix that by adding alt=“” to the images.

deftext=“Search for beer, wine or spirits…” this error, the validator does not know what this deftext is. Neither do I. Doesn’t belong in the HTML.

<div id=“wise_phone”>Call: (###)###-####</div> this error looks like you have a div in a ul. Ul’s can only have li’s as direct children… but you can either put the div outside the ul, or into a li. Depends on what makes more sense to you.

<div style="display:inline;width=“700”>
error here is the quotes. style=“stuff inside” no inner quotes.

I’ll let you go through them from here and any you don’t understand, you can ask here.

.trio_new_test… is probably not where you think it is. As I said earlier, when dealing with floats, it’s a really good idea to (temporarily) add ugly background colours to your boxes, so you can see them. Also, looking at the page, I don’t see why #new_trio_ads_test is absolutely-positioned. Is that required for the Javascript?

I’d also advise removing the title attributes from your images inside the anchors, because the images are pretty readable, and those without images can read the alt text of the img tags. Having titles really just doubles the text, in this case it’s not wanted or necessary, and people will see where they go if they click on the link.

I don’t have Safari, chrome, etc test…
Since you have IE, I assume you have Windows? You can download Chrome browser and Safari for Windows for free. While they both use the same rendering engine, they do render pages slightly differently (as all browser do : )

Anyway your boxes are stacking on top of each other because, as I warned can happen with floats, they’re too wide to fit side-by-side.

.trio_new_test .ad_test_middle {
float:left;
padding:0px 2px 10px 250px;
vertical-align:top;
}

What this did was start with the image inside to set its basic width (why it’s a good idea to state widths on floats) and then it added 250px of left padding! That’s so wide that there’s just no room for the next float to fit beside it.

Background colours on the boxes will show excessive padding, but it won’t show excessive margin (margins are invisible). So you have to pay attention to your math.

In my Firefox without JS, I also see the first couple of images, then they get cut off. I think this might be because div.content is stopping about there. If you give .content a background colour you’ll see that.

Anyway, I’d say first thing is to fix the validation errors in the HTML. If you run across an error you don’t understand, you can post it here. Remove the XML prologue thingie, switch your doctype to “Strict” (because strict is more awesome) and keep sending your page to http://validator.w3.org/

Then see if you can remove the absolute positioning on the #new_trio_ads_test, give all relevant boxes ugly background colours, and let’s see where we are then.

If fixing a validation error makes your page look goofy, you can post that here as well if you can’t find a valid way to write what you want.

After getting things looking ok in browsers without the Javascript (you can either turn it off in your browser or for Firefox use the NoScript plugin), we can work on IE6’s remaining bugs… last is the Javascript itself, if it still needs fixing.

*edit in the future, when you post code on the forum, wrap that code with [code] tags. Like HTML, the closing one has a slash: [/code]

Thanks. Wow, it was 180 Errors, now down to 60. I’ll be removing the others moving forward.

Removed “xml” line

changed doctype to strict

I changed the position in trio_ads to position:relative;

I goofed on the divs -


.trio_new_test .ad_test_middle {
float:left;
margin:0px 0px 0px 250px;
vertical-align:top;

}
.trio_new_test .ad_test_last {
float:left;
margin:0px 0px 0px 250px;

}

Can you see if it displays ok in your browser(s)

Looks the same: no JS, they get cut off cause they’re not staying in line, with JS, they look ok (firefox only so far).

However I found the box that’s cutting the images off.

http://stommepoes.nl/wiseguys1.png
http://stommepoes.nl/wiseguys2.png
http://stommepoes.nl/wiseguys3.png <–this one shows the box cutting things off

The tool I’m using there is called Aardvark. However you may also be interested in a more extensive tool called Firebug (for Firefox only). Other browsers have similar debugging software as well.

Ah, so others can easily click to see the site: http://www.wiseguysliquors.com/new-slide

I still think it’s a small matter of making the floats small enough to fit side-by-side is all. Did you try the ugly background colour trick yet?

Also, while not looking great in IE6, removing the xml thing should have gotten it much closer to standard rendering.

Again, this is still going to cause a problem:


.trio_new_test .ad_test_middle {
float:left;
margin:0px 0px 0px 250px;
vertical-align:top;

}


Both margin and padding add to the amount of space that an object takes up on the page.

Padding is sort of like fat under your skin. If the place where your internal organs sits is your content area, and your skin is your outside edge, then when fat (padding) is added, the skin (edges) get further away from the content area, but importantly, also increases the amount of space you take up!

Margins are outside the skin. They’re a bit like an invisible force field. If you have 250px of side margin, then no other boxes can come close to that side; they are being held off by a force field that’s 250px thick. Which will make the amount of content-area of the parent box not possibly be wide enough to hold all those floats.

I suggest looking at the width of the divs (should be approx the same as the width of the images) and setting a width in px for those, and removing all padding and margin.

The floats should fit in most browsers (IE6 aside). Then if you want a bit of spacing between them, THEN add your little bit of margin to let them push each other around.

Great explanation for padding and margins
ok,
I removed all the padding and margins, set width’s to div @ 170 and turned off JS.
What I see is the 3 vertical lists, but now they’re overlapping??

I think it’s because of this:


.trio_new_test .ad_test {
float:left;
width:170px;
}

You set the widths to 170px, but your images are 250px wide!

normally floats won’t overlap. Normally they bump up against each other.

There are also an awful lot of elements involved… are these required for the jQuery? It’s easier to fumble around trying to figure out code when you have more of it. Sometimes this can’t be helped and some pages simply must be complex. However if you don’t have the need, it’s time to weed.

Hm, I’d suck as a rapper I guess.

Anyway if the JS doesn’t need all those elements we might want to see if we can lighten that code a bit.

Also, you still have some errors that I would call “important” (I believe they can affect browser rendering) esp tag mismatches.

Also font tags… no point in those, you’re already using CSS!

Also this code is (probably, haven’t looked at the HTML) cuasing an IE6 bug. IT will double the margin

.trio_new_test .ad_test_middle {
float:left;
margin:0px 0px 0px 250px;
vertical-align:top;

}

In IE6 the margin will be 500px.

Adding display:inline; should help with IE6, although there may be other issues at play which could be attributing to a drop. This just fixes one issue ;).

Had to put the “xml” line back in for now as it totally screwed up IE6 - makes my vert nav bar pop to the center and messes up the main content and right content container.

I’m not sure why it doesn’t affect every other browser but you’re were right on the money that it can/does affect the layout - in fact, the xml was causing the page not to stay centered when you expand the browser with, nor could handle the background shadow…

Not sure how to fix these issues nor the overlap issue on the trio slide show…

Well if your page is behaving correctly in quirks mode and then not in quirks mode, you should code for non-quirks mode lol. We can fix those issues :).

It doesn’t affect every other browser because other browsers don’t have quirks mode :slight_smile:

That’s not quite true but I know what you meant :slight_smile:

You definitely want to keep the xml line out (and you could get the same results if you just had

<!-- I wanna rockandroll all night… and party every day–>
in that place instead : ) comments or anything before the doctype sets the browser into Quirks Mode.
Quirks Mode for IE means it does not react correctly to modern CSS. As you saw.

We will get to IE6, don’t worry. I’m concentrating on the browsers I can open without having to call up virtual box right now : ) We can also get IE6 working well enough too, but I’d like to have some good code already nice and clean in the other browsers cause as I said, it’s harder to work with lots of extra code floating around.

Thanks! Ahhh you’re right, I put the wrong dimension in the css - the graphic is 240 wide. Now all my browsers lines up perfectly!!..

Ie6 aligns as well, however, when I turn on JS in IE6 slides shows on left and right display for a moment and then disappear!! (Regarding the code clutter, alot of the “extra” formatting is from the ecommerce engine I’m using with multi-layered template calling. I’ll keep cleaning up the code as best I can.)

Any ideas for IE6 with JS turned on?

I’ll address the “quirks mode”/xml line as it relates to the page formatting after I get this slide show working, although that may be causing the problem as well?..
thanks

I’d personally want to keep the JS for last… so far as I know jQuery is made to work cross browser thus also with IE6. But you still have html errors you want to clean up and leave browsers no excuses : )

After that, if the JS really has to be changed, then a new thread in the JS forums will do.

Remember, Javascript is working with the DOM, the Document Object Model made up of your HTML elements. If your HTML isn’t good, Javascript does not have to play nicely then. So the HTML should be thought of as a foundation that should be good before trying to manipulate it with JS. Other way around.

Yes I should have been clearer, noone else…oh…what should I sai…noone else acts like IE5 when in quirks mode and renders the page horribly from it :wink:

Thanks for that. That makes perfect sense. I’ll work on removing all the errors on the page and then go on from there. since the site is live, I will have to troubleshoot the xml line issue on low peak hours.

Aw, the site is live??

You could move the problem pages to inside another folder, so that people could only possibly run across it if they already know the address.

Nobody wants to run across a site being worked on : )

Was all this working earlier or was it that you had a page and later added jQuery or what?