مشکل با css در Firefox و ie

[ALI4GHA]

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

1. قسمتی از محتویات فایل css من به صورت زیره :

#main {
border:1px solid #1D1D1D;
width: 530;
background-color:#000000
}

#block {
background-position: left center;
width: 180;
text-align:justify;
line-height:147%;
padding-left:10px;
background-image:url('http://localhost/cutflower/images/main-line.gif');
background-repeat:repeat-y;
direction:rtl;
margin-right:10;
margin-top:10;
margin-bottom:10; float:right
}

#news-main {
margin:10;
width: 310;
direction:rtl;
text-align:justify;
line-height:147%; float:right

}
​

و من در فایل اصلی دارم :

<div id="main">

<div id="block">مطالب و تصاویر</div>
<div id="news-main">مطالب و تصاویر</div>

</div>
​

حال وقتی این فایل را در فایرفاکس اجرا می کنم قسمت main به درستی نمایش داده نمی شه اگه بخوام توضیح بیشتری بدم چون من برای اون height مشخص نکردم فایرفاکس ارتفاع را برابر صفر قرار می ده ولی این مشکل در ie یا opera وجود نداره
ضمنا جون ارتفاع این قسمت متغیره من نمی تونم یک ارتفاع معین براش بگذارم

2. در قسمت دیگری از style این کدها را دارم :

#image {
padding: 4px;
border: 1px solid #1D1D1D
}

#image:hover {
background-color:#FFCC33
}
​

و در فایل اصلی دارم :

<a href="http://localhost/"><img id="image" src="innews-fa.gif"></a>
​

یعنی اینکه می خوام دور تصویرم یدونه کادر بکشه و وقتی موس روی اون قرار داده میشه رنگ بک گراندش عوض بشه این کار در opera و firefox به خوبی انجام میشه ولی در ie نه

مشکل کجاست؟
منتظر راهنمایی های شما هستم
چشم به راهم نگذارید.

 

[mohsenshahab]

سوال اولت رو نخوندم اما در مورد سوال دوم
ie با کلاس کاذب hover مشکل داره.
برای حل این مشکل من از روشی که اقای peter nederlof ابداع کرده استفاده میکنم
شما این فایل رو در همون مسیر فایلهات بذار البته با ÷سوند htc

<attach event="ondocumentready" handler="parseStylesheets" />
<script>


var csshoverReg = /(^|\s)((([^a]([^ ]+)?)|(a([^#.][^ ]+)+)):(hover|active))|((a|input|textarea)([#.][^ ]+)?:unknown)/i,
currentSheet, doc = window.document, hoverEvents = [], activators = {
	onhover:{on:'onmouseover', off:'onmouseout'},
	onactive:{on:'onmousedown', off:'onmouseup'},
	onunknown:{on:'onfocus', off:'onblur'}
}

function parseStylesheets() {
	if(!/MSIE (5|6)/.test(navigator.userAgent)) return;
	window.attachEvent('onunload', unhookHoverEvents);
	var sheets = doc.styleSheets, l = sheets.length;
	for(var i=0; i<l; i++) 
		parseStylesheet(sheets[i]);
}
	function parseStylesheet(sheet) {
		if(sheet.imports) {
			try {
				var imports = sheet.imports, l = imports.length;
				for(var i=0; i<l; i++) parseStylesheet(sheet.imports[i]);
			} catch(securityException){}
		}

		try {
			var rules = (currentSheet = sheet).rules, l = rules.length;
			for(var j=0; j<l; j++) parseCSSRule(rules[j]);
		} catch(securityException){}
	}

	function parseCSSRule(rule) {
		var select = rule.selectorText, style = rule.style.cssText;
		if(!csshoverReg.test(select) || !style) return;
		
		var pseudo = select.replace(/[^:]+:([a-z-]+).*/i, 'on$1');
		var newSelect = select.replace(/(\.([a-z0-9_-]+):[a-z]+)|(:[a-z]+)/gi, '.$2' + pseudo);
		var className = (/\.([a-z0-9_-]*on(hover|active|unknown))/i).exec(newSelect)[1];
		var affected = select.replace(/:(hover|active|unknown).*$/, '');
		var elements = getElementsBySelect(affected);
		if(elements.length == 0) return;

		currentSheet.addRule(newSelect, style);
		for(var i=0; i<elements.length; i++)
			new HoverElement(elements[i], className, activators[pseudo]);
	}

function HoverElement(node, className, events) {
	if(!node.hovers) node.hovers = {};
	if(node.hovers[className]) return;
	node.hovers[className] = true;
	hookHoverEvent(node, events.on, function() { node.className += ' ' + className; });
	hookHoverEvent(node, events.off, function() { node.className = node.className.replace(new RegExp('\\s+'+className, 'g'),''); });
}
	function hookHoverEvent(node, type, handler) {
		node.attachEvent(type, handler);
		hoverEvents[hoverEvents.length] = { 
			node:node, type:type, handler:handler 
		};
	}

	function unhookHoverEvents() {
		for(var e,i=0; i<hoverEvents.length; i++) {
			e = hoverEvents[i]; 
			e.node.detachEvent(e.type, e.handler);
		}
	}

function getElementsBySelect(rule) {
	var parts, nodes = [doc];
	parts = rule.split(' ');
	for(var i=0; i<parts.length; i++) {
		nodes = getSelectedNodes(parts[i], nodes);
	}	return nodes;
}
	function getSelectedNodes(select, elements) {
		var result, node, nodes = [];
		var identify = (/\#([a-z0-9_-]+)/i).exec(select);
		if(identify) {
			var element = doc.getElementById(identify[1]);
			return element? [element]:nodes;
		}
		
		var classname = (/\.([a-z0-9_-]+)/i).exec(select);
		var tagName = select.replace(/(\.|\#|\:)[a-z0-9_-]+/i, '');
		var classReg = classname? new RegExp('\\b' + classname[1] + '\\b'):false;
		for(var i=0; i<elements.length; i++) {
			result = tagName? elements[i].all.tags(tagName):elements[i].all; 
			for(var j=0; j<result.length; j++) {
				node = result[j];
				if(classReg && !classReg.test(node.className)) continue;
				nodes[nodes.length] = node;
			}
		}	
		
		return nodes;
	}
</script>

htc
حالا باید این تکه را به تگ body خودتون اضافه کنین

behavior:url("x.htc")

 

[honeyman]

واسه مشکل اولیتون مقدار height رو auto قرار بدین ببینین مشکلتون حل میشه یا نه

 

[ALI4GHA]

آقا ممنون

دوست عزیز mohsenshahab من کاری که شما گفته بودی را انجام دادم مشکلم حل نشد

در مورد راهنمایی honeyman جان هم هنوز امتحان نکردم انشاله که جواب بده

بازم ممنون

 

[ALI4GHA]

بازم نشد

واسه مشکل اولیتون مقدار height رو auto قرار بدین ببینین مشکلتون حل میشه یا نه

honeyman جان امتحان کردم جواب نداد
من که پاک گیج شدم و نمی دونم مشکل کجاست!

 

[honeyman]

میتونی کل سورس قالب Css تون رو بذارید؟ آخه من همیشه برعکسش برام پیش اومده که Ie بر عکس فایرفوکس اذیت میکنه. شاید حسابش دستمون اومد.

 

[ALI4GHA]

مشکلم حل شد

 

[Mahdi_20]

خوب بگو چطور حل شد، شاید به درد ما هم بخوره..ای بابا