Border alignment issues (cross browser compatibility)

liunx · Jan 9, 2008

I am working on a web site for my university's Information Technology Department, and I have it looking the way I want in IE (5+) but not in netscape or any mozilla based browser. I would love some help with this problem! 
 
Basically I have a set of 4 or 5 links enclosed in either a or a <div> (I've tried both with the same results). The p/div has its style set to a css entry that gives it.. display: inline; border-style: solid; margin: 0 0; 
padding 0em: 0; top: 0; border-width: 2px; border-color: #000000; width: 
"100%" 
 
and in IE it appears as a box with 4 to 5 links in it. In Mozilla based browsers there is no "box" as the border does not cover the entire enclosed area but instead, each link has borders around it. So the net effect is a white area with 4 to 5 links in it, each wich have boxes around them. 
 
I'll post the seemingly relevant code below and to see the website in action goto <a class="postlink" href="http://students.spsu.edu/btate2/wws/">http://students.spsu.edu/btate2/wws/</a> 
 
Thanks so much for any help! 
 
Bryce 
 
// Relevant CSS code 
 
div.greenFolder { display: inline; border-style: solid; margin: 0 0; 
padding: 0em; top: 0; border-width: 2px; border-color: #006600; width: 
"100%"} 
 
 
// Relevant HTML code 
 
<IMG SRC = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"itlabInfo.png" HEIGHT=16 BORDER=0 ALT="ITLab Information" onclick="ChangeFolder('itLabInfo')"><div class=greenFolder id="itLabInfo"> 
<IMG SRC = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"bull.gif" ALT=""> <A HREF = "labHours.html">Hours</A> 
<IMG SRC = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"bull.gif" ALT=""> <A HREF = "labResources.html">Resources</A> 
<IMG SRC = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"bull.gif" ALT=""> <A HREF = "studentSchedule.html">Lab Assistant Schedules</A> 
<IMG SRC = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"bull.gif" ALT=""> <A HREF = "student_application.html" onclick="Settings(genInfo.style.display)">Lab Assistant Application</A> 
<IMG SRC = <a class="postlink" href="http://www.htmlforums.com/archive/index.php/">http://www.htmlforums.com/archive/index.php/</a>"bull.gif" ALT=""> <A HREF = "survey.html">Suggestion Box</A> 
</div> 
 
 
<a class="postlink" href="http://students.spsu.edu/btate2/wws/">http://students.spsu.edu/btate2/wws/</a>First up I don't think you should upset the DISPLAY value if you are having problems. Change the tag from DIV to SPAN if you want the tag to be INLINE. 
 
Netscape 4.x has problems with inheritance, and since Netsacpe is basicly Mozilla stock I would steer clear of changeing this till you get the problem sorted. 
 
The TOP CSS VALUE is fairly flawed and still has problems in CSS 2.0. 
 
Try this line, maybe it will work as a FLOAT. 
 
span.greenFolder {float: left; border-style: solid; margin: 0 0; padding: 0em; top: 0; border-width: 2px; border-color: #006600; width: "100%"} 
 
Let me know if you have any luck.I would test it, but no Mozilla stock to test on yet, new computer and haven't got round to it. Sorry.

Border alignment issues (cross browser compatibility)

liunx

Guest