Picture moving left for every iteration…

@urquanmasterAug 06.2006

I have a picture that moves left one pixel every time it’s displayed. It’s the one on the right and it only happens in IE. I’ve been trying to locate the problem with no avail. Can anybody solve this?

The link is: ~~[url]~~http://www.thehiddengrotto.com/portfolio/[/url]

Thanks for any help given.

to post a comment

CSS

6 Comments(s) _↴

@WebJoelAug 06.2006 — #I didn't notice any 'creep', but am I reading this right? You've got a 1.1MB image crammed into a 141x140 'box'? And every image on the righthand side is the same way? No wonder the page takes so long to load (even at just over 6X dial-up speed, your page takes awhile to load on my screen...)

See image.

I'd get a screenshot of the image that you want, maybe at 300pixels-per-inch, and reduce the image to the actual size you want, and not let the browser do all this math. That alone will save download time and reduce the compute-cycles of the visitor's computer (and possibly cause the browser to 'lock-up', go BSOD or crash..)

[upl-file uuid=42116f4c-ca5c-4372-bfb8-5768c21a1656 size=64kB]ScreenHunter_3.jpg[/upl-file]

@urquanmasterauthorAug 06.2006 — #Sorry. I put it in my directory, so it loaded lighting fast. It's replaced with a different picture.

Also, the pictures will be different later on. But for now, I'm more interested in layout, then making it look diverse.

I've also pasted it a whole bunch of times to show it more clearly. If you scroll down, it's more visable.

Another thing I've found is that you have to hover over text on the links in the menu on the left. On the right, however, you need only hover over the box (IE only). I've yet to figure out why the left and right are not behaving the same.

@WebJoelAug 06.2006 — #I'll look again, -but I didn't notice the image moving 1-pixel to the left. I'll switch browsers and re-load a few times to see if that makes it behave oddly or not...

(edit)

I'm back. Using a small-screen-rendering (how a handheld device would view your page), I see this anomolous extention of what appears to be a block element like an <h> tag or something... Does this mean anything to you?

I'm still studying this..

(edit)

I may see the problem.

Change your css to this:

[code=html]#boxdate	{
 display:block;
 color: #bbbbbb;
 font-size: 12px;
 font-family: verdana;
 background-color: black;
 border: 1px solid #b35757;
 width:163px;
 text-align:center;
 border-top: 0px;
 padding-bottom: 1px;
 }[/code]

And then, for every instance of "pics/matrix.jpg", do this:

[code=html]<div id="boxtopnavhead">Current Project</div>
 <div id="boxpic"><img src="pics/matrix.jpg" style="height: 140px; width: 141px; border: 1px solid #b35757; text-align: center;" /></div> 
 
 <div id="boxdate">August 2006</div>[/code]

Notice in the html, that the DATE is no longer 'nested' inside of the [COLOR=Navy]DIV id="boxpic"[/COLOR]. That way, the DATE can have entirely it's own css rules and not try to be 'to the right of' of "boxpic" content.

This is working for me on my html-editor (non-validated, it just works). Try this, and leave a message what happens. I'll check back tomorrow morning...

[upl-file uuid=0629de77-2113-455f-98c7-8a17a60f3cdf size=39kB]ScreenHunter_4.jpg[/upl-file]

@urquanmasterauthorAug 07.2006 — #I've found a workaround....

If I center the date and picture, it won't creep anymore. However, I'm actually more interested in why this is happening because I'm pretty sure that it is causing the link rollovers on the right to behave differently than the ones on the left. I want the whole box to be a link, not just the text. And, on the right, that's exactly what they're doing. If I find out why the stuff is creeping, I just might find out why the whole boxes are acting as links.

I'm going to try this basic setup on it's own and see if it does the same as what my site does:

<div id="container">

<img src="pics/matrix.jpg"><div id="date">June 2nd</div>

</div>

Thanks for all your imput and help. My final code is usually not this bad. I didn't expect to have to show this to others....

@WebJoelAug 07.2006 — #....I'm going to try this basic setup on it's own and see if it does the same as what my site does:

<div id="container">

<img src="pics/matrix.jpg"><div id="date">June 2nd</div>

</div>

Thanks for all your imput and help. My final code is usually not this bad. I didn't expect to have to show this to others....[/QUOTE]

Okay. ? I still think that by trying to place a DIV (with date in it) without closing the 'container' DIV is trying to make the date be to the right of the image, but it has to 'wrap' to the next line. I think that this is what is causing that dark bar that extended beyond the image, in the attached img of my earlier post.

Maybe inserting a <br /> after the close of the image and [I]before[/I] the <div id="date">June 2nd</div> would force this 'date' text to drop to the next line.

I wish I could see what you mean by the image or images creeping 1-pixel to the left... This just isn't happening with any browser or editor that I am using. I'd like toknow too why it does that.

[SIZE=1]Yes, -I totally understand about letting others see your code in the un-finished state... (that's why I don't like to show my code to too many people unless I'm stumped... too many premature critical reviews about things that aren't currently at issue. ? You know, -not enough font choices, too many colors, some tags not closed properly, etc...)[/SIZE]

@urquanmasterauthorAug 11.2006 — #Okay, I've found that using a <br> won't work either. But, I've stopped worrying about it. I actually just scrapped my whole design and started again. If you're curious, you can see my new site at thehiddengrotto.com/portfolio.

Sorry for my apathy... I'm just tired of things like this. Oh, and the "creep" is only visable in IE. Anyhoo, if I run into this problem again, I'll probably be in school by then, so I'll just ask my teacher.

Thanks again for you help.

[edit] I've found out what it is!

http://www.positioniseverything.net/explorer/creep.html

Also in #CSS _↴

image map rollover and background color swap Layout problems in Firefox 2 Embed Tag - Should I...

Success!

Help @urquanmaster spread the word by sharing this article on Twitter...

Tweet This

Picture moving left for every iteration…

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Picture moving left for every iteration…

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