SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    css driving me crazy or is it the browsers ....

    Hi all,

    I'm having 2 issues well to be honest more than 2 but I'll keep to the css

    i want to create a newsitem in a nice little box sort of like fieldset in a form..

    problem1: in IE5 the border isn't showing.
    problem2: the read more link is placed outside of the box by ie7 and inside by FireFox (I want it inside!)

    Could any of you please help me with this?

    so here's what i have:?
    css:
    Code:
    .box {
     border-width:1px; 
     border-style:solid; 
     border-color:red;
     padding: 0px 10px 10px 10px;
     margin-top:10px;
    
    } 
     
    .legend {
    display:inline;
    padding:5px;
    font-weight:normal;
    height:20px;
    position:relative;
    z-index:101;top:-12px;
    background-color:#fff;
    }
    .boxcontent
    {
    margin-top:0px;
    }
    .more
    {
     float:right;
     margin-top:0px;
     font-size:60%;
     padding: 0px 0px 0px 0px;
    }
    and this is my html
    HTML Code:
    <div class="box" >
    <div class="legend">Header goes here</div>
    <div class="boxcontent">content goes here.....
    <div class="more">read more link >
    </div>
    </div>
    </div>
    the neigbours (free) WIFI makes it just a little more fun

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You have divitis. Instead of the "legend", use a heading (h2 or h3 probably). Then instead of boxcontent, use paragraphs (if it's going to be text only). And for the "more" thing, just use an anchor!

    I wouldn't worry about IE5 unless you specifically have been told to cater for it.

    Since you keep adding margin-top:0px to things, maybe you should put this at the beginning of your CSS and reset all default margins/padding to 0:

    Code:
    * {margin:0; padding:0;}
    Why does the "legend" need display:inline? If you want it to NOT extend to the full width of its container, float it left or give it a specific width.

    Regarding the problem with the "read more" bit leaving the box, that's because it's a float and it hasn't been cleared. Give its container overflow:auto to fix this. Also, I think "read more" should be outside the "boxcontent".

  3. #3
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    sorry I meant IE6 the borders aren't showing.. I'm not even gonna think about 5..
    and IE7 (vista) is placing the link outside the box.

    Thanks for the reply.. I'm gonna try..
    the neigbours (free) WIFI makes it just a little more fun

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I can see the red border in my IE6. BTW, you can condense this:
    Code:
     border-width:1px; 
     border-style:solid; 
     border-color:red;
    into this:
    Code:
    border:1px solid red;
    And I might also mention the overflow:auto clearing fix won't work by itself in IE6, you need to trigger haslayout too. See this link to decide what property you wish to use for that: http://www.satzansatz.de/cssd/onhavinglayout.html

  5. #5
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HI,

    divitis... I might have it.. but in this case I want this header to fall over the border of the box. so it's either a h2 with an id / class or it's a div. since I already use h1-4 on the rest of the site.

    also the site is going to include a rich text editor which will allow for H# so I wanted to make sure this is seperate.

    I took the whole boxcontent out of the css file, thanks!

    de display:inline made the box and the legend fall over eachother..

    In or outside of the box.. that's been a nice discussion already... I think you are right but ... I'm building this for my gf and she had something different on her mind

    it's fixed..

    Thanks!!

    Edit:

    The border issue is fixed also .. thanks
    Last edited by peanuts; May 5, 2007 at 06:21. Reason: comment
    the neigbours (free) WIFI makes it just a little more fun

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    so it's either a h2 with an id / class or it's a div
    No it's not. I think you might not have discovered the magic of descendant selectors. This works:
    HTML Code:
    <div class="box" >
    <h3>Header goes here</h3>
    <p>content goes here.....</p>
    <a href="#" class="more">read more link &gt;</a>
    </div>
    Code:
    .box {
     border:1px solid red;
     padding: 0px 10px 25px 10px;
     margin-top:10px;
    } 
     
    .box h3 {
    display:inline;
    padding:5px;
    font-weight:normal;
    top:-12px;
    position:relative;
    z-index:101;
    background-color:#fff;
    }
    .box .more {
     float:right;
     font-size:60&#37;;
    }
    If there are other rules elsewhere for h3 (e.g. color:blue) you can just override them up there by adding color:black or whatever it is you want it to be.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2001
    Location
    Amsterdam
    Posts
    788
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that .. I did know but it's giving me mayor headackes ...

    i'm doing some browser hacks to get multiple collumns and I tried getting stuff like link color changed with this and with ff it works like a charme .. ie7 will change my link color to the last color set.. it's a nightmare.. so if this works ... what is wrong with using a lot of div's?
    the neigbours (free) WIFI makes it just a little more fun

  8. #8
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Nothing really, but you should use the elements best suited for the job. An h1 and a div behave pretty much in exactly the same way, so there's no reason to not use an h1 and use a div instead because you think if you use divs for absolutely everything your layout will be more robust. It isn't true.

  9. #9
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This may not apply here since I didn't thoroughly read this but IE applies margin differently to lists than Firefox.


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
  •