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
View Entire Thread
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