horizontal list

sudhakararaog

12-26-2009, 05:54 AM

please look at the example at this link

http://sudhakargolakaram.co.in/horizontallist.html

my question is about the 1st horizontal list, i want the list to look like the 2nd list

when i created the 1st list i noticed that for few links the border-right of white color i have given is not stretching like the other 3 links which have few words.

i need the list to look like it is in the Second list

if i use height value for the list ie6 has an issue with that.

so as a workaround in the 2nd list for all the links where the right border was not extending like the other links, i created a class and give this class an extra bottom padding for all these links and for the links which had the extended right border i did not use any class

so this worked fine, in case of the first list is there a way i can change my code so that all the links will have an equal height of the right border

please advice.

thanks.

vineet

12-26-2009, 06:33 AM

check this and tell what ie6 says. also check in any other browser you want.

<!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"><head>

<title>Homepage Jobs@Last</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
font: normal 12px Arial, Helvetica, sans-serif;
background: #fff;
color: #000;
}
.clear {
clear: both;
}
.break {
clear: both;
}

#wrapper {
width: 750px;
margin: 0 auto;
}

#topmenu1{
float: left;
width: 750px;
height: auto;
background: #4883f2;
}
#topmenu1 .menu1{
float: left;
width: 750px;
height: auto;
}
#topmenu1 .menu1 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#topmenu1 .menu1 ul li {
display: inline;
float: left;
margin: 0 5px 0 0;
padding: 0 0px 0 0px;
border-right:1px solid #FFFFFF;
height:30px;
padding: 10px 20px 5px 16px;
}

#topmenu1 .menu1 ul li a {
color: #000;
font-weight: bold;
text-decoration: none;
text-align: center;
background: #4883f2;
display: block;
/* height: 35px; */
margin: 0px;

}
#topmenu1 .menu1 ul li.aboutus {
border-right: none;
}

/*#topmenu1 .menu1 ul li a.toplist {
padding: 10px 20px 5px 12px;
}*/

#topmenu1 .menu1 ul li a:hover {
text-decoration: underline;
}
.menu1 ul li{
cursor: pointer;
}

#topmenu2{
float: left;
width: 750px;
height: auto;
background: #4883f2;
}
#topmenu2 .menu2{
float: left;
width: 750px;
height: auto;
}
#topmenu2 .menu2 ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#topmenu2 .menu2 ul li {
display: inline;
float: left;
margin: 0 5px 0 0;
padding: 0 0px 0 0px;
border-right: 1px solid #fff;
}

#topmenu2 .menu2 ul li a {
color: #000;
font-weight: bold;
text-decoration: none;
text-align: center;
background: #4883f2;
display: block;
/* height: 35px;
*/ margin: 0 1px 0 0;
padding: 10px 20px 20px 17px;
}
#topmenu2 .menu2 ul li.aboutus {
border-right: none;
}

#topmenu2 .menu2 ul li a.toplist {
padding: 10px 20px 5px 12px;
}

#topmenu2 .menu2 ul li a:hover {
text-decoration: underline;
}
.blueborder {
clear: both;
border-bottom: 5px solid #5b32ff;
}

.menu2 ul li{
cursor: pointer;
}
</style>
</head><body>
<div id="wrapper">
<br><br><br>
First List
<div id="topmenu1">
<div class="menu1">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Job Search</a></li>
<li><a href="#">Advertisers and <br>Employers</a></li>
<li><a href="#">Immigration <br>Resources</a></li>
<li><a href="#">Education and <br>Training</a></li>
<li><a href="#">Contact Us</a></li>
<li class="aboutus"><a href="#">About Us</a></li>
</ul>
</div>

</div>

<div class="blueborder"></div>

<br><br><br>
Second List
<div id="topmenu2">
<div class="menu2">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Job Search</a></li>
<li><a href="#" class="toplist">Advertisers and <br>Employers</a></li>
<li><a href="#" class="toplist">Immigration <br>Resources</a></li>
<li><a href="#" class="toplist">Education and <br>Training</a></li>
<li><a href="#">Contact Us</a></li>
<li class="aboutus"><a href="#">About Us</a></li>
</ul>
</div>

</div>

<div class="blueborder"></div>

</div>


</body></html>

vineet

sudhakararaog

12-27-2009, 07:18 AM

thanks for replying

the code you mentioned worked in all browsers
you have specified height for
#topmenu1 .menu1 ul li {
height: 30px;
}
whereas i specified for
#topmenu1 .menu1 ul li a {
height: 30px;
}

however i checked the output in many browsers
the code works fine in ie6 ie 7 firefox and opera, in chrome and safari the last list item was starting in a new line so i had to reduce the left padding

from padding: 10px 20px 5px 16px; to

#topmenu1 .menu1 ul li {
padding: 10px 20px 5px 14px;
}

because chrome and opera were not be to adjust to 16px like other browsers
can a style sheet for these 2 browsers be written exclusively, either an external one or embedded style

please advice

thanks

vineet

12-27-2009, 07:45 AM

instead of 16px make it 15px;

#topmenu1 .menu1 ul li {
display: inline;
float: left;
margin: 0 5px 0 0;
padding: 0 0px 0 0px;
border-right:1px solid #FFFFFF;
height:30px;
padding: 10px 20px 5px 15px;
}

i have check it with 15px and it works fine in chrome and opera.

which opera version are you using.

vineet

sudhakararaog

12-28-2009, 12:50 AM

the issue was with chrome and opera

chrome version = 3.0
safari version = 3.2.3

i have also tried with 15px now it works in chrome but not in safari, for safari i have to use 14px

also without making this too complicated, one question as you noticed in my code for the last list item i have given a class so that the last list item does not have a right border, this last list item appears as a link based on the left and right padding
#topmenu2 .menu2 ul li a {
padding: 10px 20px 20px 15px;
}

due to this a small portion after this list until the right edge of this containing div when i move the mouse a hyperlink does not appear as the padding is not stretching till the right edge of the div

is it possible to have the last list item appear as a hyperlink until the right edge of the containing div

thanks