PDA

View Full Version : li display issue with Chrome


Corrosive
04-18-2009, 02:35 PM
Hi troops

Chrome doesn't seem to recognise top and bottom padding in list items. Anyone know why or how to overcome??

First bug I have found but it is breaking my design!! :x

d a v e
04-18-2009, 03:21 PM
got a link?

Corrosive
04-18-2009, 03:35 PM
got a link?

Yep,

http://steelpress.net/projects/fod_trader/index2.htm

I've actually got it to display OK in Chrome and Firefox 3 with some messing about. Yet to test it in earlier versions but now I'm getting a white gap between the tab and the green bar in IE :(

You'll see what I mean by the green 'selected' tab on the menu.

Any ideas??

Cary
04-18-2009, 09:58 PM
Try the following code. I disabled the IE specific style sheet when I did this so it wouldn't affect anything. It will probably mess up IE if you leave it unmodified.

So these are the bits I changed...

Removed the div around the menu:

<ul id="nav_bar">
<li class="tab"><a href="#">Home</a></li>
<li><a href="#">Towns</a></li>
<li><a href="#">Classifieds</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Contact Us</a></li>
</ul>


#nav_bar {
margin: 0px;
padding: 50px 0px 0px 310px; /* 50px instead of 58px */
background-image: url(../images/banner_nav.jpg);
background-repeat: no-repeat;
height: 30px; /* allow room for tab background image */
width: 490px;
background-attachment: scroll;
background-position: center;
}
.bar {
background-color: #05410E;
width: 740px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
position: relative;
margin-left: 20px;
color: #FFFFFF;
font-weight: bold;
font-size: 12px;
clear: both; /* to clear the floated nav bar */
}
#nav_bar li {
padding-right: 15px;
padding-left: 15px;
font-size: 14px;
font-weight: bold;
list-style-type: none;
height: 19px; /* 19+11=30 */
padding-top: 11px;
float: left; /* instead of display:inline */
}
.tab {
background-attachment: scroll;
background-image: url(../images/tab3.jpg);
background-repeat: no-repeat;
background-position: center bottom;
}
/* I added this one */
#nav_bar a {
white-space: nowrap; /* to prevent "Contact Us" from wrapping */
}

Corrosive
04-19-2009, 12:38 PM
Hats off to you Cary. That is working nicely cross-browser and I have even been able to rid of the IE specific style sheet. Nice one & thank you :)

http://steelpress.net/projects/fod_trader/index3.htm

You are a scholar and a gentleman. 8-)

Cary
04-19-2009, 05:48 PM
Your welcome:)