[jQuery] A perhaps SOT CSS/jQuery question
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:
<span style="font-family: courier new,monospace;"> <script src="/Include/JS/jquery.js"></script></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <script></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(function(){</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> $(".ActionSelection").bind("mouseover",function(){</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$(this).addClass("Underlined");</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).addClass("ActiveLinkColor");
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }).bind("mouseout",function(){</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
$(this).removeClass("Underlined");</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> $(this).removeClass("ActiveLinkColor");
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }).bind("click",function(){</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
DisplayScreen($(this).attr("method"));</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> });</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> });</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> ...</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> </script></span><br style="font-family: courier new,monospace;">
then...
<span style="font-family: courier new,monospace;"> <body></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="MainWrapper"> <!--- This creates the border and colors that we're used to on our submodals ---></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> <div class="LeftPanel"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="ActionHeader">Add New</div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="ActionSelection" method="displayAddCancelCode">Cancel Code</div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="ActionSelection" method="displayAddCancelReason">Cancellation Reason</div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
<div class="ActionHeader">Edit/Delete</div></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="ActionSelection" method="displayEditCancelCode">Cancel Code</div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="ActionSelection" method="displayEditCancelReason">Cancellation Reason</div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </div></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
<div class="RightPanel"></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="StatusBar"></div>
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> <div class="RightPanelContent"></div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> </div></span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> </div></span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> </body></span>
The relevant CSS is: (don't mind the <span style="font-family: courier new,monospace;">#someVar#</span> it's a ColdFusion thing. Those are evaluated to actual colors before they hit the browser)
<span style="font-family: courier new,monospace;"> div.MainWrapper{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> height : 413px;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> width : 100%;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> margin : 2px 0px 0px 0px;
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> padding : 3px;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
border : 3px solid #ThisMasterConsoleTableBorderColor#;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> background-color: #ThisMasterConsoleTableBackgroundColor#;
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> div.LeftPanel{
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> float : left;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
border-right : 1px solid #ThisMasterConsoleTableBorderColor#;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> width : 150px;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> height : 400px;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> div.RightPanel{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> float : right;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> border : 1px dashed ##A0A0A0;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> width : 400px;</span>
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> height : 400px;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
}</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> div.StatusBar{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
color : ##A0A0A0;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> font-weight : bold;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> width : 100%;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> height : 15px;</span>
<br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> border-bottom : 1px dashed ##A0A0A0;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
text-align : right;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> /* Generic Classes */</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
.ActionHeader{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> font-weight : bold;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
color : #ThisMasterConsoleHeaderTextColor#;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> background-color: #ThisMasterConsoleHeaderBackgroundColor#;
</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> padding : 3px;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;">
margin-right : 3px;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> cursor : default;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .ActionSelection{</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> padding-left: 5px;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> cursor : pointer;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> .Underlined{</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> text-decoration: underline;</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> }</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> .ActiveLinkColor{</span><br style="font-family: courier new,monospace;"><span style="font-family: courier new,monospace;"> color: green;</span><br style="font-family: courier new,monospace;">
<span style="font-family: courier new,monospace;"> }</span>
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
--
<a href="http://cjordan.us">http://cjordan.us</a>