세로 Spry 메뉴 모음 - 너비가 IE

Question

저는 Dreamweaver의 웹 사이트에서 일하고 있으며 웹 디자인의 일부 측면에서는 초보자입니다.

정상적인 인터넷 익스플로러를 제외하고 대부분의 브라우저에서 정상적으로 작동하는 내 페이지 왼쪽에 세로 형 Spry Menu Bar가 있습니다. 대부분의 브라우저에서 메뉴 막대의 항목은 메뉴 막대의 너비에 맞지만 Internet Explorer에서는 항목이 포함 된 단어의 크기까지 잘립니다. 어떤 경우에는 두 줄의 메뉴 항목이 같은 줄에 표시되도록 트리밍됩니다. 동일한 문제가 하위 메뉴에서도 발생합니다.

여기에 사이트가 있습니다 : http://www.lakeathleticboosterclub.com/ 문제를 잘 설명하지 못했을 경우를 대비하여 테스트 해 보겠습니다. 여기에 제가 작업하고있는 CSS가 있습니다.

@charset "UTF-8"; 

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */ 

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */ 

/******************************************************************************* 

LAYOUT INFORMATION: describes box model, positioning, z-order 

*******************************************************************************/ 

/* The outermost container of the Menu Bar, a fixed width box with no margin 
or padding */ 
ul.MenuBarVertical 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-size: 100%; 
    cursor: default; 
    width: auto; 
} 
/* Set the active Menu Bar with this class, currently setting z-index to 
accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html 
*/ 
ul.MenuBarActive 
{ 
z-index: 1000; 
} 
/* Menu item containers, position children relative to this container and are 
same fixed width as parent */ 
ul.MenuBarVertical li 
{ 
margin: 0; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: relative; 
text-align: left; 
cursor: pointer; 
width: auto; 
} 
/* Submenus should appear slightly overlapping to the right (95%) and 
up (-5%) with a higher z-index, but they are initially off the left side 
of the screen (-1000em) */ 
ul.MenuBarVertical ul 
{ 
margin: -5% 0 0 95%; 
padding: 0; 
list-style-type: none; 
font-size: 100%; 
position: absolute; 
z-index: 1020; 
cursor: default; 
left: -1000em; 
top: 0; 
width: auto; 
} 
/* Submenu that is showing with class designation MenuBarSubmenuVisible, 
we set left to 0 so it comes onto the screen */ 
ul.MenuBarVertical ul.MenuBarSubmenuVisible 
{ 
left: 0; 
} 
/* Menu item containers are same fixed width as parent */ 
ul.MenuBarVertical ul li 
{ 
} 

/******************************************************************************* 

DESIGN INFORMATION: describes color scheme, borders, fonts 

*******************************************************************************/ 

/* Outermost menu container has borders on all sides */ 
ul.MenuBarVertical 
{ 
border: 1px solid #CCC; 
} 
/* Submenu containers have borders on all sides */ 
ul.MenuBarVertical ul 
{ 
border: 1px solid #CCC; 
} 
/* Menu items are a light gray block with padding and no text decoration */ 
ul.MenuBarVertical a 
{ 
display: block; 
cursor: pointer; 
background-color: #EEE; 
padding: 0.5em 0.75em; 
color: #333; 
text-decoration: none; 
} 
/* Menu items that have mouse over or focus have a blue background and white text */ 
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus 
{ 
background-color: #33C; 
color: #FFF; 
} 
/* Menu items that are open with submenus are set to MenuBarItemHover 
with a blue background and white text */ 
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible 
{ 
background-color: #33C; 
color: #FFF; 
} 

/******************************************************************************* 

SUBMENU INDICATION: styles if there is a submenu under a given menu item 

*******************************************************************************/ 

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu 
and are set to use a background image positioned on the far left (95%) and 
centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenu 
{ 
background-image: url(SpryMenuBarRight.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 

/* Menu items that are open with submenus have the class designation 
MenuBarItemSubmenuHover and are set to use a "hover" background image 
positioned on the far left (95%) and centered vertically (50%) */ 
ul.MenuBarVertical a.MenuBarItemSubmenuHover 
{ 
background-image: url(SpryMenuBarRightHover.gif); 
background-repeat: no-repeat; 
background-position: 95% 50%; 
} 

/******************************************************************************* 

BROWSER HACKS: the hacks below should not be changed unless you are an expert 

*******************************************************************************/ 

/* HACK FOR IE: to make sure the sub menus show above form controls, we 
underlay each submenu with an iframe */ 
ul.MenuBarVertical iframe 
{ 
position: absolute; 
z-index: 1010; 
filter:alpha(opacity:0.1); 
} 
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is 
to keep IE 5.0 from parsing */ 
@media screen, projection 
{ 
ul.MenuBarVertical li.MenuBarItemIE 
{ 
    display: inline; 
    f\loat: left; 
    background: #FFF; 
} 
} 

모든 도움을 주시면 감사하겠습니다.

Answer 1

좋아, 당신은 그것의 컨테이너 채울 폭 가지고 ul.MenuBarVertical을 설정해야 할 것 같다 그러나

ul.MenuBarVertical 
{ 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    font-size: 100%; 
    cursor: default; 
    width: 100%; 
} 

는, 사이드 바는 이제 하나 그래서 폭이 없습니다 우리는 추가해야합니다

를

.content { 
    padding: 10px 0; 
    width: 790px; <-- Explicit width 
    float: right; <-- Should make things a little more predictable 
} 

때문에에게이 ACTU하지 않습니다 우리는이 변화 할 때까지 모든 것을 망치는 것

.sidebar1 { 
    float: left; 
    width: 218px; <-- This is changed 
    background: #151B8D; 
    padding-bottom: 10px; 
    color: #fff; 
} 

그리고 명시 적으로 너비가 있으며 사이드 바의 렌더링 된 크기는 브라우저가 모든 크기를 결정하는 방법에 전적으로 달려 있습니다. IE에서는 잘 작동하지 않습니다. 이 방법을 사용하면 트릭을해야합니다!

추가 표시 :

또한, 후손을 위해, 여기 내 댓글에서 원래 수정입니다 블록; 심지어 폭 : ul.MenuBarVertical 리튬 {...}

이 주요 컨테이너에 이상한 동작이 발생하는 경우, 그것은 가능성 100 % 인해 수레를 사용에서 발생하는 내용 포장 문제. .container에`overflow : hidden '을 설정하면이 문제를 해결할 수 있습니다. Internet Explorer를 포함한 브라우저를 트리거하여 부유하는 콘텐츠의 크기를 인식하고 이에 따라 랩핑합니다.

희망이 도움이됩니다. 이것 이후에도 문제가 해결되지 않으면 알려주십시오. 문제를 판단 할 수 있는지 알 수 있습니다.