Link problem - not lining up in FF

Dev Shed Forums Sponsor:

May 9th, 2008, 06:55 AM

toolman

Contributing User

Join Date: Jan 2004

Posts: 738

Time spent in forums: 3 Days 23 h 8 m 51 sec
Reputation Power: 5

Link problem - not lining up in FF

Hi there,

I have a drop down menu which I want to display next to another link to the right of the page (so there is a link to the far right and then the drop down to the left of the right link), however the drop down link is appearing under the far right link in FF, instead of beside it like it is in IE.

Any ideas what I have wrong?

This is my CSS:

PHP Code:


		
			
#tools{

text-align:right;

padding-right: 20px;

}



#add_business{

background-image: url('images/add_business.png');

height: 21px;

width: 156px;

float:right;

text-align:center;

padding-top: 4px;

}



#add_business a:link{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #ffffff;

text-decoration:underline;

}



#add_business a:hover{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #ffffff;

text-decoration:none;

}





#com_tools{

text-align: right;

margin-right: 200px;

margin-top: 0px;

float:right;

}





#menu ul .item{

display:none;

list-style:none;

list-style-image:none;

}



#menu ul:hover .item{

display:block;

list-style:none;

list-style-image:none;

}



#menu{position:absolute;

list-style:none;

list-style-image:none;

}

and this is my HTML:

PHP Code:


		
			
<div id="tools">





<div id="com_tools">

<div id="menu">

<ul id="item1">

<li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li>

<li class="item"><a href="#">menu item 1</a></li>

<li class="item"><a href="#">menu item 2</a></li>

<li class="item"><a href="#">menu item 3</a></li>

</ul>

</div> 

</div>



<div id="add_business"><a href="#">Add Your Business!</a></div>

</div>

May 9th, 2008, 07:12 AM

GameYin

Contributing User

Join Date: Jan 2008

Location: Whiteford, MD

Posts: 348

Time spent in forums: 3 Days 11 h 54 m
Warnings Level: 5
Reputation Power: 60

Website please. Also, try validating your page.
w3.validator.org
http://jigsaw.w3.org/css-validator/

__________________
Adwords Professional
You can give me

May 9th, 2008, 07:51 AM

toolman

Contributing User

Join Date: Jan 2004

Posts: 738

Time spent in forums: 3 Days 23 h 8 m 51 sec
Reputation Power: 5

It is currently offline

May 9th, 2008, 07:53 AM

GameYin

Contributing User

Join Date: Jan 2008

Location: Whiteford, MD

Posts: 348

Time spent in forums: 3 Days 11 h 54 m
Warnings Level: 5
Reputation Power: 60

You can still validate. Get back to us.

May 9th, 2008, 07:58 AM

essee

Contributing User

Join Date: Mar 2008

Posts: 82

Time spent in forums: 2 Days 7 h 27 m 10 sec
Reputation Power: 12

You have a stray </a> in

Code:

<li class="top">Community Tools</a> <img src="templates/images/arrow_down.gif" /></li>

Did you forget the opening tag?

Also you have the order of your floats backwards I think.

The one you want on the far right should go first, so swap them around. Then you can remove the 200px right-margin from com_tools.

At least I think thats what your after.

Edit: oh yeah, and what Gameyin said ^^

Last edited by essee : May 9th, 2008 at 08:01 AM.

May 9th, 2008, 08:14 AM

toolman

Contributing User

Join Date: Jan 2004

Posts: 738

Time spent in forums: 3 Days 23 h 8 m 51 sec
Reputation Power: 5

Thanks. I have validated the CSS and the only invalid thing is the cursor:hand

I have also made those changes essee, but the problem is still there.

This is a screenshot of what I mean: http://www.upload3r.com/serve/090508/1210338753.jpg

The IE version is the correct one.

May 9th, 2008, 08:53 AM

essee

Contributing User

Join Date: Mar 2008

Posts: 82

Time spent in forums: 2 Days 7 h 27 m 10 sec
Reputation Power: 12

