I can't seem to figure out how to get this right; I'm getting a different margin, or lack thereof, for IE and Firebird. The test page in question is this:
<!-- m --><a class="postlink" href="http://www.ksu.edu/projects/carbon/james/index.html">http://www.ksu.edu/projects/carbon/james/index.html</a><!-- m -->
The problem lies with the "search" link to the right of the main tabs. I'd like it to be positioned as it looks in firefox 0.7, i.e. it should float to the right and be about the same height as the tabs, slightly padded - say 3-4px - from the right and bottom.
Initially, I tried styling an entry in the list and just changing the styles for something like this: <li id="search>...</li> But that didn't seem to work. That being said, if someone has an means of getting that to work, that would be super. If you check the page and it's kind of wonky, that's just because I'm trying to fiddle with it to get it to work.
Thanks.This code works for me in IE 6 and Mozilla 1.6:
/* search */
#tabContent div {
float:right;
position:relative;
top:-20px;
}The problem is that I want it to be inline with the tabs, within that light brown area, only floated to the right, not higher or lower than them.
Not sure if that makes sense or not...I think I understand now. This code looks OK to me in IE, Mozilla 1.6 and FireFox 0.8.:
/* search */
#tabContent div {
float:right;
position:relative;
top:-25px;
padding: 3px 0.5em; /*padding, margin and border copied from the li elements*/
margin-right: 3px;
border: 1px solid #003471;
border-bottom: none;
border-top: none;
background-color:#EDE6CE;/*Copied the background from the #tabContent div a element*/
}
#tabContent div a {
margin:8px;
background-color:#EDE6CE;
/* border: 1px solid #003471;*//*removed border*/
}
#tabContent div a:hover {
background-color: #FEFDF0;
/* border: 1px solid #000;*//*removed border*/
}
In the original code of yours that I looked at from the URL you posted, the search link appeared with only a left and right border, was approx. the same height as the tabs and was almost all of the way to the right edge of the light brown area.
I hope this achieves the effect you intended.
<!-- m --><a class="postlink" href="http://www.ksu.edu/projects/carbon/james/index.html">http://www.ksu.edu/projects/carbon/james/index.html</a><!-- m -->
The problem lies with the "search" link to the right of the main tabs. I'd like it to be positioned as it looks in firefox 0.7, i.e. it should float to the right and be about the same height as the tabs, slightly padded - say 3-4px - from the right and bottom.
Initially, I tried styling an entry in the list and just changing the styles for something like this: <li id="search>...</li> But that didn't seem to work. That being said, if someone has an means of getting that to work, that would be super. If you check the page and it's kind of wonky, that's just because I'm trying to fiddle with it to get it to work.
Thanks.This code works for me in IE 6 and Mozilla 1.6:
/* search */
#tabContent div {
float:right;
position:relative;
top:-20px;
}The problem is that I want it to be inline with the tabs, within that light brown area, only floated to the right, not higher or lower than them.
Not sure if that makes sense or not...I think I understand now. This code looks OK to me in IE, Mozilla 1.6 and FireFox 0.8.:
/* search */
#tabContent div {
float:right;
position:relative;
top:-25px;
padding: 3px 0.5em; /*padding, margin and border copied from the li elements*/
margin-right: 3px;
border: 1px solid #003471;
border-bottom: none;
border-top: none;
background-color:#EDE6CE;/*Copied the background from the #tabContent div a element*/
}
#tabContent div a {
margin:8px;
background-color:#EDE6CE;
/* border: 1px solid #003471;*//*removed border*/
}
#tabContent div a:hover {
background-color: #FEFDF0;
/* border: 1px solid #000;*//*removed border*/
}
In the original code of yours that I looked at from the URL you posted, the search link appeared with only a left and right border, was approx. the same height as the tabs and was almost all of the way to the right edge of the light brown area.
I hope this achieves the effect you intended.