Sunday 15 May 2011

CSS menu align is not stable in different browsers -


This is my page: I have a problem with CSS if the menu is opened in different browsers, then align the menu Please. I checked that the menu was not fully aligned with 3 different computers. Secondly, when I at least not even align the menu What should I do ?

I used Stylizer to change the CSS code. Here's the code:

  * {margin: 0; Padding: 0; Body {margin-top: 220px; Background: # 000 url (images / buttons .jpg) no-repeat center top; Color: # 5E5E5E; Font-family: Verdun, Ariel, Helvetica, Non-Serif; Font-size: small; Font style: normal; Font weight: normal; Font-type: normal; } H1, H2, H3 {color: # 5E5E5E; } H2 {font: 1em Arial, Helvetica, Sense-Serif; Font-size: 11px; } H3 {font-size: large; Color: # F00; } P, Blockco, UL, OL {margin-down: 1.4 AM; Line-height: 1.8 m; Text align: heir; } P {} BLOCKQUOTE {margin-left: 2em; Margin-right: 2 AM; Font style: italic; } UL [/ * [Empty] margin-left:; *}} Ul li {} OL {/ * [empty] margin-left:; * OLE LAY {} A {TEXT-DECORATION: NONE; Color: # 5E5E5E; } A: hinge {text-decoration: underline; } / * Boxing style * /. Boxed {margin-bottom: 20px; } .Boxed. Content {Padding: 15px; Margin-left: -11px; } / * Post * / .post {/ * [Empty] margin:; * /}. Post. Title {Padding: 10px 0; Font size: 1.6 AM; Font weight: normal; } .post .story {padding: 10px; Margin-left: -7 pixels; Margin-top: 5px; } / * Header * / #header {height: 61px; Width: 1000 pixels; Margin-left: auto; Margin-right: auto; } / * Header & gt; Logo * / #logo {width: 700px; Height: 19px; Margin: 0 auto; Padding: 6px 0; } #lollow h1, #lollow h2 {text-conversion: uppercase; Letter-spacing: 1px; Font-size: 11px; } #lollow h1 float: left; } #lollow h2 {float: right; } # Logo a {} / * header & gt; Menu * / # Menus {Width: 1100px; Height: 27px; } # Menu UL {/ * [empty] margin-left:; * / Padding: 7px 0 0; List style: none; } #Menu LI {DISPLAY: INLINE; } #Menu A {Display: Block; Swim left; Height: 30px; Margin: 0 2px 0 0; Padding: 2px 25px 0; Background: URL (#FFFFF) Repeat-X; Border: 1px solid # 014995; Text align: center; Font-size: 11px; font-weight: bold; Color: # 01499 5; } #Menu A: Hover {background-image: URL (image / 13.jipi); Text-decoration: None; Color: # E5E5E5; } # Menus Active A {Background-Image: URL (Picture / 12.JPG); } / * Wrapper & gt; Font * / #fonts {font-family: "Arial Black", gadget, non-serif; Color: # 5E5E5E; } / * Center wrap * / #wrapper {width: 1000px; Margin-left: auto; Margin-right: auto; } / * Content * / # content {width: 60px; Padding: 50px 0; } # Log INPUT {margin-down: 5px; Padding: 2px 5px; Border: 1px solid # 385b88; Font-family: Verdun, Ariel, Helvetica, Non-Serif; } #InputText1, #InputText2, #InputText3 {Color: # 014995; } #InputSubmit1 {background: # 385B88; Color: #FFFFFF; }    

Given that this design is not completely liquid or responsive, it is a lot Easy fix is ​​just "margin-right: -10px;" On the style rule for the # add menu, this will move the menu to the location where it should start.

In other words:

  # menu (margin-right: -10px;}    

No comments:

Post a Comment