Quantcast

Creativebits.org

an All Creative World site
ItalianMike's picture
299 pencils

CSS Experts, please help me fix this picture gallery

ItalianMike (299 points) | Wed, 2006-04-19 12:49

Solved

Commenting on this Forum topic is closed.

‹ C.B. is SLOWWWW... Are there any chat IRc networks or whatnot like ichat for Design ? ›
popstalin's picture
17 pencils
popstalin | Thu, 2006-04-20 00:20

Did you put the following code in your CSS?

/* to make it work in Safari */
.menu2 ul li:hover ul li a:active img {
background:#aaa;
position:relative;
outline:none;
}

Jen
Pop Stalin Design
http://www.popstalin.com

ItalianMike's picture
299 pencils
ItalianMike | Thu, 2006-04-20 07:58

That bit of code is in there, it's combined with the Firefox version and reads as follows:

/* active img for Opera (and Safari thanks to Anonymous Coward) and focus for Firefox */
.menu2 ul li a:active img, .menu2 ul li a:focus {
background: #aaa;
position: relative;
outline: none;
}
/* make the large image visible and give it an absolute position, set the padding and margin, use the default pointer */
.menu2 ul li a:active img.bigger, .menu2 ul li a:focus img.bigger {
visibility: visible;
background: #ddd;
position: absolute;
width: 640px;
height: 480px;
z-index: 200;
padding: 5px;
border: 1px solid #888;
cursor: default;
}

I've tried splitting them up so that the Safari command is seperated. I tried remove the Firefox one in case it was conflicting with Safari, but nothing happened.

*** EDIT ***

I've also tried adding it to the page's header, but nothing changes.
-------------------------------
Infinite Style

popstalin's picture
17 pencils
popstalin | Thu, 2006-04-20 11:01

In Stu's source code, his links to each image are different:
< a href= "#portrait1" >
< a href= "#portrait2" >
< a href= "#portrait3" >, etc....

In yours, they are all the same:
< a href= "#picture1" >
< a href= "#picture1" >
< a href= "#picture1" >, etc....

Try changing a few of those and see what happens.

Jen
Pop Stalin Design
http://www.popstalin.com

ItalianMike's picture
299 pencils
ItalianMike | Sat, 2006-04-22 11:39

It has no effect on things.

Good to see this place up and running again.

-------------------------------
Infinite Style

popstalin's picture
17 pencils
popstalin | Sat, 2006-04-22 11:44

I'm seeing a difference in the css mark-up. I don't know if this will fix things but it's worth giving it a try. Stu writes his like this:
/* style position of the links on hover */
.menu2 ul li:hover ul li a:hover {
position:relative;
}

Yours:
/* style position of the links on hover */
.menu2 ul li a:hover {
position: relative;
}

If you notice above, I've bolded and colored the differences in your css and Stu's. Those are the only differences I'm seeing in your common CSS code.

It would make sense to me that this is why it's not functioning properly but of course, it also makes sense to me that the url's be different.

Jen
Pop Stalin Design
http://www.popstalin.com

ItalianMike's picture
299 pencils
ItalianMike | Sat, 2006-04-22 15:40

Stu's version had 3 seperate panes of pictures, set up in tabs. There was a DIV that contained the class "menu2" then there was an UL list and with in that list there was a second ul list containing all of the pictures. This repeated for the other two panes.

I wanted to strip these out and just retain the picture gallery ... so if you look at that code example from Stu's site it reads that when the first list is active in hover and the second list is also open and you are hovering over a link the position is relative.

Since I remove the initial list from my version I had to also remove that first set of code (ul li:hover) ... if I was to add it then the entire thing would break apart.

I'm believe that it's got something to do with the a:active command, which is used for Opera and Safari. Firefox uses a:focus and the entire thing works properlly in Firefox 1.5. I've messed around with that area but haven't gotten very far.

-------------------------------
Infinite Style

popstalin's picture
17 pencils
popstalin | Sat, 2006-04-22 16:40

I'm at a loss on this one. If you get it figured out, please post back, 'cause I'm curious what's causing the issue.

Jen
Pop Stalin Design
http://www.popstalin.com

Creativebits is a blog about creativity, design and Macs. We also have a critique section where you can post your work to get opinions and a forum to discuss any design related topics.

Recommend us on Google

Latest critique

  • Butterfingers ad campaign
  • Critique for my logo

Marketplace