مشکل قالب در اندازه و مشکل با اینترنت اکسپلورر؟

[armintirand]

سلام من توی طراحی این سایت با اینترنت اکسپلورر ۶ مشکل دارم ابتدا با فایرفاکس به سایت نگاه کنید بعد با اینترنت اکسپلوررنگاه کنید همونطور که میبینید منوها قاطی شد.در ضمن مشکل دیگه ای هم که بود این بود که اندازه طول صفحه بیشتر از اندازه مانیتور میشد و اسکرول باز نشون میداد که مجبور شدم از دستور
overflow-x:hidden
در css برای تگ body استفاده کنم البته این مشکل با هر دو مرورگر ایجاد میشه ولی مشکل اول فقط با اینترنت اکسپلورر است.
با توجه به کدی که فکر کنم استاندارد باشه باید مشکل کمتری داشته باشم. اگه ممکنه بدون استفاده از جاوااسکریپت در حل مشکلم کمک کنید.
راستی از کجا میتونم مقادیر پیش فرض برای css توی مرورگرهایی مثل فایرفاکس و اینترنت اکسپلورر رو پیدا کنم تا با ساختن css reset مخصوص قالب خودم مشکلات احتمالی رو برطرف کنم.
www.x0x.ir
ممنون

[armintirand]

مشکل منو هم با دادن اندازه واقعی حل میشه ولی من میخام همه اندازه ها رو به درصد بدم تا در مانیتورهای مختلف با تغییر اندازه مانیتور سایتم به یک قالب خیلی کوچیک تبدیل نشه یا خیلی بزرگتر از صفحه مانیتور نشه یعنی همون مشکل دومم پیش نیاد.من توی این خط اگه اینجوری بذارم
#button{width:500px;margin:2px 50%;position:relative;left:-150px}
مشکلی ندارم ولی اگه اینجوری بذارم
#button{width:100%;margin:2px 50%;position:relative;left:-150px}
منو قاطی میشه.

[pirmard66]

سلام دوست عزیز....

برای حل مشکل منو:

div #button رو در یک div دیگه قرار بده،به اون div یک class بده و width:100% قرار بده.

حال به div #button یک float:left بده و با margin-left منوی خودت رو بیار وسط....

این راه رو تست کن..نتیجه رو اعلام کن!

Good Luck

[armintirand]

تقریبا با دستوراتی که شما فرمودین مشکل منو حل شد ولی میشه یکم بیشتر توضیح بدین که این کدها چیکار میکنن؟
در مورد مقادیر پیشفرض css در مرورگرهای فایرفاکس و اینترنت اکسپلورر مرجعی میشناسید تا بتونم در مواقع لزوم css reset بسازم

[pirmard66]

اینو یه نگاه بنداز شاید به دردت بخوره!:

کار روی پروژه یکم وقتمو گرفته!



/*! normalize.css v1.0.0 | MIT License | git.io/normalize */

/* ================================================== ========================
HTML5 display definitions
================================================== ======================== */

/*
* Corrects `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}

/*
* Corrects `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/

audio,
canvas,
video {
display: inline-block;
*display: inline;
*zoom: 1;
}

/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/

audio:not([controls]) {
display: none;
height: 0;
}

/*
* Addresses styling for `hidden` attribute not present in IE 7/8/9, Firefox 3,
* and Safari 4.
* Known issue: no IE 6 support.
*/

[hidden] {
display: none;
}

/* ================================================== ========================
Base
================================================== ======================== */

/*
* 1. Corrects text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/

html {
font-size: 100%; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
-ms-text-size-adjust: 100%; /* 2 */
}

/*
* Addresses `font-family` inconsistency between `textarea` and other form
* elements.
*/

html,
button,
input,
select,
textarea {
font-family: sans-serif;
}

/*
* Addresses margins handled incorrectly in IE 6/7.
*/

body {
margin: 0;
}

/* ================================================== ========================
Links
================================================== ======================== */

/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/

a:focus {
outline: thin dotted;
}

/*
* Improves readability when focused and also mouse hovered in all browsers.
*/

a:active,
a:hover {
outline: 0;
}

/* ================================================== ========================
Typography
================================================== ======================== */

/*
* Addresses font sizes and margins set differently in IE 6/7.
* Addresses font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/

h1 {
font-size: 2em;
margin: 0.67em 0;
}

h2 {
font-size: 1.5em;
margin: 0.83em 0;
}

h3 {
font-size: 1.17em;
margin: 1em 0;
}

h4 {
font-size: 1em;
margin: 1.33em 0;
}

h5 {
font-size: 0.83em;
margin: 1.67em 0;
}

h6 {
font-size: 0.75em;
margin: 2.33em 0;
}

/*
* Addresses styling not present in IE 7/8/9, Safari 5, and Chrome.
*/

