Log in

View Full Version : Div spans display issues in IE


codeexploiter
06-09-2008, 11:56 AM
Hi all,

I am having some problems with one of my page which involves some span elements inside a div element. Since it is an internal project unable to provide a link, plz find the source, in which I've simulated the issue:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.value {
padding:0px 0px 0px 24px;
color:#0080FF;
font-weight:bold;
cursor:pointer;
background: transparent url(images_sprites.gif) no-repeat scroll 4px -447px;
}
.c{
width:100%;
border:1px solid red;
}
#main {
background-color:#FFFFDA;
border-top:1px solid #BBD0F0;
line-height:20px;
width: 100px;
position: static;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="main">
<div class="c">
<span class="value">hello</span>
<span class="value">se cond</span>
</div>
</div>
</body>
</html>


Plz find the image used in the above source as attachment, which is important to identify the problem.

After saving the source and image together in the same location view the page in Firefox and in IE, you can identify the problem quickly. I would like to avoid such problems in IE and want to make it exactly like Firefox if that is possible otherwise I would like to make a uniform method applicable to both items.

Any help appreciated.

Thanks in advance.
Minos
06-09-2008, 12:29 PM
...Well, is the space in the word second intended? Is the containing div intended to be too small? Really, I'm not sure what's important regarding your site, because all I'm looking at is two words.
Medyman
06-09-2008, 12:50 PM
@thetestingsite...

That's quite easy to fix. Your use of the CSS shorthand in your background tag is a bit verbose. You can't fit all background CSS properties into the shorthand tag.

The shorthand style follows the following convention:

background: #fff url(image.gif) no-repeat top left

...instead of


background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

So, in your code change:

background: transparent url(images_sprites.gif) no-repeat scroll 4px -447px;
to

background: transparent url(images_sprites.gif) no-repeat 4px -447px;

Basically, remove "scroll"
codeexploiter
06-10-2008, 03:29 AM
...Well, is the space in the word second intended? Is the containing div intended to be too small? Really, I'm not sure what's important regarding your site, because all I'm looking at is two words.

First of all if you check the display in Firefox and IE you can clearly identify that the view is not similar. I have a div element in which I am inserting span elements. When I insert a span element which goes to the next line due to the width restriction of div element in Firefox it correctly shows the background image I've set for the span element. But in IE7 and IE6 it gives me a distorted display (not showing the X mark in the desired position but showing a wrong image in another position). I would like to make the display of IE like Firefox, if that is possible.

Regarding the code I've posted here, I've clearly mentioned that the code is a simulated one of my problem. I am sure that the demo code does shows the problem clearly.




@thetestingsite...

That's quite easy to fix. Your use of the CSS shorthand in your background tag is a bit verbose. You can't fit all background CSS properties into the shorthand tag.

The shorthand style follows the following convention:

background: #fff url(image.gif) no-repeat top left

...instead of


background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

So, in your code change:

background: transparent url(images_sprites.gif) no-repeat scroll 4px -447px;
to

background: transparent url(images_sprites.gif) no-repeat 4px -447px;

Basically, remove "scroll"

I think there is some issues with the way you've mentioned the order of background CSS shorthand properties. That should be in the following order I think



background-color
background-image
background-repeat
background-attachment
background-position


The "scroll" is the value for the highlighted portion in the above. It can have either "scroll" or "fixed".

Anyway removing that will not solve the issue if you try that in the demo page I've provided.

I am still open for a solution.

Thanks in advance.
rangana
06-10-2008, 05:33 AM
See if this ammendment helps:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#main {
background-color:#FFFFDA;
border-top:1px solid #BBD0F0;
line-height:20px;
width: 150px;
}
.value {
padding:0px 0px 0px 24px;
color:#0080FF;
font-weight:bold;
cursor:pointer;
background: transparent url(images_sprites.gif) no-repeat scroll 4px -447px;
}
.c{
border:1px solid red;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="main">
<div class="c">
<span class="value">hello</span>
<span class="value">se cond</span>
</div>
</div>
</body>
</html>
jscheuer1
06-10-2008, 05:50 AM
The problem here is that you are applying a background image to an inline element that has wrapped. In FF, the left edge of the left padding on the first line is seen as the 0 x coord of the background image. In IE, the left most portion of the wrapped line signifies this position. If you were to add an id to the second span:


<span class="value">hello</span>
<span class="value" id="two">se cond</span>

and this conditional stylesheet in the head:


<!--[if IE]>
<style type="text/css">
#two {
background-position: 62px -447px;
}
</style>
<![endif]-->

