HTML and CSS

Odd, CSS Error

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2006

Posts: 2,564

Reputation: mattyd is an unknown quantity at this point

Solved Threads: 1

mattyd

Offline

Posting Maven

Odd, CSS Error

Oct 18th, 2007

Hi,

I am developing a simple site and have (after it being recommended) been using CSS to handle the homepage image display. The display consists of an array of 25 (95x95 px) images aligned to form one image. CSS has allowed me to display them just as I wanted (please see homepage link above). A minor problem exists now though. I have decided to add Javascript to the page so each image rolls over upon mouse contact-- simple. This works fine. (*NOTE: the website link is pre-Javascript, not the scripted version which contains the errors) But, ever since I've added JS, I am having an odd alignment problem. I have tried everything I can think of. The original non-JS works fine, and I do not see how adding JS would cause this problem.

Attached are two screenshots of the situation:

1) Before, without JS (lower-righthand image is placed correctly)
2) After JS (lower-righthand image is placed incorrectly)

Below is a relative code-snippet for each:

1)

Help with Code Tags

(Toggle Plain Text)

<div class="thumbnail">
<a href="http://stormtrooper.webng.com/image.html"><img src="bombers.jpg" width="95" height="95" alt="" border=0></a><br>
</div>

<!-- layer 5-->
<div class="thumbnail">
<a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border=0></a><br>
</div>

Help with Code Tags

(Toggle Plain Text)

<div class="thumbnail">  
<A href="#" onMouseOver="return changeImage18()" onMouseOut= "return changeImageBack18()" ><img name="shirtButton18" src="bombers.jpg" width="95" height="95" border="0" alt="javascript button"></A><br>
</div> 


<div class="thumbnail">
<a href="http://stormtrooper.webng.com/image.html"><img src="bottomLeftCorner.jpg" width="95" height="95" alt="" border=0></a><br>
</div>

** Both, full code versions upon request

I hope I explained this well to some extent. Basically, the image (blocked in a red rectangle, "bottomLeftCorner.jpg", in the attached BMPs) is misaligned.

Thank-you in advance for any help.

Matty

Attached Images

	css_1.bmp (566.2 KB, 5 views)
	css_2.bmp (630.4 KB, 2 views)

[My Tech Blog]

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 166

MidiMagic

Offline

Nearly a Senior Poster

Re: Odd, CSS Error

Oct 19th, 2007

Something is shoving the whole bottom row of images to the right. The bottom right image (in the red rectangle) is then crashing into the text box, so it is displaced downward.

How are you positioning the images?

Why can't you use one large image?

Daylight-saving time uses more gasoline

•

Join Date: Sep 2007

Posts: 176

Reputation: trudge is an unknown quantity at this point

Solved Threads: 20

trudge

Offline

Junior Poster

Re: Odd, CSS Error

Oct 19th, 2007

It's been my experience that even though HTML is supposed to ignore white space, if you have a number of images you want to line up horizontally, you CANNOT have any hard returns in the code. That's right - if there is a new line in your code you might notice a small 'tick' or underscore between images. I don't know if this is your case, but it might be worth looking at.

Amer Neely - Web Mechanic
"Others make web sites. We make web sites work!"