Ah.. been there before.
On 7/26/07, Christopher Jordan <[EMAIL PROTECTED]> wrote:
Thanks Benjamin. I'll see if that helps. Unfortunately, that client just
up and decided out of the blue to stop work on all projects for about a
months time, so who knows when (if) I'll get back to it. :o(
Chris
On 7/26/07, Benjamin Sterling <[EMAIL PROTECTED]> wrote:
>
> Chris, with out actually seeing in action, my assumption is that you
> have the height set to 413px and do not specify a overflow to either hidden,
> auto or scroll and the assumption is that as some point the box is being
> forced taller and not resizing after there is smaller inner content. I
> would suggest taking out the paddings and adding them back in till you see
> the issue. Sadly, IE has known box issues so, you will need to adjust your
> math, height + paddingTop + paddingBottom, to suit.
>
> Hope this points you in the right direction.
>
> On 7/26/07, Christopher Jordan <[EMAIL PROTECTED] > wrote:
> >
> > Hi folks,
> >
> > I'm having trouble with a bit of jQuery/CSS stuff, and I'm hoping
> > someone here could explain what the heck I'm doing wrong. I am not by any
> > stretch a CSS guy. I do what I can to get by. Also (and I know this sticks
> > in lots of people's craw), this only *has to* work in IE. This is an
> > internal app for a company who does not use FF or any other browser.
> >
> > I've got the following in my main index file:
> >
> > <script src="/Include/JS/jquery.js"></script>
> > <script>
> > $(function(){
> > $(".ActionSelection").bind("mouseover",function(){
> > $(this).addClass("Underlined");
> > $(this).addClass("ActiveLinkColor");
> > }).bind("mouseout",function(){
> > $(this).removeClass("Underlined");
> > $(this).removeClass("ActiveLinkColor");
> > }).bind("click",function(){
> > DisplayScreen($(this).attr("method"));
> > });
> > });
> > ...
> > </script>
> >
> > then...
> > <body>
> > <div class="MainWrapper"> <!--- This creates the border and
> > colors that we're used to on our submodals --->
> > <div class="LeftPanel">
> > <div class="ActionHeader">Add New</div>
> > <div class="ActionSelection"
> > method="displayAddCancelCode">Cancel Code</div>
> > <div class="ActionSelection"
> > method="displayAddCancelReason">Cancellation Reason</div>
> > <br>
> > <div class="ActionHeader">Edit/Delete</div>
> > <div class="ActionSelection"
> > method="displayEditCancelCode">Cancel Code</div>
> > <div class="ActionSelection"
> > method="displayEditCancelReason">Cancellation Reason</div>
> > </div>
> > <div class="RightPanel">
> > <div class="StatusBar"></div>
> > <div class="RightPanelContent"></div>
> > </div>
> > </div>
> > </body>
> >
> >
> > The relevant CSS is: (don't mind the #someVar# it's a ColdFusion
> > thing. Those are evaluated to actual colors before they hit the browser)
> > div.MainWrapper{
> > height : 413px;
> > width : 100%;
> > margin : 2px 0px 0px 0px;
> > padding : 3px;
> > border : 3px solid
> > #ThisMasterConsoleTableBorderColor#;
> > background-color: #ThisMasterConsoleTableBackgroundColor#;
> > }
> > div.LeftPanel{
> > float : left;
> > border-right : 1px solid #ThisMasterConsoleTableBorderColor#;
> > width : 150px;
> > height : 400px;
> > }
> > div.RightPanel{
> > float : right;
> > border : 1px dashed ##A0A0A0;
> > width : 400px;
> > height : 400px;
> > }
> > div.StatusBar{
> > color : ##A0A0A0;
> > font-weight : bold;
> > width : 100%;
> > height : 15px;
> > border-bottom : 1px dashed ##A0A0A0;
> > text-align : right;
> > }
> >
> > /* Generic Classes */
> > .ActionHeader{
> > font-weight : bold;
> > color : #ThisMasterConsoleHeaderTextColor#;
> > background-color: #ThisMasterConsoleHeaderBackgroundColor#;
> > padding : 3px;
> > margin-right : 3px;
> > cursor : default;
> > }
> > .ActionSelection{
> > padding-left: 5px;
> > cursor : pointer;
> > }
> > .Underlined{
> > text-decoration: underline;
> > }
> > .ActiveLinkColor{
> > color: green;
> > }
> >
> > Okay, so I've got a nice box with a three pixel border around it and
> > it sits in a browser window sized just right leaving a two-pixel space
> > between the edge of the window and the three pixel border. When I mouseover
> > one of the ActionSelection divs the text contained within dutifully
> > underlines and changes color. However, the MainWrapper also seems to get two
> > pixels taller leaving me with a three pixel border on the top, left and
> > right and a one pixel border on the bottom! :o( The two pixel margin between
> > the browser window's bottom edge and that one remaining pixel of the bottom
> > three pixel border however, remains unchanged.
> >
> > I can attach some before and after screen shots if that would help.
> > Unfortunately, the code resides behind a firewall, and is not accessible to
> > the public. :o(
> >
> > Can anyone help me, please?
> >
> > Many Thanks,
> > Chris
> >
> > --
> > http://cjordan.us
>
>
>
>
> --
> Benjamin Sterling
> http://www.KenzoMedia.com <http://www.kenzomedia.com/>
> http://www.KenzoHosting.com <http://www.kenzohosting.com/>
--
http://cjordan.us
--
Benjamin Sterling
http://www.KenzoMedia.com
http://www.KenzoHosting.com
