Div Border displayed sometimes only shows 3 sides

Discussion in 'HTML' started by Remy, Feb 21, 2007.

  1. Remy

    Remy Guest

    I've rewritten my page from using tables to CSS, so might still look a
    little tabelish....
    Now I have a problem with borders.
    It looks good in IE and Safari, but Firefox only displays 3 sides for
    some parts and funny enough, for different parts on Windows and on
    Mac.

    The page is built up of several parts that kinda look like this.
    OnMouseOver they should become a boarder and a different background
    color.

    <div class="formEntry">
    <img id="imgModule" class="briefing" src="images/documents.gif"
    alt="Quellen Default" style="height:40px;width:40px;border-width:
    0px;" />
    <div style="width:400px; float:left;">
    <h2><span id="lbTitle">Quellen</span></h2>
    <input name="fileTextFileUpload" type="file"
    id="fileTextFileUpload" style="margin-bottom:5px;" /><br />
    <a id="lnkAddItem"
    href="javascript:__doPostBack('ctl00$Main$ctrlBriefingUIItems
    $ctl05$lnkAddItem','')">hallo</a>
    </div>
    <div style="clear:both;"></div>
    </div>

    For example purposes, I made the border red.

    div.contentCreation div.formEntry
    {
    overflow:auto;
    margin:1px;
    padding:10px;
    border-width: 1px;
    border-style: solid;
    clear:both;
    border-color: Red;
    }

    This is the css in the normal (no mouseover) state. Most elements get
    the border all around, but for some, specially "Quellen", the buttom
    line is missing in Firefox.

    You can see the page here:
    http://www.blaettler.com/Test/borderissue/borderissue.html

    It's a ASP.NET 2.0 page, so it has a lot of additional stuff in it.
    Sorry. I run it through the W3C validator and that was ok.
    If I leave away the overflow:auto; it works, but then the mouseover in
    IE doesn't work in some areas.

    Any ideas what I'm doing wrong?

    Cheers

    Remy
    Remy, Feb 21, 2007
    #1
    1. Advertising

  2. Remy wrote:
    > I've rewritten my page from using tables to CSS, so might still look a
    > little tabelish....
    > Now I have a problem with borders.
    > It looks good in IE and Safari, but Firefox only displays 3 sides for
    > some parts and funny enough, for different parts on Windows and on
    > Mac.
    >
    > The page is built up of several parts that kinda look like this.
    > OnMouseOver they should become a boarder and a different background
    > color.
    >
    > <div class="formEntry">
    > <img id="imgModule" class="briefing" src="images/documents.gif"
    > alt="Quellen Default" style="height:40px;width:40px;border-width:
    > 0px;" />
    > <div style="width:400px; float:left;">
    > <h2><span id="lbTitle">Quellen</span></h2>
    > <input name="fileTextFileUpload" type="file"
    > id="fileTextFileUpload" style="margin-bottom:5px;" /><br />
    > <a id="lnkAddItem"
    > href="javascript:__doPostBack('ctl00$Main$ctrlBriefingUIItems
    > $ctl05$lnkAddItem','')">hallo</a>
    > </div>
    > <div style="clear:both;"></div>
    > </div>
    >
    > For example purposes, I made the border red.
    >
    > div.contentCreation div.formEntry
    > {
    > overflow:auto;
    > margin:1px;
    > padding:10px;
    > border-width: 1px;
    > border-style: solid;
    > clear:both;
    > border-color: Red;
    > }
    >
    > This is the css in the normal (no mouseover) state. Most elements get
    > the border all around, but for some, specially "Quellen", the buttom
    > line is missing in Firefox.
    >
    > You can see the page here:
    > http://www.blaettler.com/Test/borderissue/borderissue.html
    >
    > It's a ASP.NET 2.0 page, so it has a lot of additional stuff in it.
    > Sorry. I run it through the W3C validator and that was ok.
    > If I leave away the overflow:auto; it works, but then the mouseover in
    > IE doesn't work in some areas.
    >
    > Any ideas what I'm doing wrong?
    >


    Well, everything is sized in pixels and your have DIVs floating inside
    of fixed DIVs with 'overflow:auto;' so if the inside DIV is too big it
    will overlap the bottom border. Noticeable in Firefox if you
    incrementally decrease and increase the font size you will see borders
    disappear and reappear...

    Also what is the SPAN for inside the H2s?

    <h2><span
    id="ctl00_Main_ctrlBriefingUIItems_ctl03_lbTitle">Zielpublikum</span></h2>

    If you are just using it to create an anchor, just put the ID on the H2

    <h2 id="ctl00_Main_ctrlBriefingUIItems_ctl03_lbTitle">Zielpublikum</h2>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Feb 21, 2007
    #2
    1. Advertising

  3. Remy

    Remy Guest

    The span comes from ASP.NET, it's a label control. Do you think that
    hurts?

    Shouldn't the DIV outer div adjust it's hight automatically based in
    what is in it? I read that with 'overflow:auto one can achive that.
    The clear:both sems to do the same.
    It's looks like just the last pixel is lost. If I create a border with
    size=2, then I will always see at least a one pixel line on the
    bottom.
    I tried to arrange the inside div's differently too, but didn't yield
    to the right results.
    Basically I just need a border around a top-left aligned image and
    then some elements on the side.
    Remy, Feb 21, 2007
    #3
  4. Remy

    Remy Guest

    Just tried it with positioning the image absolute and the the elements
    besides relative. Creates the same results.
    Funny enough, if I take the link below the text input out, it works at
    least for Firefox on Windows. On Mac I see the effect after
    "Ausgangslage"
    Remy, Feb 21, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Saunders
    Replies:
    0
    Views:
    464
    John Saunders
    Aug 28, 2003
  2. Nehmo Sergheyev
    Replies:
    1
    Views:
    504
    Andrew Urquhart
    May 9, 2004
  3. Marcin Vorbrodt

    ::std sometimes needed, sometimes not

    Marcin Vorbrodt, Sep 16, 2003, in forum: C++
    Replies:
    24
    Views:
    761
    Jerry Coffin
    Sep 17, 2003
  4. Replies:
    1
    Views:
    502
    gkelly
    Nov 29, 2006
  5. Randy Smith
    Replies:
    2
    Views:
    444
    Randy Smith
    Apr 24, 2007
Loading...

Share This Page