Jump to content

Css Menu - Border-top Not Aligned


squaredvision
 Share

Recommended Posts

http://www.squaredvision.com/menu.zipThe menu style sheet is: jqueryslidemenurtl.cssHello how are you I'm having trouble completing the border up top on the drop down from my menu.here is what I'm getting:309iryw.gifNumber 1: the border on top is de-alignedNumber 2: that is how I want it to look like(i photoshop'ed it to show you how i want it to look like)I have been trying to get it to work, but no dice...I'm trying to make it compatible with FF and IE.Can some one take a look at my code please?Kind regards,Michael Edited by squaredvision
Link to comment
Share on other sites

yes,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">It's not validation that is the issue. It's in the CSS I think, I just need to come up with a class or manipulate a class that will give me the top border.-Michael

Edited by squaredvision
Link to comment
Share on other sites

depends. A strict DTD usually helps iron out little things like that, and validating reduces the potential inconsistencies. Always worth it as a baseline starting point, imo. At least that way you can rule out browser-"ness" and narrow it down to coding.

Link to comment
Share on other sites

Thanks. Yeah that is true.I have gotten the top border to work only for the language drop down.. but the others are still funky. I'm debugging but don't know what the problem is still...for the language drop down I have:<li><a href="#"><img src="images/us.gif" width="20" height="14" /></a> <ul> <li><div class="selectLang bordertop">Select a language:</div></li> <li class="languagedrop"><a href="#">English<div class="posflag1"><img src="images/us.gif" width="20" height="14" /></div></a></li> <li class="languagedrop"><a href="#">Spanish<div class="posflag2"><img src="images/spa.gif" width="20" height="14" /></div></a></li> <li class="languagedrop"><a href="#">Russian<div class="posflag3"><img src="images/rus.gif" width="20" height="14" /></div></a></li> <li class="languagedrop"><a href="#">German<div class="posflag4"><img src="images/ger.gif" width="20" height="14" /></div></a></li> <li class="languagedrop"><a href="#">Polish<div class="posflag5"><img src="images/pol.gif" width="20" height="14" /></div></a></li> <li class="languagedrop"><a href="#">Bulgarian<div class="posflag6"><img src="images/bul.gif" width="20" height="14" /></div></a></li> <li class="languagedrop"><a href="#">Arabic<div class="posflag7"><img src="images/uae.gif" width="20" height="14" /></div></a></li> <li class="languageborder"></li> </ul> </li>i added another class that is called: bordertop:.bordertop {border-top: 1px solid #ccc; position: relative; left: -50px;}this class does not work for the rest of the menus...hmm..

Link to comment
Share on other sites

Hey,I made a work around for the border-top problem I was having....here is the solution:I added a div with the class that has border-top: <li><div class="bordertopAboutus"></div></li> Since nothing is placed in between the LI and DIV its height is nothing, adding in the class makes it height of 1px and then you are able to position it anywhere. It works in IE and FIREFOX now flawlessly.Thanks,Michael

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...