SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Google Chrome button and tab issue

    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


    Code:
     
    
     
    
    .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;}
    Attached Images Attached Images

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    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%;
    Code:
    .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. #3
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul i've sent a private message.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    HI,

    Try something like this:

    Code:
    .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. #5
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    this one has worked like a charm thank you so much:

    Code:
    .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. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,821
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jelly46 View Post
    the other one didn't but i will keep on looking.

    Thank you so so so so much mate

    C
    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. #7
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yep in chrome but what about the other browsers?

    Thanks Paul i will give it another go and see.

    Thank you so much.

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved, this works now thank you so so so so much.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •