Final tweaks

[Chris H]

Hi, long time lurker surfacing..... I've managed to get pretty far with my site, amazing considering I didn't even know what CSS was to start with.

I have a couple of minor tweaks that I'm struggling with. In my Gallery pages (take "landscapes" for instance):

1. I want the page nav text hard to the left of the box so that it appears just beneath the title.
2. Can I get rid of the annoying little vertical grey line that appears in the middle of the page nav box?
3. How can I make the display photo larger and the space for thumbnails smaller?
4. In internet Explorer a grey border appears below and to the left of the display photo, but not in Firefox. Can this be sorted?
5. Finally, I want all the thumbs to have a border with color #404040 and highlight color #669933 on hover. I've managed this elsewhere but can't seem to get it working in the gallery.

Thanks in advance. The help and advice here is amazing.

Chris

www.chrishumphreys.net

[J Allen]

1. I want the page nav text hard to the left of the box so that it appears just beneath the title.



#smugmug #pageNavigation_top
{position:relative;
right:130px}



2. Can I get rid of the annoying little vertical grey line that appears in the middle of the page nav box?



#smugmug .photoNav
{border:none;}



3. How can I make the display photo larger and the space for thumbnails smaller?

Not possible, unless you constuct the html your self...a-lot of work...example here:

http://allen-steve.smugmug.com/gallery/3539056



4. In internet Explorer a grey border appears below and to the left of the display photo, but not in Firefox. Can this be sorted?


Not sure if this will get IE or not?



#displayPhoto,
#caption_bottom
{border:none !important;}




5. Finally, I want all the thumbs to have a border with color #404040 and highlight color #669933 on hover. I've managed this elsewhere but can't seem to get it working in the gallery.


Place these at the bottom of your CSS:



/*====Image Border Color====*/
.imgBorder
{border-color: #404040 !important;}


/*====Selected Image border====*/
.imgBorderOn
{border-color: #669933 !important;}


/*====Image Border Hover====*/
a:hover img.imgBorder,
.imgBorderOn
{border-color: #669933 !important;}



:ear

[Chris H]

:bow :bow :bow

Once again, I'm staggered by the level of speedy knowledgeable help on this forum.

Thank you!

[Chris H]

Sorry it's happened again. Could someone please take a look at my "Services" page. In firefox the image borders are color #404040 with a hover of #669933 just as I want it. In IE the are bright blue with no hover color, then turn purple when clicked!. Is there a way of getting IE to behave?

Aslo try as I might I also can't get these images to have a narrower border.

Thanks in advance.

Chris

www.chrishumphreys.net

[jfriend]

Sorry it's happened again. Could someone please take a look at my "Services" page. In firefox the image borders are color #404040 with a hover of #669933 just as I want it. In IE the are bright blue with no hover color, then turn purple when clicked!. Is there a way of getting IE to behave?

Aslo try as I might I also can't get these images to have a narrower border.

Thanks in advance.

Chris

www.chrishumphreys.net (http://www.chrishumphreys.net) I would suggest you directly specify what you want for the image borders because you are relying on some implicit relationship between the <a> and the <img> that is behaving differently in the different browsers. IE is famous for it's blue borders for a linked image. Try adding CSS to describe exactly what you want:

.gallery_7961758 #albumDescription img {border: 2px #404040 solid;}
.gallery_7961758 #albumDescription img:hover {border: 2px #669933 solid;}

[Chris H]

I would suggest you directly specify what you want for the image borders because you are relying on some implicit relationship between the <a> and the <img> that is behaving differently in the different browsers. IE is famous for it's blue borders for a linked image. Try adding CSS to describe exactly what you want:

.gallery_7961758 #albumDescription img {border: 2px #404040 solid;}
.gallery_7961758 #albumDescription img:hover {border: 2px #669933 solid;}

Brilliant, works a treat thanks.

I tried looking at the "display element information" in Firefox to do exactly what you've done, but just couln't quite work out the code.

Cheers dude