PDA

View Full Version : Problems with repeating background pictures on IE8


Magnitus
Oct 27th, 2010, 10:57 PM
k, I used jQuery to dynamically frame webpage content inside some art (which has pictures defined for the corners, the bottom, the left, the right as well as some repeating background picture inside the frame).

Additionally, there is repeating background image for outside the frame.

I renders everything without problem on my desktop for the following browsers: Opera, Google Chrome, Safari, Firefox and IE7.

Recently, I ran it on my laptop and it was rendered without problem for the above browsers, except for IE8 where the following problems were encountered:

1) Despite the fact that the background images for the frame's content are 50x50 pixels and that the frame's content is 500x500 pixels, there seems to be enough slack space at the right and bottom of the frame's content for the background picture to partially repeat itself both at the right and bottom (undesirable result, I was hoping that if the dimensions of the frame's content are always an integer multiple of 50 pixels, I wouldn't have clipped repeating pictures at the fringes).

2) Some repeated background pictures both inside and outside the frame are just messed up (some are out of alignment, some that are not at the fringes of their container are clipped in weird places and IE seems to unsuccessfully try to fix their appearance when I click on the background).

After some frustration, I decided to remove all the jQuery logic and instead copy-paste a static version of the DOM (as shown in IE's development tools) that appared once jQuery had done its work to see if the problem would go away. It didn't.

Here is the html and the accompanying csses (modified a bit to remove sensitive content like paths and embedded python code):

html:

<!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" xml:lang="en">
<head>
<LINK rel=stylesheet type=text/css href="SomePathIDontWantToShow/index.css">
<LINK rel=stylesheet type=text/css href="SomePathIDontWantToShow/generic.css">
</head>
<BODY class=Main_background>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 238px" class=Main_title></DIV>
<DIV style="POSITION: absolute; WIDTH: 600px; HEIGHT: 600px; TOP: 150px; LEFT: 237px" class=Frame>
<DIV style="POSITION: absolute; TOP: 50px; LEFT: 50px" class="Content Content_background"></DIV>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 0px" class=Content_top_left></DIV>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 550px" class=Content_top_right></DIV>
<DIV style="POSITION: absolute; TOP: 550px; LEFT: 0px" class=Content_bottom_left></DIV>
<DIV style="POSITION: absolute; TOP: 550px; LEFT: 550px" class=Content_bottom_right></DIV>
<DIV style="POSITION: absolute; WIDTH: 500px; TOP: 0px; LEFT: 50px" class=Content_top></DIV>
<DIV style="POSITION: absolute; WIDTH: 500px; TOP: 550px; LEFT: 50px" class=Content_bottom></DIV>
<DIV style="POSITION: absolute; HEIGHT: 500px; TOP: 50px; LEFT: 0px" class=Content_left></DIV>
<DIV style="POSITION: absolute; HEIGHT: 500px; TOP: 50px; LEFT: 550px" class=Content_right></DIV></DIV></BODY></HTML>
</html>

index.css:

body, table, tr, td, th, thead, tfoot, label, h1, h2, h3, h4, h5, h6, p, ul, li, ol, pre, textarea, div {
border: 0px;
margin: 0px;
outline: 0px;
padding: 0px;
}

div.Content{
position: absolute;
top: 0px;
left: 0px;
height: 500px;
min-height: 500px;
width: 500px;
min-width: 500px;
}

generic.css:

body, table, tr, td, th, thead, tfoot, label, h1, h2, h3, h4, h5, h6, p, ul, li, ol, pre, textarea, div {
border: 0;
margin: 0;
outline: 0;
padding: 0;
}

div.Main_title{
height: 150px;
min-height: 150px;
width: 600px;
min-width: 600px;
background: url('../images/Title.png');
}

body.Main_background{
background: url('../images/Background.png') repeat;
}

div.Content_background{
background: url('../images/Content_background.png') repeat;
}

div.Content_top_left{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_top_left.png') no-repeat;
}

div.Content_top{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_top.png') repeat-x;
}

div.Content_top_right{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_top_right.png') no-repeat;
}

div.Content_left{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_left.png') repeat-y;
}

div.Content_right{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_right.png') repeat-y;
}

div.Content_bottom_left{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_bottom_left.png') no-repeat;
}

div.Content_bottom{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_bottom.png') repeat-x;
}

div.Content_bottom_right{
height: 50px;
min-height: 50px;
width: 50px;
min-width: 50px;
background: url('../images/Content_bottom_right.png') no-repeat;
}

All the pictures are 50x50 pixels, except for "Title" which is 600x150 pixels.

Any insight in the problem would be greatly appreciated.

PS: Yes, I know that the main title and frame are misaligned by 1 pixel. Its on my "to do" list.
abduraooft
Oct 28th, 2010, 09:27 AM
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 238px" class=Main_title></DIV>
<DIV style="POSITION: absolute; WIDTH: 600px; HEIGHT: 600px; TOP: 150px; LEFT: 237px" class=Frame>
<DIV style="POSITION: absolute; TOP: 50px; LEFT: 50px" class="Content Content_background"></DIV>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 0px" class=Content_top_left></DIV>
<DIV style="POSITION: absolute; TOP: 0px; LEFT: 550px" class=Content_top_right></DIV>
<DIV style="POSITION: absolute; TOP: 550px; LEFT: 0px" class=Content_bottom_left></DIV>
<DIV style="POSITION: absolute; TOP: 550px; LEFT: 550px" class=Content_bottom_right></DIV>
<DIV style="POSITION: absolute; WIDTH: 500px; TOP: 0px; LEFT: 50px" class=Content_top></DIV>
<DIV style="POSITION: absolute; WIDTH: 500px; TOP: 550px; LEFT: 50px" class=Content_bottom></DIV>
<DIV style="POSITION: absolute; HEIGHT: 500px; TOP: 50px; LEFT: 0px" class=Content_left></DIV>
<DIV style="POSITION: absolute; HEIGHT: 500px; TOP: 50px; LEFT: 550px" class=Content_right></DIV></DIV> It seems like you aer not aware of the pitfalls of absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/). I'd recommend you to check http://bonrouge.com/3c-hf-fixed.php to see how to make a layout using floats.
Magnitus
Oct 28th, 2010, 02:27 PM
It seems like you aer not aware of the pitfalls of absolute positions (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/). I'd recommend you to check http://bonrouge.com/3c-hf-fixed.php to see how to make a layout using floats.

