1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Solved: CSS border problem

Discussion in 'Web Design & Development' started by colinsp, Sep 24, 2008.

Thread Status:
Not open for further replies.
Advertisement
  1. colinsp

    colinsp Thread Starter

    Joined:
    Sep 5, 2007
    Messages:
    2,262
    First Name:
    Colin
    I have a container div and inside it I have two column divs. The left hand column is always likely to be shorter than the right hand column (the right hand column content is dynamic). I have a border round the right column that displays correctly but if I put a border round the lh column it is too short and looks odd. I have tried putting a border on the container div and it is not visible.

    Is it a z-index problem or something else? (IE7 displays the border properly but no other browser does :mad:)

    Also the layout is totally screwed up in IE6 but fine in FF, Opera, Safari, IE7 and Chrome. Any thoughts on this too would be great.

    The page that I am trying this on is here
     
  2. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Here is the definition of the "container" class:
    Code:
    .container {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	background-color:#B6D0B0;
    	background-position: center top;
    	/*min-height:850px;*/
    	height: auto;
    	width: 985px;
    [b][color=red]	border: thin solid #9EB874; [/color][/b]
    	position: relative;
    	visibility: visible;
    	position:relative;
    	margin:0 auto;
    	padding:0 0 0 0;
    	text-align:left;
    [b][color=red]	border-left:1px solid #9EB874;
    	border-right:1px solid #9EB874;
    	border-top:1px solid #9EB874;[/color][/b]
    }
    
    Try removing the border-left, border-right, and border-top style rules and see what happens.

    Also, I notice the "page" DIV doesn't have the same width as the DIVs above it. The border on the right side of "page" DIV misaligns with the DIVs above it.

    I'm sure you're familiar with my "IE sucks" comments and I might have posted here that IE7 sucks less than IE6 since IE7 supports web standards better than IE6. You will either need IE6 specific CSS styling to get IE6 to behave or redo the layout from scratch, making sure your changes work in IE6 as well as the other browsers you mention.

    Peace...
     
  3. colinsp

    colinsp Thread Starter

    Joined:
    Sep 5, 2007
    Messages:
    2,262
    First Name:
    Colin
    Thanks for the ideas, I have removed the border left, right and top and still no different.

    The page div is 965px the same as the rest (or it is now, maybe I spotted that and changed it yesterday after you had looked).

    IE6 now seems to be behaving itself but it isn't quite as I want it so I will have to put some specific IE6 code in :(
     
  4. colinsp

    colinsp Thread Starter

    Joined:
    Sep 5, 2007
    Messages:
    2,262
    First Name:
    Colin
    I have done some more work on this and got it working acceptably in IE 6&7.

    I think I have found the problem but I don't know how to fix it for the other browsers.

    The container div is not growing in height to contain the other div's. If I set a min-height then that is being taken as a max-height by FF etc. Is it something to do with the nesting of the divs? Probably not as the container div is the first div called and the last one closed.

    Any thoughts most welcome.
     
  5. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Nope, it's not the DIV nesting and Firefox isn't treating min-height as max-height. It's the floating of the col1 and col2 DIVs, I believe. Your structure is basically like this:

    <div class="container">
    <div class="page">
    <div class="col1">
    ....
    </div>
    <div class="col2">
    ....
    </div>
    </div> <!-- page -->
    </div> <!-- container -->

    Now, since col1 and col2 are both floated to the left, they are dropped from the normal "flow" of the page DIV. As a result, the page DIV won't have the desired height you want and col2 appears to "spill over". At least this is what I think is happenining. :)

    Try adding a DIV to the end of the page DIV or the container DIV, like this:

    <div class="container">
    <div class="page">
    <div class="col1">
    ....
    </div>
    <div class="col2">
    ....
    </div>
    <div style="clear:both"></div>
    </div> <!-- page -->
    </div> <!-- container -->

    That should force the page DIV to have the desired height and everything else should fall into place. Let me know what that does.

    Peace...
     
  6. colinsp

    colinsp Thread Starter

    Joined:
    Sep 5, 2007
    Messages:
    2,262
    First Name:
    Colin
    Brilliant.

    That worked fine and in fact I now don't need the page div either it displays properly.

    Talk about not seeing the wood for the trees.
     
  7. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Great! Glad that worked out. :) I can't take credit for the "clear: both" DIV since that's been posted on this forum by others in the past and I learned about that here. :)

    Peace...
     
  8. colinsp

    colinsp Thread Starter

    Joined:
    Sep 5, 2007
    Messages:
    2,262
    First Name:
    Colin
    Thanks once again. I will remember that "clear: both" for future reference.
     
  9. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Similar Threads - Solved border problem
  1. peterinwa
    Replies:
    2
    Views:
    251
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/752816

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice