Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Multiple Lists & URLs

Status
Not open for further replies.
badley

badley

Technical User
Dec 20, 2002
75
GB
I've seen this problem before, however never bothered to solve it.

I have a page with two div's each with a unordered list, as follows:

<div id = 'list_menu'>
<ul>
<li><a href ="menu1.php">
<span class = "thumbnail"><img src = "images/png/list_menu.png"></span>
<span class = "title">Menu Title 1</span></a></li>
<li><a href ="menu2.php">
<span class = "thumbnail"><img src = "images/png/list_menu.png"></span>
<span class = "title">Menu Title 2</span></a></li>
<li><a href ="menu3.php">
<span class = "thumbnail"><img src = "images/png/list_menu.png"></span>
<span class = "title">Menu Title 3</span></a></li>
<li><a href ="menu4.php">
<span class = "thumbnail"><img src = "images/png/list_menu.png"></span>
<span class = "title">Menu Title 4</span></a></li>
</ul>
</div>


<div id='list'>

<ul>
<li><a href "test1.php" target = "_blank">
<span class = "thumbnail"><img src = "images/png/list.png"></span>
<span class = "title">Title 1</span>
<span class = "description">Description 1</span></a></li>
<li><a href "test2.php" target = "_blank">
<span class = "thumbnail"><img src = "images/png/list.png"></span>
<span class = "title">Title 2</span>
<span class = "description">Description 2</span></a></li>
<li><a href "test3.php" target = "_blank">
<span class = "thumbnail"><img src = "images/png/list.png"></span>
<span class = "title">Title 3</span>
<span class = "description">Description 3</span></a></li>
</ul>
</div>

The problem I am having is when I mouse-over an item in the 'list' div it shows the 'list_menu' div item URL. Not only that the 'list_menu' item 2 URL is the only url echoed in all the 'list' items. Therefore, I never see any test*.php URL's

All very odd, not sure if the CSS is the issue. Any help would be greatly appreciated

Thanks in advance
 
Sort by date Sort by votes
CSS as follows:

***************************

#list_menu
{
FONT-FAMILY: verdana;
POSITION: absolute;
FLOAT: left;
MARGIN-TOP: 60px;
MARGIN-LEFT: 0px;
Z-INDEX: 4
}
#list_menu UL
{
MARGIN-LEFT: 0px;
MARGIN-TOP: 0px;
MARGIN-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
TEXT-ALIGN: left
}
#list_menu UL LI
{
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
WIDTH: 255px;
HEIGHT: 60px
}
#list_menu UL LI A
{
MARGIN-RIGHT: 10px;
PADDING: 0px 0px 0px 0px;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: none
}
#list_menu UL LI A .thumbnail
{
DISPLAY: inline;
LIST-STYLE: none
}
#list_menu UL LI A .thumbnail IMG
{
MARGIN-RIGHT: 50px;
POSITION: static;
FLOAT: left;
WIDTH: 255px;
HEIGHT: 50px;
BORDER: 0px none
}
#list_menu UL LI A .title
{
POSITION: static;
FLOAT: left;
WIDTH: 205px;
MARGIN-TOP: -45px;
MARGIN-LEFT: 20px;
FONT-SIZE: 15px;
TEXT-ALIGN: center;
MARGIN-BOTTOM: 0px;
FONT-WEIGHT: bold;
COLOR: #000000;
HEIGHT: 20px
}

****************************