abbr[title] {
border-bottom: 1px dotted;
}

/*
* Addresses style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/

b,
strong {
font-weight: bold;
}

blockquote {
margin: 1em 40px;
}

/*
* Addresses styling not present in Safari 5 and Chrome.
*/

dfn {
font-style: italic;
}

/*
* Addresses styling not present in IE 6/7/8/9.
*/

mark {
background: #ff0;
color: #000;
}

/*
* Addresses margins set differently in IE 6/7.
*/

p,
pre {
margin: 1em 0;
}

/*
* Corrects font family set oddly in IE 6, Safari 4/5, and Chrome.
*/

code,
kbd,
pre,
samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em;
}

/*
* Improves readability of pre-formatted text in all browsers.
*/

pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}

/*
* Addresses CSS quotes not supported in IE 6/7.
*/

q {
quotes: none;
}

/*
* Addresses `quotes` property not supported in Safari 4.
*/

q:before,
q:after {
content: '';
content: none;
}

small {
font-size: 75%;
}

/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/

sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}

sup {
top: -0.5em;
}

sub {
bottom: -0.25em;
}

/* ================================================== ========================
Lists
================================================== ======================== */

/*
* Addresses margins set differently in IE 6/7.
*/

dl,
menu,
ol,
ul {
margin: 1em 0;
}

dd {
margin: 0 0 0 40px;
}

/*
* Addresses paddings set differently in IE 6/7.
*/

menu,
ol,
ul {
padding: 0 0 0 40px;
}

/*
* Corrects list images handled incorrectly in IE 7.
*/

nav ul,
nav ol {
list-style: none;
list-style-image: none;
}

/* ================================================== ========================
Embedded content
================================================== ======================== */

/*
* 1. Removes border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improves image quality when scaled in IE 7.
*/

img {
border: 0; /* 1 */
-ms-interpolation-mode: bicubic; /* 2 */
}

/*
* Corrects overflow displayed oddly in IE 9.
*/

svg:not(:root) {
overflow: hidden;
}

/* ================================================== ========================
Figures
================================================== ======================== */

/*
* Addresses margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/

figure {
margin: 0;
}

/* ================================================== ========================
Forms
================================================== ======================== */

/*
* Corrects margin displayed oddly in IE 6/7.
*/

form {
margin: 0;
}

/*
* Define consistent border, margin, and padding.
*/

fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}

/*
* 1. Corrects color not being inherited in IE 6/7/8/9.
* 2. Corrects text not wrapping in Firefox 3.
* 3. Corrects alignment displayed oddly in IE 6/7.
*/

legend {
border: 0; /* 1 */
padding: 0;
white-space: normal; /* 2 */
*margin-left: -7px; /* 3 */
}

/*
* 1. Corrects font size not being inherited in all browsers.
* 2. Addresses margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improves appearance and consistency in all browsers.
*/

button,
input,
select,
textarea {
font-size: 100%; /* 1 */
margin: 0; /* 2 */
vertical-align: baseline; /* 3 */
*vertical-align: middle; /* 3 */
}

/*
* Addresses Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/

button,
input {
line-height: normal;
}

/*
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Corrects inability to style clickable `input` types in iOS.
* 3. Improves usability and consistency of cursor style between image-type
* `input` and others.
* 4. Removes inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
*overflow: visible; /* 4 */
}

/*
* Re-set default cursor for disabled elements.
*/

button[disabled],
input[disabled] {
cursor: default;
}

/*
* 1. Addresses box sizing set to content-box in IE 8/9.
* 2. Removes excess padding in IE 8/9.
* 3. Removes excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/

input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
*height: 13px; /* 3 */
*width: 13px; /* 3 */
}

/*
* 1. Addresses `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Addresses `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/

input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}

/*
* Removes inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}

/*
* Removes inner padding and border in Firefox 3+.
*/

button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}

/*
* 1. Removes default vertical scrollbar in IE 6/7/8/9.
* 2. Improves readability and alignment in all browsers.
*/

textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}

/* ================================================== ========================
Tables
================================================== ======================== */

/*
* Remove most spacing between table cells.
*/

table {
border-collapse: collapse;
border-spacing: 0;
}

[armintirand]

کاش یک کد کوتاه تر مینوشتی اینا آدمو پیر میکنه.
ممنون وقت کردم نگته میکنم. اینی که نوشتی برای کدوم سوالمه؟

[pirmard66]

این کد تا حدودی کامل توضیح داده درباره Css پیشفرض ie ( اینترنت اکسپلورر):گیج:

یه فایل CSS هستش!!! چیز خاصی نیست دادا


Good Luck

