SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Lawrence, KS
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Help with CSS and div tags

    I am working on a site that I want to look like this:

    http://www.jberradesign.com/images/1.jpg

    But it looks like this in the majority of web browsers"

    http://www.jberradesign.com/images/2.jpg

    Any suggestions?
    Affordable design solutions!
    www.jberradesign.com

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2001
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you could post a link to the HTML that would help, without seeing this it is very hard to give you any pointers.

    RK

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Lawrence, KS
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Affordable design solutions!
    www.jberradesign.com

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

    That page is a bit of an unhealthy mix of old and new .

    Browsers don't like the mix of absolutely placing elements within tables which is why you are getting differences.

    I don't use tables for layout anymore so I would convert that second table into a simple div like so:

    Code:
    <div class="backbox">
        <table border="0" align="left" cellpadding="0" cellspacing="0" class="header">
            <!--DWLayoutDefaultTable-->
            <tr>
                <td height="58" class="header">TAKE IT SERIOUSLY </td>
            </tr>
        </table>
        <div id="center" class="bodytext"> <img class="whiteboxpicture" src="http://www.jberradesign.com/clients/fivealive/images/smbox1.jpg" alt="smbox1" width="148" height="91" /> </div>
        <div class="smheader">TAKE IT SERIOUSLY </div>
        <br />
    </div>
    The replace the 2 styles with these.
    Code:
    #center {
        width:681px;
        height:506px;
        position:relative;
        top:69px;
        text-align:left;
        margin:0 0 0 13px;
        background-color: #FFF;
        padding: 0px;
    }
    .whiteboxpicture {
        height: 91px;
        width: 148px;
        position: absolute;
        bottom: -1px;
        right: -1px;
        border-top:5px solid #333;
        border-left:5px solid #333;
    }
    Not only is it simpler but its half the css and html.

    That gives the same results cross browser (more or less) but of course I don't know exactly what you were planning with that center section.

    Usually you would avoid using absolute positioning like you have done because you have limited content to only fit inside that section and you will have to control it with scrollbars or make sure it never overflows. However, I don't know what your plans are and if you are putting in a small scrollbox then you should be ok.

    Also note that IE6 (and under) don't understand absolute positioning when you use 4 co-ordinates (top,left,bottom and right). It only understands pairs of co-ordinates and ignores the other two. Therefore use top but don't use bottom or use bottom but don't use top (and same for left and right.)

  5. #5
    SitePoint Member
    Join Date
    Jun 2007
    Location
    Lawrence, KS
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul! That worked. I am fairly new to the CSS game. Thanks for your tips and pointers!!
    Affordable design solutions!
    www.jberradesign.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
  •