2008-10-27 4 views
4

나는 웹 페이지에서 작업하고 있습니다. 이미지를 사용하여 디자인 한 후 테이블이 아닌 적절한 CSS 레이아웃을 사용하려고 시도한 것은 이번이 처음입니다.CSS 소스의 출처를 확인하는 가장 좋은 방법은 무엇입니까

http://www.roccocammisola.com/proj/brunel/bgimage.html

나는 주요 내용 영역의 양쪽에있는 그림자에 문제가되고있다. 물론 이것들은 IE에서만 문제가됩니다. 보시다시피 그림자는 실제 높이의 약 10 %로 줄어 들었습니다.

저의 상대적 경험이 없으므로이 문제와 관련된 수정 방법을 어떻게 찾습니까?

도움이 될 것입니다.

답변

7

FireBug은 CSS 디버깅에 가장 중요한 도구입니다. 이 특별한 경우

지르고

에 대한

+0

그는 자신의 문제가 IE에만 ​​있다고 말했므로 어떻게 도움이 될까요? – BoltBait

+0

도 FF로 보이는 것 때문에 문제입니다. – dove

+0

아니요, IE7에서는 FF를 올바르게 표시합니다. IE6는 범인입니다. –

1

+1

get it here

, 나는 당신의 그림자에 대한 새로운 접근 방식을 제안 것입니다. 현재 아이템이 있습니다. 일반적으로 CSS 배경 이미지를이 용도로 사용하려고합니다.

.mainShadowRight { 
*/ your other stuff */ 
url('images/mainShadowRight.gif'); 
} 
7

IE Web Developer Toolbar 은 일반적으로 불을 지르고만큼 좋지 않아,하지만 당신은 IE의 특정 문제가있을 때 도움이됩니다.

1

귀하의 .mainShadowRight의 CSS 클래스는 분 높이 지정 (IE6 이해하지 않고, IE7은 항상 100 % 정확하게 얻을 않습니다)

및 DLarsen가 지적했듯이, 당신이 배경을 누락이 나타납니다 -image : url(); 비트.

2

Firebug 외에도 HTML이 유효한지 확인하는 것은 매우 중요한 도구이며 CSS 두통을 최소화 할 수 있습니다. 때때로 HTML에 실수가 있기 때문에 CSS가 제대로 작동하지 않을 수 있습니다. 다른 브라우저에는 부적절하게 작성된 HTML을 다루는 여러 가지 방법이 있습니다. 때때로 브라우저 간 CSS 문제가있는 것처럼 보일 수 있습니다. 유효성 검사기는 마크 업에서 실수를 찾도록 도와줍니다.

http://validator.w3.org/

0

모든 답변 주셔서 감사합니다, 트릭을 할 것으로 보인다.

내가 definitley가 bg 이미지 물건을 거기에서 가져야했던 것에 따라 나는 업로딩과 함께 밖으로 spazz했다라고 생각한다.

IE 용 웹 개발자 도구 모음이 FF 용 방화 광 및 웹 개발자 모음이기 때문에 꽤 좋아 보인다.

0

디버깅을위한 또 다른 권장 사항은 CSS - CSS Viewer입니다.

웹 페이지의 요소 위로 마우스를 가져 가서 정확한 스타일을 볼 수있는 Firefox 부가 기능입니다. 스타일의 상속으로 인해 최종 스타일이 의도 한 바가 아님을 종종 알 수 있습니다.