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
