This Message Forum is no longer in use

Please use the new Bravenet Help Forums FOUND HERE

General Forum
This Forum is Locked
Author
Comment
Photo Positioning

Hello folks

I'm trying to get both photos on this page to be in different places. The one on the right is roughly ok but the left one should be near the top left of the text. Basically they both are not appearing on the page in relation to where I have placed my code for them.
Any assistance gratefully received.
Thanks

Browser: Firefox, IE7

Re: Photo Positioning

Actually the photos do not appear on your page at all. There is probably some good reason for this that I just don't get under these circumstances (working, waiting for someone to call back). At first I thought the crazy file names, but I see the images OK when I try copy the code for the images and go there directly.

Re: Photo Positioning

I continually stress the importance of a DOCTYPE tag, but I guess no one reads my posts.

The images display fine in Firefox, but not in IE and I suspect Opera. There is often a problem when you are using PhotoShop. Not saving the images in RGB format causes a display issue. But according to the EXIF information, the images look like they were saved in the right format. The other problem comes from the "quirks" mode and can be fixed by adding a DOCTYPE tag at the beginning of the document.

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/loose.dtd">


The positioning issue will take a bit longer. There is a little bit of a mess in the code and I don't have the time to look at it closely. The images appear to be in their correct positions in IE, but not Firefox.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: Photo Positioning

Thanks again Philo

I had forgotten to include the DOCTYPE tag. Yes, the images seem ok in IE but not in Firefox.

Browser: Firefox, IE7

Re: Photo Positioning

This page is behaving the same way, anyone any ideas as to why?
http://blackhorsekawasaki.com/SuperbikeTTa.html
Thanks

Browser: Firefox, IE7

Re: Photo Positioning

Anyone please help with this?

Browser: Firefox, IE7

Re: Photo Positioning

Your web page seems to be a reworked Website Wizard layout. The original was restricted to a fixed width of 760 pixels, but you have added some code and separated the header from the rest of the content. Now the content area doesn't have a width constraint. Cutting up a Wizard layout would not be my first choice to use as a template. The original layout was not meant to work that way.

With Firefox, I see the image between the second and third paragraph. There is no text wrap, but that might be due to the coding error for the image tag.

With Internet Explorer, I see the second and third paragraphs wrapping around the image.

In the code I see the image inserted in the middle of the second paragraph. Or, did you intend to split that second paragraph into two paragraphs? Look at the image tag in this area. That is where a coding error exists. That probably won't fix things, but the error still needs fixing.

So the question is, exactly how are you expecting it to display?

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: Photo Positioning

Hi Philo
I want the image to be at the start of the first paragraph. What code should I be using, where is the error?
Thank-you

Browser: Firefox, IE7

Re: Photo Positioning

The error in the code is fairly easy to spot. It looks like you were trying to splice two image tags together and didn't finish it. It may have been part of a link at one time. There is code in the middle of the image tag that needs to be removed. Below is the incorrect code.

Code:
<IMG BORDER="0" ALIGN="Left"<span style="font-weight:bold;"><img</span> src="Superbike_Images/Ian9.jpg">


This is what it should look like:

Code:
<img border="0" align="Left" src="Superbike_Images/Ian9.jpg">


This partially fixes it for IE, but Firefox puts the image at the bottom.

Overall, fixing your image positioning problem was not very successful. Most of the blame goes to the layout your using. Because I didn't know exactly what might have been changed in your code, I copied a clean Wizard layout, that matched yours. Then I went about trying to align the image with the text correctly. With that layout, I can make the image display in the correct position for IE, but not Firefox. With Firefox, the image drops to the bottom. This is a direct effect of the layout.

So I ran another test. I switched to one of the layouts from Dynamic Drive CSS Layouts. I picked one that matched, as best possible, what you are trying to do (CSS Liquid Layout #2.1- (Fixed-Fluid)). When I copied your content over to the new layout, and adjusted the colors, everything worked correctly. Except for some slight font differences, it looks the same in IE and Firefox. Here is a link to Black Horse SuperBike with new layout. Here is a link to a Zip file that contains everything, SuperBike.zip.

Hopefully, you will get away from those Wizard layouts. They work fine if your operation from the Wizard, but do not do very well on their own.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: Photo Positioning

Thanks very much for your help Philo, however there seems to be a problem with the new layout and zip file links

Browser: Firefox, IE7

Re: Photo Positioning

What kind of problem are you having? THe links work just fine for me.

The full link to the new layout is "www.k7mem.150m.com/Blackhorse/Superbike/Layout_2.1-Fixed-Fluid.html".

The full link to the zip file is "www.k7mem.150m.com/Blackhorse/Superbike/SuperBike.zip".

Copy and paste them into a browser and see if they work.

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: Photo Positioning

Got them now thanks Philo, when I clicked on them originally it came up as 'page not found'.
Many thanks for your help, much appreciated

Browser: Firefox, IE7

Re: Photo Positioning

Hi Philo

Could I trouble you once more. I've done a test page with the new CSS
http://www.blackhorsekawasaki.com/testindex.html
and I am trying to get the link colours round the photo boxes (the green hover) to behave like this page http://www.blackhorsekawasaki.com/index.html

Where on the CSS do I change this?
Thank-you

Browser: Firefox, IE7

Re: Photo Positioning

The CSS for the image borders from http://www.blackhorsekawasaki.com/index.html is:

Code:

.contentContainer a img {
border:2px solid #00FF00;
}
.contentContainer a:hover img, a:active img {
border:2px solid #000000;
}


For your new page, you need to make it look like this
Code:

#leftcolumn a img {
border:2px solid #00FF00;
}
#leftcolumn a:hover img, a:active img {
border:2px solid #000000;
}


If you add the second piece of code to the stylesheet it should work fine.
Hope that helps.

Re: Photo Positioning

That's great thanks Courtnie. How do I change the link colours of the photos etc in the main content area. The 3 near the bottom plus the guestbook and contact details?
Thanks

Browser: Firefox, IE7

Re: Photo Positioning

Yes, Courtnie's suggestion is only for the left column. The class ".innertube" is used for both the left column and the content column. So if you change Courtnie's suggestion to the one below, it should work in both areas.

Code:
.innertube a img {
border:2px solid #00FF00;
}
.innertube a:hover img, a:active img {
border:2px solid #000000;
}

Browser: Firefox, Netscape, Sea Monkey, Internet Explorer, .....

OS: Solaris (Sparc,x86), Linux, XP

Re: Photo Positioning

Thank-you so much Philo and Courtnie, much appreciated.
The page looks as I wished, it's slightly better in Firefox as the main content items are spaced slightly away from the left columns but both are fine. Although whether it's just my monitor but I'm getting some weird looking light green specks down the right hand side of the page near the scroll bar in Firefox
Thanks again
Stephen

Browser: Firefox, IE7