2 replies to this topic

[bbqroast]

Ok this is weird,

<div id='buttonBar'>


<span id='home' class='button' onMouseOver='mouseOver("home");' onMouseOut='mouseLeave("home");' onClick='location.href="/";'>Home</span><span id='downloads' class='button' onMouseOver='mouseOver("downloads");' onMouseOut='mouseLeave("downloads");' onClick='location.href="/downloads/";'>Downloads</span><span id='projects' class='button' onMouseOver='mouseOver("projects");' onMouseOut='mouseLeave("projects");' onClick='location.href="/projects/";'>Projects</span><span id='blog' class='button' onMouseOver='mouseOver("blog");' onMouseOut='mouseLeave("blog");' onClick='location.href="/blog/";'>Blog</span><span id='about' class='button_end' onMouseOver='mouseOver("about");' onMouseOut='mouseLeave("about");' onClick='location.href="/about/";'>About</span> </div>

Here we have my HTML for the button bar, excuse all the Javascript functions.

#buttonBar	{

	border-top: 1px solid #DDDDDD;

	border-bottom: 1px solid #DDDDDD;

	padding: 0px;

	margin: 0px;

	text-align: center;

	float: left;

}

.button	{

	background-color: #FFFFFF;

	border-left: 1px solid #DDDDDD;

	padding: 0px;

	margin: 0px;

	font-size: 32px;

	font-style: verdana;

	padding-left: 20px;

	padding-right: 20px;

	cursor: pointer;

}

On IE surprisingly this makes a smooth layout, however on Chrome a pixel appears in between the bottom border of the button bar and the bottom of the buttons. This also happens on Firefox, except the pixel appears up top. When the background is toggled it also leaves a 1 pixel gap.

Luckily it isn't too noticeable... So does anyone know a fix to this issue?

Pictures (pointer not shown):
 Chrome.jpg   8.37K   13 downloads
Chrome, notice the pixel of nothing in between the bottom line and vertical lines + background.
 Firefox.jpg   8.04K   10 downloads
Firefox, notice the same but at the top.
 IE.jpg   8.18K   13 downloads
IE, how it is meant to look.

[WingedPanther]

Are you using a CSS Reset? Different browsers have different defaults for elements.

CSS Tools: Reset CSS

[wim DC]

Would border-collpase: collapse; have an effect? .. or is that a table only thingy.. not sure.
In chrome it has something to do with display: block; of the <div>.
Using display: inline; for example gets rid of it.