Thanks for the links, I'll look into them.

Here's the main reasons why I used absolute positioning:

1) divitisis

While the above html looks messy, the code in my page to render the above has the following:

2 divs
3 lines of Javascript (which will be reused through the entire site)

2) Centering both horizontally and vertically inside the parent is a nightmare

I saw a bunch of hacks for it. I tried some, but it didn't work for all browsers. Ultimately, I'm not interested in entering the realm of hack land.

However, I'm knowledgeable enough in mathematics to implement the relatively simple task of centering an element within its parent if I know their position and dimensions.

3) I need to implement a chess-like grid with moving pieces so I'll need to use absolute positioning for some things.

Now, if the grid is not inside an absolutely positioned parent, you can't position the children relative to the top-left of their parent. This means that you are stuck positioning them relative to the top-left of the document and since the browser helpfully returns the value of "auto" for the top-left of their parent, good luck placing the moving pieces at the right position inside the parent.

Overall, it seems to be that if I byte the bullet and get over the initial learning curve of using absolute positioning (which from a general perspective I'm comfortable with because of my experience in graphics), my life will be simpler afterwards.

EDIT: Spelling.
teedoff
Oct 29th, 2010, 04:28 PM
I'm confused. As Abdura said, if you use float instead of absolute positioning, then you can still, and more effectively control the placements of divs by way of the use of margins.
Magnitus
Oct 29th, 2010, 10:31 PM
wamly welcome

Sure all pro gamer are most welcome... if you can reach out to them it would be great!! Thanks a lot



Ya it will be great if they both get active on this forum...
and share their exp. with gaming...


I applaud your enthusiasm, but truth be told, I'm a lone entrepreneur with a modicum of experience in the gaming industry and as such don't really have any pull within the gaming development community atm.

I guess you could say I'm a gaming professional in the loosest sense of the term, I certainly like to think that I am.


I'm confused. As Abdura said, if you use float instead of absolute positioning, then you can still, and more effectively control the placements of divs by way of the use of margins.

The main thing is: I'll need to place and fluidly move some elements relative to the top-left corner of their parent once the page is loaded.

Now, if you know how to place (and fluidly move) a children at a precise pixel value offset relative to the top-left of an "in flow" parent once the page loaded, please enlighten me, I'm all ears.

Otherwise, it seems to me like absolutely positioned elements is the way to go for things that will contain children that need translation movement animation, despite some of the pitfalls with text resizing and the like.