Learn VBA & Macros in 1 Week!

CSS - Ie 8 Not Recognizing My Backgroun Url

Full Excel VBA Course - Beginner to Expert

Ie 8 Not Recognizing My Backgroun Url	View Content

Hi all:

I remember when IE was the more forgiving browser, but these days it's really killing me.
I am developing a site
dubdubdub. fastrackservices org slash index_test.html
It looks fine on Chrome, FF and IE 9, but on IE8 ( I won't even look at 7) My background image is not being recognized

body { background:url(/images/med_bgrd.gif)top center repeat-y #bfbfbf;
font-family:arial, verdana;
font-size:12px;
}

Any ideas?

Thanks,

Full Excel VBA Course - Beginner to Expert

Ie 6 Not Recognizing Element Bounds

Similar Tutorials

View Content

I have a <div> that will eventually be draggable. The javascript I'm using to achieve this allows you to specify the ID of an element that will serve as the area from which you can drag the parent <div>. In my case, I am creating a pseudo popup window and want for it to be draggable by its title bar.

I'm assuming that the jacascript watches for the mousedown event to be fired while the mouse is within the the specified element's bounds (either by calculating dimensions or using the mouseover event).

For some reason, IE is not properly detecting that the mouse is within the bounds of any elements within the parent <div>. The only exception being when the mouse is directly over actual content (not empty space) within that element. What's even weirder is that it seems to be detecting when the mouse is from just above the top edge of the element to about 20px above the top edge.

Run the code below in IE and mouse over the empty space to the right of both lines of text - then between 1 and ~20px above the empty space for both.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
body	{
	margin: 0;
}

#cFiveDlrWin	{
	width: 400px;
	height: 225px;
	background: #0f0;
	position: absolute;
	top: 25px;
	left: 20px;
	/*
	text-align: left;
	*/
}

#cFiveDlrWin h3	{
	background: #f00;
	cursor: move;
	padding: 3px 5px;
	margin: 5px;
	margin-top: 25px;
	/*
	*/
}

#cFiveDlrWin p#helpTxt	{
	cursor: help;
	margin: 10px;
	border: 1px solid #00c;
	margin-top: 25px;
}


#cFiveDlrWin a	{
	display: block;
	cursor: crosshair;
	padding: 5px;
	margin: 20px;
	margin-top: 25px;
	border: 1px solid #00c;
	text-decoration: none;
}

#cFiveDlrWin a:hover	{
	text-decoration: underline;
}

</style>
<script type="text/javascript">
<!--
function initPage(bool)
{
	if(bool)
	{
		var oHandle = document.getElementById('titleBar');
		var oHelpTxt = document.getElementById('helpTxt');
		oHandle.onmouseover = function() {
			alert('in title bar container');
			}
		oHelpTxt.onmouseover = function() {
			alert('in help text container');
			}
	}
}
</script>
</head>

<body onload="initPage(true);">
				<div id="cFiveDlrWin">
					<h3 id="titleBar">Title Bar</h3>
					<p id="helpTxt">Help Text: Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
					<a href="">text link</a>
				</div>
</body>
</html>

This of course works as expected in FF.

Any ideas?

PS - giving the element a width via css fixes the problem... I guess I'm more curious about WHY IE is choosing to display like this.

Background Recongnizing/not Recognizing Float

Ie6 Not Recognizing Additional Class After Pseudo Class

Similar Tutorials

View Content

Using the following example:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">

a
{
	display: block;
}

a.one.on, a:hover.one, a:hover.one.on
{
	color: red;
}

a.two.on, a:hover.two, a:hover.two.on
{
	color: orange;
}

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}


</style>
</head>

<body>

<a href="#" class="one">one</a>
<a href="#" class="two">two</a>
<a href="#" class="three">three</a>

<p>&nbsp;</p>

<a href="#" class="one on">one</a>
<a href="#" class="two on">two</a>
<a href="#" class="three on">three</a>


</body>
</html>

Notice how, in IE6 (works fine in FF), when the secondary style named 'on' is added, all 3 links in the 2nd set display the properties of the style:

Code:

a.three.on, a:hover.three, a:hover.three.on
{
	color: green;
}

(since it is last in the list) rather than the style specified by their respective numbers (i.e. 'one', 'two' or 'three'). Is there a way to overcome this in IE.