1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Please help me in this

Discussion in 'CSS' started by hallianonline, Jun 22, 2013.

  1. #1
    I am designing a website with the width of 1085px
    now I am facing a problem every time on full width menu it works fine on Mozilla but when i use chrome and in opera the same menu's width is making it too large i am attaching a picture here of my menu you will notice that in firefox the width works fine but in chrome and opera it will increase the width i wanna know what i do wrong every time in full width menu how do i fix it please help me css code also added here

    Problem of Menu Bar in different browsers[​IMG]


    Code

    Code (Text):
    1. nav{
    2. text-align: center;
    3. display:block;
    4. margin:0 auto;
    5. padding:0;
    6.  
    7. }
    8. .menu_website {
    9. padding:0;
    10. width:1085px;
    11. }
    12. .menu_website ul {
    13. display:inline-block;
    14. width:100%;
    15. background-color: #FE9711;
    16.   background: -moz-linear-gradient(top, #FE9711 0%, #E17310 100%);
    17.   background: -webkit-linear-gradient(top, #FE9711 0%, #E17310 100%);
    18.   background: -ms-linear-gradient(top, #FE9711 0%, #E17310 100%);
    19.   background: linear-gradient(top, #FE9711 0%, #E17310 100%);
    20. }
    21.  
    22. .menu_website li{
    23. list-style: none;
    24. float: left;
    25. position: relative;
    26. height: 40px;
    27.  
    28. }
    29.  
    30. .menu_website>li{
    31. background-color: #FE9711;
    32.   background: -moz-linear-gradient(top, #FE9711 0%, #E17310 100%);
    33.   background: -webkit-linear-gradient(top, #FE9711 0%, #E17310 100%);
    34.   background: -ms-linear-gradient(top, #FE9711 0%, #E17310 100%);
    35.   background: linear-gradient(top, #FE9711 0%, #E17310 100%);
    36. border-left: 1px solid #ffa32b;
    37. border-right: 1px solid #b05a0d;
    38. -webkit-transition: all 0.2s ease-in-out;
    39. -moz-transition: all 0.2s ease-in-out;
    40. -o-transition: all 0.2s ease-in-out;
    41. transition: all 0.2s ease-in-out;
    42. }
    43.  
    44. .menu_website li:first-child{
    45. border-radius: 1px 0px 0px 1px;
    46. border-left: none;
    47. }
    48.  
    49. .menu_website li:last-child{
    50. border-radius: 0px 1px 1px 0px;
    51. border-right: none;
    52. }
    53.  
    54. .menu_website a{
    55. display: block;
    56. text-decoration: none;
    57. color: white;
    58. text-transform:uppercase;
    59. padding: 0 25px;
    60. font-family:Arial, Helvetica, sans-serif;
    61. margin: 0;
    62. position: relative;
    63. font-size: 13px;
    64. font-weight:bold;
    65. line-height: 40px;
    66. }
    67.  
    68.  
    69. .menu_website li:hover{
    70. -webkit-box-shadow: inset 0 0 10px #470000;
    71. -moz-box-shadow: inset 0 0 10px #470000;
    72. box-shadow: inset 0 0 10px #470000;
    73. background-color: #3f3f3f;
    74. background-image: -webkit-linear-gradient(#565656, #373737);
    75. background-image: -moz-linear-gradient(#565656, #373737);
    76. background-image: -o-linear-gradient(#565656, #373737);
    77. background-image: linear-gradient(#565656, #373737);
    78. color:#fe5956;
    79.  
    80. }
    81.  
    82. .menu_website li:hover span:after{
    83. -webkit-transform: rotate(180deg);
    84. -moz-transform: rotate(180deg);
    85. transform: rotate(180deg);
    86. }
    87.  
    88. ul.menu_website-hover{
    89. visibility: hidden;
    90. position: absolute;
    91. top:100%;
    92. opacity: 0;
    93. height: 0;
    94. margin-left:1px;
    95. -webkit-transition: all 0.3s ease-in-out;
    96. -moz-transition: all 0.3s ease-in-out;
    97. -o-transition: all 0.3s ease-in-out;
    98. transition: all 0.3s ease-in-out;
    99. }
    100.  
    101. .menu_website li:hover .menu_website-hover{
    102. visibility: visible;
    103. height: 100%;
    104. opacity: 1;
    105. }
    106.  
    107. .menu_website-hover li{
    108. height: 100%;
    109. border-bottom: 1px solid #696969;
    110. background-color: #2a2a2a;
    111. border-left: none;
    112. border-right: none;
    113. }
    114.  
    115. .menu_website-hover li:hover{
    116. background-image: -webkit-linear-gradient(#2a2a2a, #434343);
    117. background-image: -moz-linear-gradient(#2a2a2a, #434343);
    118. background-image: -o-linear-gradient(#2a2a2a, #434343);
    119. background-image: linear-gradient(#2a2a2a, #434343);
    120. box-shadow: none;
    121. }
    122.  
    123. .menu_website-hover a{
    124. color: white;
    125. }
    126.  
    127. .menu_website a span:after{
    128. content: "";
    129. border-left: 3px solid transparent;
    130. border-right: 3px solid transparent;
    131. border-bottom: 3px solid white;
    132. position: absolute;
    133. top: 30px;
    134. right: 35px;
    135.  
    136. -webkit-transition: all 0.2s ease-in-out;
    137. -moz-transition: all 0.2s ease-in-out;
    138. -o-transition: all 0.2s ease-in-out;
    139. transition: all 0.2s ease-in-out;
    140. }
    141.  
    142. .menu_website-hover li:first-child, .menu_website-hover li:last-child{
    143. border-radius: 0;
    144. }
    145.  
    146. .menu_website a:after {
    147.     background: rgba(255,255,255,.07);
    148.     content: "";
    149.     height: 20px;
    150.     left: 0;
    151.     position: absolute;
    152.     width: 100%;
    153. }
    hallianonline, Jun 22, 2013 IP
  2. matt_62

    matt_62 Well-Known Member

    Messages:
    1,331
    Likes Received:
    276
    Best Answers:
    12
    Trophy Points:
    195
    #2
    for .menu_website

    try 100% for the width. the actual width should be limited by the outside container.
    i think your css should also have:
    * {
    padding: 0;
    margin: 0;
    }
    matt_62, Jun 23, 2013 IP
  3. hallianonline

    hallianonline Greenhorn

    Messages:
    82
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    18
    #3
    not working
    hallianonline, Jun 23, 2013 IP
  4. deathshadow

    deathshadow Prominent Member

    Messages:
    5,980
    Likes Received:
    827
    Best Answers:
    144
    Trophy Points:
    395
    #4
    Mistake #1 -- fixed width layout... at 1085 no less which means it's accessibility trash.

    Mistake #2 -- perfect width design element inside that fixed width layout.

    Mistake #3 -- attempting to apply styling to LI, which is most always a disaster.

    Mistake #4 -- looks like you've got that pointless HTML 5 NAV element mated to a pointless extra DIV around that UL, calling the markup into question as well.

    Sounds like what you have is what I like to call a "not viable for web deployment" design / layout concept... though I'd have to see the whole thing live to weigh in more, just from your little snippet it reeks of 'throw it out and start over' on accessibility grounds ALONE.
    deathshadow, Jun 23, 2013 IP
  5. cashyourfiles

    cashyourfiles Greenhorn

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #5
    i think you should try the 960 px width
    cashyourfiles, Jun 28, 2013 IP
  6. wiicker95

    wiicker95 Active Member

    Messages:
    437
    Likes Received:
    37
    Best Answers:
    10
    Trophy Points:
    75
    #6
    And Mistake #5 -- using sophisticated selectors on LI and applying style to it on two different occurences, which combines inline-block display and a float, along with adding useless width:100% on a block-level element.

    Other than what Deathshadow said, which is entirely true, you have added countless useless properties just to patch up it in one browser (FF). And of course, by doing so you wind up with a completely broken layout in other browsers.
    wiicker95, Jun 29, 2013 IP