SitePoint Sponsor

User Tag List

Results 1 to 21 of 21
  1. #1
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bicolumnar layout - error when re-structuring

    Hi there,

    I have a bicolumnar layout incorporating two columns on my page. The content on the page is split by .right and .left - these divs act as the two main columns within the layout.

    Due to SEO on my site, I am having to change the order of the two divs within my markup - the order of markup used to be '.left' and then '.right' , and I am now needing to change the order to '.right' and then '.left'.

    Since I am only changing the order of the markup on the page, I thought it would be simple case of cutting and pasting to change the order of the two divs - however I have run into a complication - my old order of markup is displayed at http://www.jh-webdesign.co.uk/test . That is exactly how I want the layout to appear.

    However, my new order of markup is at http://www.jh-webdesign.co.uk/test/index2.asp and you will see it is not viewing properly. Can anyone spot the reason why it isn't, because I sure can't!

    Any help or advice as to why it is not displaying properly would be greatly appeciated. NOTE - The site will display sh*t at the moment if you view it in IE as I haven't patched it up yet - Firefox is fine.

    Cheers

    James

  2. #2
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    .right{float: right;margin-left:233px;}
    .left{width:233px;position: absolute;}

    You may have to mess with the margins a bit.
    Chris Bloom
    Web Application Developer

  3. #3
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that- it now looks fine in Firefox - however I am slightly concerned about the layout in terms of viewing it in IE - http://www.jh-webdesign.co.uk/test/index2.asp- It doesn't actually display the .left div at all. Do you know of any reasons why not?

    Thanks for all your help on this one

    Cheers

    James

  4. #4
    Non-Member deathshadow's Avatar
    Join Date
    Jul 2006
    Location
    Dublin, NH
    Posts
    901
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has the same issues in opera, and I can tell you why... Believe it or not, and excuse me while I commit a major bit of heresy, but firefox is NOT rendering the code as you have it written - it's the one at fault this time.

    Your 'rendering order' is all out of whack... The entire page content should be in the 'container', but you close that after the image in the content area... which means your left float shouldn't appear on the page until after the content... In fact, NO browsers are rendering the page as you wrote it, because quite literally your sidebar and footer should be appearing in an entirely separate block outside your margin setting.

    Ok, here's your fix; you should move the two DIV immediately after 'girlholdinghips.jpg'... one of those should go before '<div class="left">' while the other should go after the footer.


    Oh, and you probably should tab and space out everything so your formatting is clear, and only strip the unneccessary characters on your PRODUCTION copy.

  5. #5
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the comments Deathsahdow. However I dont exactly understand fully what you are saying - if you could explain in a bit more detail, that would be brilliant.

    I've tried it and the results from what you have suggested are at www.jh-webdesign.co.uk/test/index2.asp

    I have been experimenting with it last night and found that it taking out the .left div from my markup made eveything OK

    Any other suggestions before I finalise this?

    Cheers

    James

  6. #6
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right - I have been playing around with the structure a bit, and come up with a near perfect layout - www.jh-webdesign.co.uk/test/index3.asp. However you will notice that the .pgbtm_container divs are aligned vertically; instead I want them to be beside each other - any ideas on how to do this?
    I have the Firefox Web Developer plug-in installed; I was playing around with that on the page and whenever I just typed in 'display' into the CSS of the pgbtm_container div, it worked fine ; I then tried finishing this off my adding 'inline' to it but that didn't work. Any suggestions?

    Cheers

    James

  7. #7
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All sorted now - http://www.jh-webdesign.co.uk/test/index.asp- thanks to everyone who has give me advice

    Cheers

    James

  8. #8
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Very nice James. One question though, when the CSS is disabled all of the navigational links go away. I wonder why you've chosen to do it this way? It's not very accessible, especially since the links are still there in the tab-order of the page but wouldn't actually appear anywhere.

    If it is just so that you can replace the links with the images that you use in your site design, then you can always wrap the text of the link in a <span> and then set display: none on it. Your links will still be there, but your text will be hidden. You can also use the text-indent: -3000px technique.
    Chris Bloom
    Web Application Developer

  9. #9
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cheers xangelusx for your comments

    I will take a look into it further

    James

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    All sorted now - http://www.jh-webdesign.co.uk/test/index.asp- thanks to everyone who has give me advice
    ? Its completely broken in IE or is this an out of date link?

    You have overstated the width in a number of places.

    e.g.

    the right side is 515px wide but your nav menu ul which is inside this is 550px wide! How does that work
    Code:
    #nav-menu ul
    {
    list-style: none;
    padding: 0;
    margin: 0;width:550px;background-color:#ffffff;
    }

    Your left side is 233px wide but the very first element you place in it is 7px too wide.

    Code:
    #login {float:left;background-color:#aaaaaa;margin-right:5px;display:inline;border:solid 1px #bcbcbc;height:56px;width:233px;margin-bottom:5px;}
    233 + 5 + 2 = too big!

    Check the rest of your code so that elements actually fit in their containers or you are just asking for trouble
    Last edited by Paul O'B; Jul 20, 2006 at 08:50.

  11. #11
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, I will take a look at it later.

    Currently it is completely broken in IE - I need to look through the code and patch it up for IE; I think there is a double margin error on the right hand side within my container div- correct? I have corrected the width of my nav Ul to 515px which seems to do part of the trick - however, my last button still is forced below - double margin error?

    Also in the .latestinfo div I have a UL list. To take away the indent, I gave it a left margin of -50px. While it looks fine in Firefox, it has backfired and displays incorrectly in IE - is there a CSS command which gets rid of the default indent associated with UL's?

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    is there a CSS command which gets rid of the default indent associated with UL's
    The default spacing for bullets on ul's is simply the default padding/margin. So set left margin and padding to zero and the indent disappears (and so will the bullet but you should still use list-style:none anyway.)

    I'm just out for a few hours now and I will look back later and see how far you have got

  13. #13
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've managed to get rid of a couple of double margin errors - however, two errors are stumping me - the indent within the #latestnews div regarding the indent (only in IE) of the <h1> tag - is there a fix so that it lines up with the black text?

    Also my nav menu - it displays fine in Firefox, however in IE the last button is forced down - I was thinking at first that this could also be a double margin error but after spending several hours trying to fix the problem and I am no closer to doing so. Any suggestions on how I can get rid of this bug?

    Thanks everyone for all your help on this topic

    Cheers

    James

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The nav menu doesn't fit in IE because of the double margin bug on the first floated element. Add display:inline to fix the bug (as explained in the faq).

    Code:
    #nav-menu li
    {
    float: left;
    margin: 0 0 0 2px;background-color:#ffffff;
    display:inline;
    }

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The latest news is not working because you have called the block element display:inline which corrupts the layout. You can use display:inline on floats but only to fix ie's double margin and for no other reason than that.

    You still have not reduced the left padding on the ul to zero as I explained previously. Firefox uses default left padding for its bullets whereas ie uses default left margin. You need to set both to zero and then both browsers will be the same.

    Code:
    /* NEW UL */
    #latestnews ul{list-style:none;margin-left:0px;padding-left:0;margin-top:5px;margin-right:5px;/*display:inline; remove this*/}
    Hope that helps

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You are still overstating the width of elements.

    e.g.

    Code:
    #date,#login,#pridebulleted,#pridetitle,#latestnewstitle,#latestnews,#testimonial{width:233px;}
    #latestnews{border:solid 1px #bcbcbc;margin-bottom:5px;padding-top:0px}
    That will make latestnews equal to 235px wide and the parent div (.left) is only 233px wide.) The login element is also incorrect for similar reasons.

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Another example here:

    This image is 252px wide.

    http://www.jh-webdesign.co.uk/test/i...redservice.jpg

    and its parent container is only 250px wide.
    Code:
    .pgbtm-container{float:right;border:solid 1px #bcbcbc;margin-left:5px;width:250px;}
    You must be more careful as this is very sloppy Make sure that everything matches up correctly as there are enough bugs without you adding to them with silly mistakes I e stretches the container to accomodate the 252px width image which makes the element 252px wide + 2px(border) + 5px(margin) = 259px. You have two of these so 2 x 259 = 518px and the parent container is only 515px wide so they will never float side by side.

    Firefox ignores any overflow because you have told the parent to only be 250px and it obeys.

    You also have the double margin bug on that float so you need to add display:inline as already mentioned.

    Code:
    .pgbtm-container{float:right;border:solid 1px #bcbcbc;margin-left:5px;width:250px;display:inline;}
    .pgbtm-container img{display:block}
    (Set the image to display:block to kill any gaps also)


    The girl with her hands on hips won't float right in ie because your maincontent div isn't floated. Ie is clearing the ciontained float automatically and so the girl will start underneath. On the otherhand firefox doesn't clear floats autromatically and therefore your maincontent div has no height which is why the girl slides up alongside the text.

    You need to float the parent as well.

    e.g.
    Code:
    #maincontent-text{width:310px;float:left}
    #maincontent-text h1{display:inline;font-family:Arial;font-size:11px;color:#666666;float:left;font-weight:normal;line-height:15px;margin-left:10px;}
    #maincontent img{float:right}

    That should keep you going for a while

  18. #18
    SitePoint Zealot
    Join Date
    May 2003
    Location
    Sarasota, FL
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great evaluation Paul - I can see why you got CSS guru for '05. I wouldn't be surprised if you got it for 06 too
    Chris Bloom
    Web Application Developer

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I wouldn't be surprised if you got it for 06 too
    Thanks - I think it may be someone elses turn next year as I have had it for 2 years now

  20. #20
    SitePoint Guru redhillccwebmas's Avatar
    Join Date
    Jun 2005
    Posts
    989
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul for all your help on this - one other little question on this; there was a double margin error in IE within the p class="index" text in the centre of the page, which meant that the image of the woman was forced beneath it. I corrected this problem by adding 'display:inline' to the p class="index" CSS. However it has caused another problem; to do with the .pgbtm-container divs at the bottom of the right hand column. In Firefox, there are how I want them to be, however in IE they are stacked on top of each other- would you know of any way to fix this?

    Thanks guys for all your help on this - appreciated

    Kind Regards

    James

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,281
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I addressed this in my earlier replies but it seems things are a little different now.

    You can fix ie by placing a physical break in the page and clearing the floats beacuse ie is snagging on the floated content above it.

    e.g.
    Code:
    	<img src="http://www.jh-webdesign.co.uk/test/i...oldinghips.jpg" alt="Redhill Reigate Surrey Website Design"/></div>
        <div style="clear:both"></div>
       <div class="pgbtm-container"> <img src="images/titles/featuredservice.jpg" alt="Surrey Website Design"/> <a href="ourservices.asp?ID=2"><img class="thumb" height="95px" width="95px" src="images/services/SEO.jpg" alt="Search Engine Optimisation (SEO)"/></a>
    Alternatively wrap the 2 floated containers in a div and apply clear both to the div.


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
  •