2008-11-10 4 views
1

새로 디자인 된 website의 CSS 및/또는 테이블에 몇 가지 문제가 있습니다. 잘 알려진 "100 % div height"-issue 때문에 테이블을 웹 사이트의 구조 요소로 사용했습니다. 그래서 다음과 같은 :MAC에서 CSS/표 문제 발생

HTML 마크 업 :

<div id="header">...</div> 
    <table> 
    <tr> 
    <td><div id="main">...</div></td> 
    <td class="crighttd"><div id="cright">...</div></td> 
    </tr> 
</table> 
<div id="footer">...</div> 

및 해당 CSS

table { 
    border-top: 1px solid #6A6A6A; 
    padding: 0; 
    margin-top: 20px; 
    border-spacing: 0 
} 

td { 
    vertical-align: top; 
    padding:0; 
    margin:0 
} 

.crighttd { 
    background: #4F4F4F; 
    vertical-align:top; 
    margin: 0 
} 

#cright { 
    width: 185px; 
    float: right; 
    background: #4F4F4F; 
    height: 100%; 
    line-height: 1.2em; 
    margin: 0; 
    padding: 25px 0 25px 20px; 
} 

여기서의 문제는 분명히 오른쪽에있는 TD 전혀 특정 브라우저에서 표시되지 않을 것입니다 (Mac의 경우뿐만 아니라 IE의 오래된 인스턴스에서도이 기능을 보았습니다). CSS 문제입니까, 아니면 테이블에있는 것입니까?

+0

"호환성"으로 태그 변경하는 것을 고려하십시오. – Henning

답변

0

문제 해결을 위해 일반적으로 내 div와 다른 요소에 테두리를 지정하여 페이지의 위치를 ​​시각적으로 볼 수 있습니다.

border: 1px solid red; 

나는 당신의 td가 표시되지 않고 그 내부에있는 div라는 의심을 가지고 있습니다. CSS의 표시 속성을 설정해보십시오.

position: relative; 

#cright 스타일에서 float 속성을 제거해보세요.

이러한 내용이 반드시 문제를 해결하는 것은 아니지만 문제를 해결하는 방법에 대한 제안 일뿐입니다. 귀하의 페이지의 전체 레이아웃을 보지 않고 실제로 문제를 해결하기가 어렵습니다.

+0

"display : relative"란 무엇입니까? – eyelidlessness

7
때문에 잘 알려진 "100 % div의 높이"-issue의

...

을하고있는 사람은 그 것입니까? 해결 된 사람 here? 기본적으로, 중요한 부분이 해결 방법으로

html, body { 
    height: 100%; 
} 

표가되어있는 내가 아는 한, 그들은 높이와 관련된 유사한 문제가 있기 때문에 여기에없는 이동합니다.

1

레이아웃을위한 테이블에 의지 할 필요없이 CSS 위치 지정 및 레이아웃만으로 완벽하게 구현할 수 있습니다.

표가 어쨌든 작동하지 않는 것처럼 들리므로 순수한 CSS 레이아웃으로 이동하면 솔루션을 찾을 수있을뿐만 아니라 표준을 준수하는 사이트가 더 적합 해집니다. 앞으로 유지 관리 및 변경이 더 쉬울 것입니다.

상당히 간단한 고정 폭, 가운데 맞춤, 2 열 레이아웃을 목표로합니다. Google에서 '2 열 CSS 레이아웃'을 신속하게 검색하면이를 달성하는 데 사용할 수있는 방법에 대한 많은 예제와 자습서가 제공됩니다.