It would work out. Alternatively, you could forget about all that, and just make the value class display:block; That would make the alignment uniform, but also change the layout though:


.value {
padding:0px 0px 0px 24px;
color:#0080FF;
font-weight:bold;
cursor:pointer;
background: transparent url(images_sprites.gif) no-repeat scroll 4px -447px;
display:block;
}


If the container (main) was wide enough to prevent wrapping (as someone else hinted at already), that would also solve the problem.

Finally, although I haven't tested this yet (I will, and report back only if there are problems). I believe you could use 4 spans in place of the two:


<span class="value"></span>
<span class="text">hello</span>
<span class="value"></span>
<span class="text">se cond</span>

apply the background image style only to the value spans, and apply whatever text styling you prefer to the text spans. The value spans would still need padding to be wide enough.
jscheuer1
06-10-2008, 06:33 AM
As promised, since that (my last idea from my previous post) didn't exactly work out, here is a cross browser method that appears to satisfy your requirements:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.value {
color:#0080FF;
font-weight:bold;
cursor:pointer;
background: transparent url(images_sprites.gif) no-repeat 0 -447px;
}
.text {
color:#0080FF;
font-weight:bold;
cursor:pointer;
}
.c{
width:100%;
border:1px solid red;
}
#main {
background-color:#FFFFDA;
border-top:1px solid #BBD0F0;
line-height:20px;
width: 100px;
position: static;
}
</style>
</head>
<body>
<div id="main">
<div class="c">
<span class="value">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="text">hello</span>
<span class="value">&nbsp;&nbsp;&nbsp;&nbsp;</span>
<span class="text">se cond</span>
</div>
</div>
</body>
</html>
codeexploiter
06-10-2008, 07:34 AM
This is amazing John! I've actually done exactly the same method and when I came here to reply to you about it, you have posted the same thing here also :D

Actually this problem occurs in a dynamic environment in which I used to insert the span elements in the div element using JS code. The idea was to display a line of items (all of them are span elements) and each of them has their own onclick events. So the idea of assigning an ID after checking whether the item is the last one in a line or not seems to be bit difficult and not optimized. So I've changed my span element structure and that worked as it should.

Thanks a lot for the valuable help from your side whenever we people need that.
jscheuer1
06-10-2008, 12:57 PM
I hope you aren't implying that this structure cannot be dynamically generated. If you are, that's OK really - but I can assure that it can be dynamically generated.
codeexploiter
06-10-2008, 02:20 PM
No basically I wanted a method for arranging the internal span elements in a non-JavaScript based method. So was trying to adjust the CSS part alone. Due to some other reasons I don't want to touch the main JS of mine.

Since this is a typical issue that can happen to anyone out there if you can provide a working example about solving this issue someone else can have some advantage.

I would appreciate if you can provide one such example, if that is possible.
jscheuer1
06-10-2008, 03:59 PM
Since the context (green stuff in the below) for this is vague, I've basically left it out - to be furnished by whoever uses the code. I'm using (imagining) the css and basic layout from my previous post #7 in this thread, but any that works as desired could be employed.


var p = element_we_will_be_appending_to;
for (whatever_iteration_method){
var s1 = document.createElement('span'), s2 = document.createElement('span');
s1.className = 'value';
s2.className = 'text';
s1.appendChild(document.createTextNode('\xa0\xa0\xa0\xa0'));
s2.appendChild(document.createTextNode( var_holding_text_for_this_iteration ));
p.appendChild(s1);
p.appendChild(s2);
}

It could be done other ways of course, and iteration is just one framework that could be employed. For instance, it could instead be couched as a function that gets called whenever required.