Hmm it might be that it's just late here but those 2 look fairly similar to me in respect to your original post.

You have a drop down and then your link in both.

Are they the wrong way around?

Also if you've made changes to the code it will help us if you repost the new code so we don't have to look at the old code and wonder exactly what you have changed.

Last edited by essee : May 9th, 2008 at 08:54 AM. Reason: Typo - It's late OK :)

May 9th, 2008, 08:57 AM

toolman

Contributing User

Join Date: Jan 2004

Posts: 738

Time spent in forums: 3 Days 23 h 8 m 51 sec
Reputation Power: 5

If you look at the IE screenshot, the 'Community tools' Link is in line with the blue link on the right side, where as in FF, it is below that link. IE is how I want it.

This is my new CSS:

PHP Code:


		
			
#tools{

padding-right: 20px;

}



#add_business{

background-image: url('images/add_business.png');

height: 21px;

width: 156px;

float:right;

text-align:center;

padding-top: 4px;

}



#add_business a:link{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #ffffff;

text-decoration:underline;

}



#add_business a:hover{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #ffffff;

text-decoration:none;

}



#com_tools{

margin-top: 0px;

float:left;

}



a.drop:link, a.drop:visited, a.drop:active{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #61B7FF;

text-decoration:none;

}



a.drop:hover{

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #61B7FF;

text-decoration:underline;

background-color: #f6f6f6;

}



#menu ul .item{

display:none;

list-style:none;

list-style-image:none;

background-color: #ffffff;

background-repeat:repeat-x;

border-bottom: 1px dotted #dddddd;

line-height: 150%;

padding: 1px 5px 1px 1px;

margin-left: 15px;

}



#menu ul:hover .item{

display:block;

list-style:none;

list-style-image:none;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #61B7FF;

text-decoration:none;

}



#menu{position:absolute;

list-style:none;

list-style-image:none;

}



.top{

list-style:none;

list-style-image:none;

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 12px;

color: #61B7FF;

text-decoration:underline;

cursor:hand;}

and this is the new HTML:

PHP Code:


		
			
<div id="tools">



<div id="add_business"><a href="#">List Your Business!</a></div>



<div id="com_tools">

<div id="menu">

<ul id="item1">

<li class="top">Community Tools <img src="templates/images/arrow_down.gif" /></li>

<li class="item"><a class="drop" href="#"><img src="templates/images/arrow_right.gif" border="0" /> Submit Local News</a></li>

<li class="item"><a class="drop" href="#"><img src="templates/images/arrow_right.gif" border="0" /> Submit a Local Event</a></li>

<li class="item"><a class="drop" href="#"><img src="templates/images/arrow_right.gif" border="0" /> Send us Your Feedback</a></li>

<li class="item"><a class="drop" href="#"><img src="templates/images/arrow_right.gif" border="0" /> <strong>List Your Business</strong></a></li>

</ul>

</div> 

</div>





</div>

May 9th, 2008, 09:10 AM

essee

Contributing User

Join Date: Mar 2008

Posts: 82

Time spent in forums: 2 Days 7 h 27 m 10 sec
Reputation Power: 12

There is default padding and margins set on ul's (and the li's if I remember correctly) in all the major browsers. Margin on top and padding on left I think. Set margin and padding to 0 (or whatever you need).

There is also margin and padding set by default on many other elements have a read through this article
http://www.search-this.com/2007/03/...rgin-for-error/

I usually don't like using the universal selector (*) or a general rule that I copy into each stylesheet. Usually I make a rule and add things I use and that need it as I go. But it's personal preference really as long as your aware of it.

Something like

Code:

ul, h1, #something{
   margin:0;
   padding:0;
}

Last edited by essee : May 9th, 2008 at 09:16 AM.

#10

May 9th, 2008, 09:28 AM

toolman

Contributing User

Join Date: Jan 2004

Posts: 738

Time spent in forums: 3 Days 23 h 8 m 51 sec
Reputation Power: 5

Thanks, I have fixed it. Many thanks!