Can i change the element border model such that vertical borders own the corners rather than horizontal borders?
I'm using a combination of buttons and table cells to create a horizontal menu that looks like tabulated folders. It looks great save for one problem. The horizonal borders on a 1 pixel border own the corners rather than the vertical borders. This has two consequences in my application. If I set border-bottom : 0px; then the entire object drops in height by one pixel, making it look odd against the other tabs. If I simply change the bottom border to the background color (effectively making it disappear), then I have a one-pixel hole on each corner where the vertical border is interrupted. A wider border might solve (more or less) this problem, but that is unweildly.
I can honestly see where coders might want the choice between vertical border ownership or horizontal border ownership. This issue may already be addressed in the DOM and I simply can't find a reference. Is there a way to programmatically change which set of borders control the corner pixels? Horizontal or vertical?
Thanks!
All Replies (3)
Could you provide the CSS and the HTML for the table/buttons? And does this behavior occur only in Firefox? Or do other browsers have the same behavior?
Mozilla doesn't appear to have a way to post code directly to a response. Odd, that. I have replaced all open angle brackets with double colon (::) and all close angle brackets with a double tilde (~~). You'll need to switch them back to run the code.
Edit: OK, a double colon has some kind of meaning in Mozilla. There's probably a security hole in the forum because of all this. Let's try replacing the open angle bracket with a double pound sign.
Nope, that appears to be a shortcut to creating an HTML list. Let's see what hapens if I don't replace the open angle brackets.
Nope, that didn't work either, and there's no way to post a file other than an image to this post. Let's try surrounding the entire block pre tags.
Almost there!
This forum doesn't honor the >pre< block. I could use an answer to this question, but I literally can't find a way to post the code that doesn't get interpreted by this website. Even the pre block can't keep all the div blocks in place. Some show as expected, others are interpreted. Hey Mozilla! Your forum could use a bit of work. May I suggest you look at what StakOverflow.com did?
OK, let's try replacing open angle brackets with tilde-dash (~-) and the close angle brackets with dash-tilde (-~).
Eureka!
<script>
function openProfile(evt, profile_name){
var i;
var x = document.getElementsByClassName("profile_edit");
for(i = 0; i < x.length; i++){
x[i].style.display = "none";
}
document.getElementById(profile_name).style.display = "block";
x = document.getElementsByClassName("profile_tab_cell");
for(i = 0; i < x.length; i++){
x[i].className = x[i].className.replace(" profile_tab_cell_active", "");
}
evt.currentTarget.parentElement.className += " profile_tab_cell_active";
x = document.getElementsByClassName("profile_tab_item");
for(i = 0; i < x.length; i++){
x[i].className = x[i].className.replace(" profile_tab_active", "");
}
evt.currentTarget.className += " profile_tab_active";
}
</script>
<style>
div.profile_container{ font-size : 0; }
div.profile_edit{
margin : 0;
padding : 5px;
background : white;
border : 1px solid #aaa;
border-top-width : 0;
border-right : 2px solid #aaa;
font-size : 14px;
font-weight : normal;
}
div.profile_tab_bar{
margin : 0;
padding : 0;
}
button.profile_tab_item{
background : #ddd;
-webkit-border-radius : 5px 5px 0 0;
-khtml-border-radius : 5px 5px 0 0;
behavior: url(border-radius.htc);
border-radius : 5px 5px 0 0;
border : 1px solid #aaa;
border-bottom-width : 0;
margin : 0;
margin-right : 1px;
font-size : 11px;
font-weight : bold;
}
button.profile_tab_item:hover{
background : #aaa;
}
td.profile_tab_cell{
white-space : nowrap;
width : 1%;
font-size : 0;
margin : 0;
padding : 0;
border-bottom : 1px solid #aaa;
}
td.profile_cell_bottom_border{
border-bottom : 1px solid #aaa;
width : 99%;
}
td.profile_tab_cell_active{ border-bottom : 1px solid white; }
button.profile_tab_active{ background : white; }
input.profile_field_input{
font-size : 11px;
border : 0;
margin : 0;
padding : 1px;
padding-left : 7px;
border-left : 1px solid #eadcce;
border-bottom : 1px solid #eadcce;
-webkit-border-radius : 10px;
-khtml-border-radius : 10px;
behavior: url(border-radius.htc);
border-radius : 10px;
}
</style>
<h1>Edit Your Account Profile</h1>
<div class="profile_container"><table cols="5" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block1')">Block1</button></td>
<td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block2')">block2</button></td>
<td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block3')">block3</button></td>
<td class="profile_tab_cell"><button class="profile_tab_item" onclick="openProfile(event, 'profile_block4')">block4</button></td>
<td class="profile_tab_cell profile_cell_bottom_border"></td>
</tr><tr><td colspan="5">
</div>
<div id="profile_block1" class="profile_edit">
Block #1
</div>
<div id="profile_block2" class="profile_edit" style="display:none;">
Block #2
</div>
<div id="profile_block3" class="profile_edit" style="display:none;">
Block #3
</div>
<div id="profile_block4" class="profile_edit" style="display:none;">
Block #4
</div>
</table></div>
Modified by cor-el
That was a lot of work. OK, no, I haven't tried this in other browsers and yes, I might end up having to chase this problem (or ignore it) with every major browser. Mozilla's CSS rules indicate the border is diagonal, meaning corner pixels overlap. Apparently this is horizontal (top and bottom) first, veritcal (right and left) second, then repeat. What I'm hoping to find is a way to reverse that order such that the corner pixels are filled veritcal (right and left) first, horizontal (top and bottom) second. And I'm hoping to set that either in CSS or Javascript.