SitePoint Sponsor

User Tag List

Results 1 to 24 of 24
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:
    Code:
    .trio_div {
    width:600px;
    }
    .trio_one {
    display:inline;
    width:200px;
    }
    .trio_two {
    display:inline;
    width:200px;
    }
    .trio_three {
    display:inline;
    width:200px;
    }
    html:
    Code:
    <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.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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/show...5&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.

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  5. #5
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:


    <script type="text/javascript">

    //<![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;">

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

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



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

    <li><a href="/Spirits/Tequila/"><img src="/images/home/trio/spirits/tequilas.jpg" alt="tequila" title="tequila" /></a>
    </li>

    <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>
    <li><a href="/Spirits/Jack-Daniels-Old-Number7-Black-295.html"><img src="/images/home/trio/spirits/jack-daniels.jpg" alt="jack daniels" title="jack daniels" /></a>
    </li>
    </ul>

    </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>

    <li><a href="/Spirits/"><img src="/images/home/trio/wine/orin-swift-prisoner.jpg" alt="Prisoner" title="Prisoner" /></a>
    </li>

    </ul>
    </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

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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).
    http://validator.w3.org/check?uri=ht...Inline&group=0

    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 &#91;code&#93; tags. Like HTML, the closing one has a slash: &#91;/code&#93;

  7. #7
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 -
    Code:
    .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)

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(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:
    Code:
    .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.

  9. #9
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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??

  10. #10
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    I think it's because of this:
    Code:
    .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!

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Also this code is (probably, haven't looked at the HTML) cuasing an IE6 bug. IT will double the margin
    Code:
    .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 .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  12. #12
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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...

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by RyanReese View Post

    because other browsers don't have quirks mode
    That's not quite true but I know what you meant

  15. #15
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  16. #16
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  17. #17
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  18. #18
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    That's not quite true but I know what you meant
    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
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  19. #19
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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?

  21. #21
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The site's been operational for awhile and working on all browsers. The slide show will be replacing the 3 static graphics on the bottom of the home page - wiseguysliquors(.)com/. That's why I wanted to get a working version of the jquery slideshow, replace the static graphics on the home page and then continue to work on the test page to fix the rest of the bugs.

    I know its a little backwards but the slide show has to be operational now. I could easily build the slide shows in flash, but the jquery plugin seems to have more flexibility for quick on page editing (with a future built custom interface to easily choose the ads to display form our sql db) as well as SEO advantages.

    ** I just created and condition that the new-slide page doesn't get the <?xml ...> line and poof! the slide show is working, but now my vertical nav bar is shifted over a few hundred pix.

    We're definitely getting to the crux of the problem. Any ideas why the nav bar is shifted ( Ithink this screws up other columns on other pages as well, but I have to leave the <?xml...> line in for now since the site's live.

  22. #22
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,751
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Of course it's broken! You give an element 200&#37; width and right:100%..a whole bunch of crap which I see absolutely NO reason why you did it in the first place. Not to sound rude

    Try this
    Code:
    #left-bar_new{display:inline;overflow:hidden;}
    
    #content-container2{width:auto;right:0;}
    #center{left:0;width:auto;margin-left:170px;float:none;}
    Then switch up your HTML. Place #left-bar_new in the HTML before the #center elemnet
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #23
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's ok Ryan, I have tough skin. As I mentioned in a previous post, alot of the "crap" css is from the original ecommerce skin (i.e. width 200%)... I'll make the suggested changes and see where I'm at, thanks.

  24. #24
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I cleaned up all the errors on the new-slide page and everything seems to be working with the exception of the navbar position.
    Ryan, I tried all your suggestions. It did move the nav bar to the left but pushed it down the page past the middle content. I'm going to have to create a few test pages and redo the some of the css in the middle content. The problem is that when the software calls the many templates to create a page, its bring levels and levels of css and html formatting (overkill) and I have to decide whether its worth sifting through that to simplify.

    Because the vert nav shift and middle content garbling when I remove the xml line (IE6), I had to keep it to make IE6 display properly. Hopefully I'll be able to redo the css to accommodate, but I think the ecommerce company that created the original skin designed the css with the <xml line in place and created IE6 hacks to get it to display the same as other browsers

    @Stomme Poes thank you very much or all your input, it has certainly made things a lot clearer.

    You can view the live mulitislide show on the home page now: wiseguysliquors(.)com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •