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
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.
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, .....
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, .....
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.
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, .....
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
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
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.
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