Google Chrome button and tab issue

HTML & CSS
1

Hello guys

I am having trouble with two issues in chrome.

I’ve highlighted them in an image and have provided the code.

I cant give the URL as it is not launched yet.

Can you assist?

Thanks

 

 

.tab-inner { width: 100%;}
.tab-outer { height:81px !important;  display:block; }/*border: 2px solid red;*/
.tab-selected .tab-outer {height:81px !important;}/* */
/*End of bought in from RenderEngine_Global.css */

.tabbed-zone-body { padding:0; margin:0 0 15px 10px ; width:100%;} /* border: 7px solid #76EE00; light green border*/
.tabbed-zone-outer { padding:0pt; margin:0pt;} /*border: 5px solid #008B8B; dark green border*/

.tabs-menu-outer ul {float:right!important; padding:0!important; margin:0!important;  width:100%!important;} /*border: 6px solid #FF7F00; orange border*/

.tabs-menu-outer  li { margin-bottom:0!important;}
.tabs-menu-outer ul li {list-style-type: none;} /*; black border for all the tabs*/
.tabs-menu-outer ul li, .tabs-menu-outer ul li a { padding:0!important;}/*.tabs-menu-outer ul li span */
.tabs-menu-outer ul li {text-align: left;}

.tabs-menu-inner{ float:right; width:21.1%; height:303px; margin:0!important; padding:0!important;}

.tab-alpha {background: url("/#") no-repeat 14px 45% transparent;}
.tab-alpha a:hover {background: url("#") no-repeat -2px 2px transparent;} 
.tab-alpha.tab-selected { background: url("#") no-repeat -2px 2px transparent;}

/*START-tab-main-body-parent-visitors-search*/
.tabs-body-alpha .page-element-inner{width:330px; padding:0!important; margin:35px 0 0 35px!important;}
.tabs-body-alpha .oDataFormElement { width:264px!important; height:25px;}
.tabs-body-alpha .oDataFormElementContainer{ width:264px; height:25px; padding:0!important; margin:0!important; float:left!important;}
.tabs-body-alpha .oDataFormInputText { width:250px; padding:0!important; margin:8px 0 0 5px!important; border:none;}
.tabs-body-alpha .oSearchInline fieldset {background:transparent; padding:0; margin:0; }
.tabs-body-alpha .oDataFormFieldset {padding:0!important; margin:0!important; }
.tabs-body-alpha .oDataFormButton{padding:0!important; margin:0!important; background-color:none!important;  background-image:none!important; background:transparent!important;}
.tabs-body-alpha .oDataFormButtonContainer { padding:0!important; margin:1px 0 0 4px!important; background-color:transparent!important;  background-image:hidden!important; background:transparent; clear:none;}
2

Hi,

It will be too hard to work out from that code what’s going on I’m afraid. We’d need at least a working demo (html and css) and the problem could be solved in minutes.

If the layout is a fixed width then avoid things like this:

width:21.1%;


.tabs-menu-inner{ float:right; width:21.1%; height:303px; margin:0!important; padding:0!important;}

That 21.1% is unlikely to be the same cross browesr depending on how they round percentages and if indeed it needs to meet exactly with some other element you will get a gap. If the layout is a fixed width then give it the exact pixels it needs.

To center the non wrapping text inside a small button then give it a line-height equal to the height and no vertical padding and it should centralise.

3

Thanks Paul i’ve sent a private message.

4

HI,

Try something like this:


.tabs-body-outer {
width:782px;
}
.tabs-menu-inner{
width:209px
}

.oDataFormButtonContainer  input{
line-height:34px;
text-align:center;
width:40px!important;
}

You will need to check the input button rules don’t hit other inputs as you had no unique identifier on that input.

5

this one has worked like a charm thank you so much:


.tabs-body-outer {
width:782px;
}
.tabs-menu-inner{
width:209px
}

the other one didn’t but i will keep on looking.

Thank you so so so so much mate

C

6

It’s working fine for me on chrome I have it running now using CSS terminal on your live site. I don’t see that code on the site.

7

Yep in chrome but what about the other browsers?

Thanks Paul i will give it another go and see.

Thank you so much.

8

Solved, this works now thank you so so so so much.