squaredvision Posted December 4, 2009 Share Posted December 4, 2009 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:Number 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 Link to comment Share on other sites More sharing options...
thescientist Posted December 5, 2009 Share Posted December 5, 2009 is it possible to just post the code? Link to comment Share on other sites More sharing options...
squaredvision Posted December 7, 2009 Author Share Posted December 7, 2009 I posted the code in ZIP format. http://www.squaredvision.com/menu.zipThe menu style sheet is: jqueryslidemenurtl.cssKind regards,Michael Link to comment Share on other sites More sharing options...
thescientist Posted December 7, 2009 Share Posted December 7, 2009 does everything validate? what type of DTD are you using? Link to comment Share on other sites More sharing options...
squaredvision Posted December 7, 2009 Author Share Posted December 7, 2009 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 Link to comment Share on other sites More sharing options...
thescientist Posted December 7, 2009 Share Posted December 7, 2009 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 More sharing options...
squaredvision Posted December 7, 2009 Author Share Posted December 7, 2009 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 More sharing options...
thescientist Posted December 8, 2009 Share Posted December 8, 2009 border-style has to be set before any other border attributes will take hold.http://www.w3schools.com/css/css_border.asp Link to comment Share on other sites More sharing options...
roundcorners Posted December 9, 2009 Share Posted December 9, 2009 Just a little pointer, you cannot nest a div element inside an anchor element. Can't be sure but that could very well be affecting the design. See how important it is to validate your code? Link to comment Share on other sites More sharing options...
squaredvision Posted December 9, 2009 Author Share Posted December 9, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.