[armintirand]

آره درست میفرمایید متوجه نشده بودم ممنون
اگه ممکنه الان یک نگاهی به سایتی که بالا معرفی کردم بندازید ابتدا منو به سمت چپ میرود سپس که موس رو به سمتش میبریم میاد وسط جای درستش قرار میگیره اینو چجوری حلش کنم؟

[pirmard66]

آره درست میفرمایید متوجه نشده بودم ممنون
اگه ممکنه الان یک نگاهی به سایتی که بالا معرفی کردم بندازید ابتدا منو به سمت چپ میرود سپس که موس رو به سمتش میبریم میاد وسط جای درستش قرار میگیره اینو چجوری حلش کنم؟

الان ایراد نداره!!!

منو ثابت و محکم سر جاش ایستاده!:متفکر:

[armintirand]

ای وای ببخشید یادم رفت بگم این مشکل با اینترنت اکسپلورر ایجاد میشه.(منوهاش تغییرمکان میدن)
یک سوال دیگه هم دارم اینترنت اکسپلورر نسخه ۷ استانداردهاش بیشتر مشابه نسخه ۶ هست یا ۸ ؟

[pirmard66]

من نسخه 7 رو دارم و مشکلی در منو مشاهده نکردم..

چیزی که مشخصه بالارفتن ورژن، استاندارد های جدیدی رو به همراه دارد...! پس فکر کنم ورژن 7 نزدیکتره به استانداردهای 6!!!!:لبخند: اتم شکافتم!

[armintirand]

اگه توی فایل htm رو نگاه کنید اولش ۲ تا دستور گذاشتم که کامنت برای اینترنت اکسپلورر ۶ و نسخه ۸ هست ولی برای ۷ چیزی نذاشتم جالبه که توی ۷ بدون کدهای لازمه درست کارمیکنه و توی ۶ و ۸ بدون اون کدها درست نیست و بعد از گداشتن اون کدها هم به صورت تغییر مکان بعد از بردن ماوس روی اون درست میشه.واقعا این اینترنت اکسپلورر جزو عجایب ۸۲۴ گانه دنیا حساب میشه:لبخند:
ممنون

[foumanvilla]

سلام
من یه قالب طراحی کردم
با فایرفاکس مشکلی نداره
ولی با ie7 مشکل کوچیکی داره
اونم اینه که منوی من تو فایرفاکس سر جاشه ولی با Ie7 میاد کنار دایو پایینیش شناور میشه
چیکار کنم که بتونم نشون بدم بهتون؟
توضیحات:
از راست بالای سایت دو تا متن نوشتم دایو دادم بهشون و فلوت از راست.
بعد پایینش یه منو که فلوتش راسته
بعدش پایینش 4تا باکس گذاشتم
حالا تو ie7 این دایو منو میاد سمت چپ باکس سوم قرار میگیره.خیلی عجیبه
چیکار کنم؟

[pirmard66]

سلام
من یه قالب طراحی کردم
با فایرفاکس مشکلی نداره
ولی با ie7 مشکل کوچیکی داره
اونم اینه که منوی من تو فایرفاکس سر جاشه ولی با Ie7 میاد کنار دایو پایینیش شناور میشه
چیکار کنم که بتونم نشون بدم بهتون؟
توضیحات:
از راست بالای سایت دو تا متن نوشتم دایو دادم بهشون و فلوت از راست.
بعد پایینش یه منو که فلوتش راسته
بعدش پایینش 4تا باکس گذاشتم
حالا تو ie7 این دایو منو میاد سمت چپ باکس سوم قرار میگیره.خیلی عجیبه
چیکار کنم؟

سلام دوست من..

اگه میتونی قالبت رو روی یه آدرس بزار تا بتونیم ببینیم...

از توضیحات نمیشه مشکل رو رفع کرد

[foumanvilla]

سلام دوست من..

اگه میتونی قالبت رو روی یه آدرس بزار تا بتونیم ببینیم...

از توضیحات نمیشه مشکل رو رفع کرد
سلام
تو قالب یه <!-- باز کردم گفتم اگه ie بود مرجینش اینه و به راحتی حل شد.
البته هنوز طراحی مونده و اگه مشکلی داشتم حتما ازتون می پرسم
مرسی از پاسختون

[foumanvilla]

الان یه سوال جدید واسم پیش اومده که اگه جوابشو نمیتونید بدید حداقلش یه لینک معرفی کنید.
میخوام که هدر سایتم چون ثابت هستش (فکر کنم با کد جاوا اسکریپت) کاری کنم که تو گشت و گذار کاربران تو صفحات سایت، دیگه هدر و اسلایدر موجود در اون همش لود نشه.فقط کانتنت یا محتوا لود بشه.