Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Div Border displayed sometimes only shows 3 sides

Reply
Thread Tools

Div Border displayed sometimes only shows 3 sides

 
 
Remy
Guest
Posts: n/a
 
      02-21-2007
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$ctrlBrie fingUIItems
$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/border...rderissue.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

 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-21-2007
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$ctrlBrie fingUIItems
> $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/border...rderissue.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
 
Reply With Quote
 
 
 
 
Remy
Guest
Posts: n/a
 
      02-21-2007
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.




 
Reply With Quote
 
Remy
Guest
Posts: n/a
 
      02-21-2007
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"


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Sometimes multi tabs sometimes only one? Robby Firefox 4 10-29-2006 02:47 PM
Change height of DIV when div border set marco_giuliani_it@hotmail.com Javascript 0 09-21-2005 02:42 PM
Firefox locks up on first URL sometimes; Sometimes closes itself Jim Firefox 0 06-28-2005 01:42 PM
Border lines in hidden div bleed through into visible div Jon Javascript 2 05-07-2004 04:06 PM
Re: Sometimes ASP.NET does find the dll, sometimes doesn't John Saunders ASP .Net 0 08-28-2003 01:40 PM



Advertisments