Website Navigation Bar Bug

[christiansalazarh]

I’m still waiting for SebK to confirm that he did zoom to get this error… The whole menu is made with background images and when chrome zoom is used all those background images are misplaced for 1px, that’s why the white line appears… not sure how and if to fix this as this is obvious a chrome issue…

this is a solution: adding a 1px border to the menu will fullfill this empty space.

[color=#880000]// original file is: http://www.yiiframework.com/css/layout.css[/color][color=#000000]

[/color][color=#880000]// applies only to chrome[/color][color=#000000]

[/color][color=#880000]// [/color][color=#000000]

[/color][color=#666600].[/color][color=#000000]layout[/color][color=#666600]-[/color][color=#000000]main[/color][color=#666600]-[/color][color=#000000]header [/color][color=#666600].[/color][color=#000000]menu li

[/color][color=#666600]{[/color][color=#000000]

    position[/color][color=#666600]:[/color][color=#000000]relative[/color][color=#666600];[/color][color=#000000]


    display[/color][color=#666600]:[/color][color=#000000] [/color][color=#000088]inline[/color][color=#666600];[/color][color=#000000]


    margin[/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]0[/color][color=#666600];[/color][color=#000000]


    padding[/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]0[/color][color=#666600];[/color][color=#000000]


    [/color][color=#000088]float[/color][color=#666600]:[/color][color=#000000] left[/color][color=#666600];[/color][color=#000000]


    border[/color][color=#666600]-[/color][color=#000000]right[/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]1px[/color][color=#000000] solid [/color][color=#880000]#999;[/color][color=#000000]


    text[/color][color=#666600]-[/color][color=#000000]transform[/color][color=#666600]:[/color][color=#000000]lowercase[/color][color=#666600];[/color][color=#000000]


    line[/color][color=#666600]-[/color][color=#000000]height[/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]19.5px[/color][color=#666600];[/color][color=#000000]


    


    border[/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]1px[/color][color=#000000] solid [/color][color=#880000]#999;  // THIS LINE SOLVE THE PROBLEM WHEN CHROME ZOOMS TO 50%[/color][color=#000000]

[/color][color=#666600]}[/color]

[mdomba (Maurizio Domba Cerin)]

@bluyell

your solution does not work for the yii site as by giving a gray border makes other problems… as samdark already posted few posts before this is already solved and will be visible on next site deploy… the solution is to use a transparent border