#list
{
FONT-FAMILY: verdana;
POSITION: absolute;
FLOAT: left;
MARGIN-TOP: 60px;
MARGIN-LEFT: 256px;
Z-INDEX: 5
}
#list UL
{
MARGIN-LEFT: 0px;
MARGIN-TOP: 0px;
MARGIN-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
TEXT-ALIGN: left
}
#list UL LI
{
MARGIN-TOP: 0px;
MARGIN-LEFT: 0px;
MARGIN-RIGHT: 0px;
PADDING-LEFT: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
WIDTH: 1025px;
HEIGHT: 60px
}
#list UL LI A
{
MARGIN-RIGHT: 10px;
PADDING: 0px 0px 0px 0px;
MARGIN-BOTTOM: 0px;
MARGIN-TOP: 0px;
TEXT-DECORATION: none
}
#list UL LI A .thumbnail
{
DISPLAY: inline;
LIST-STYLE: none
}
#list UL LI A .thumbnail IMG
{
MARGIN-RIGHT: 50px;
POSITION: static;
FLOAT: left;
WIDTH: 1025px;
HEIGHT: 50px;
BORDER: 0px none
}
#list UL LI A .title
{
POSITION: static;
FLOAT: left;
WIDTH: 995px;
MARGIN-TOP: -45px;
MARGIN-LEFT: 15px;
FONT-SIZE: 15px;
TEXT-ALIGN: left;
MARGIN-BOTTOM: 0px;
FONT-WEIGHT: bold;
COLOR: #000000;
HEIGHT: 20px
}
#list UL LI A .title:hover
{
TEXT-DECORATION: underline
}
#list UL LI A .description
{
POSITION: static;
FLOAT: left;
WIDTH: 995px;
MARGIN-TOP: -25px;
MARGIN-LEFT: 15px;
FONT-SIZE: 15px;
TEXT-ALIGN: left;
MARGIN-BOTTOM: 0px;
FONT-WEIGHT: normal;
COLOR: #000000;
HEIGHT: 20px
}

**************************
 
Upvote 0 Downvote
Thanks for the help, I was missing the '=' from the list 'a href = "URL"' DOH!!!
 
Upvote 0 Downvote
Well - this isn't valid CSS, for starters:

Code: 
****************************

Perhaps making sure both your HTML and CSS validate would be a good start. Failing that, I still think a URL is the way to go , as there's so much you're not giving us (the DOCTYPE, for example).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
the ************ was just for the post
 
Upvote 0 Downvote
Right. Of course, I should have known. Perhaps using [ignore]
Code:
[/ignore] tags next time you post code would help?

In fact, giving more information generally would, especially that which pertains to the problem in hand (mouse over code, in this example).

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Are you using javascript to "show the url"?
The problem lies there.




--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
No PHP & XML, I just gave you the htm output.

Works well now, thanks anyway
 
Upvote 0 Downvote
I just gave you the htm output.
Click to expand...
No, you gave part of it. And part of the CSS. And then said some bits of the CSS weren't really there.

Next time, provide the full code for the page (included inside [ignore]
Code:
[/ignore] tags) and then people will be able to tell you exactly what is wrong as opposed to trying to guess what you can see on your screen.


-------------------------------------------------------

Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]
[URL unfurl="true"]http://mdssolutions.co.uk[/url] - Delivering professional ASP.NET solutions
[URL unfurl="true"]http://weblogs.asp.net/marksmith[/url]
 
Upvote 0 Downvote
The problem I am having is when I mouse-over an item in the 'list' div it shows the 'list_menu' div item URL
Click to expand...

There is nothing in the code you supplied that will do that, nor can it be done with PHP or XML.

Unless you are referring to the title attribute of the links (or the alt attribute of images in IE) then nothing will show when you mouse-over without the use of Javascript.

My guess is that you are talking about the browser's default tooltip that is populated by the title attribute of a link. In which case, the error was in your PHP and you were writing the wrong value in the title attribute when building the lists.

If you were talking about the tooltip created by an alt attribute then only IE will show that, it won't show anything in other browsers.

--
Tek-Tips Forums is Member Supported. Click Here to donate

<honk>*:O)</honk>

Tyres: Mine's a pint of the black stuff.
Mike: You can't drink a pint of Bovril.

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
Carlvic
  • Locked
  • Question
Web Development Tools, Plugins &amp; Etc Suggestions 1
Replies
4
Views
106
ChrisHirst
ChrisHirst
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
169
Katerine
Katerine
1DMF
  • Locked
  • Question
IE 11 Compat Mode &amp; @font-face with woff 1
Replies
4
Views
108
1DMF
1DMF
1DMF
  • Locked
  • Question
CSS &amp; Checkboxes 1
Replies
13
Views
103
Borvik
Borvik

Part and Inventory Search

Sponsor

Back
Top