Mon, 2005-11-21 00:13
CSS is great! But, compatibilites issues between Firefox, Netscape and IE are not.
I've got a two lines of CSS buttons that work just fine in Firefox and Netscape but IE adds an extra line between them. Ahhhhhhhhh!
It's driving me nuts! I can't find any info anywhere on the web about this except something at MS that says to remove all white space in the code to avoid additional lines. Well, that does nothing.
Take a look at let me know what you think could solve it:
http://www.itweb.com/test/buttons.htm
That's a test file with the CSS within it. I've also attached it if you would like.
Thanks guys!
IT
Mon, 2005-11-21 02:11
#1
IE Adds extra line In Horizontal Menu CSS Buttons
IE does lots of "funny" stuff that takes getting used to. I didn't check exactly what is going on here, but ...
Try removing the <br> element and assigning a style of clear:both to button9. Or better still place all the buttons in a container and give it a width sufficient to hold 8 buttons across but not 9.
Mon, 2005-11-21 02:25
#2
IE Adds extra line In Horizontal Menu CSS Buttons
"Or better still place all the buttons in a container and give it a width sufficient to hold 8 buttons across but not 9."
Absolutely, that is what I've done. With or without the <br> makes no difference. Will try the style:clear approach and see what happens.
thx
Mon, 2005-11-21 02:45
#3
IE Adds extra line In Horizontal Menu CSS Buttons
I looked deeper 
When overflow is visible (the default) IE treats height pretty much as min-height. That is, if the content needs more space, IE will give it more space. The extra blank line is the space for the span which you are shifting up to be the button label. Position:relative, shifts an element by the specified offset, but leaves the original space behind in the flow. To IE that means the content is there and it expands the element's height to include it. Set overflow:hidden on the .cssnav to fix things.
Also your doctype is incomplete, you also need a url pointing to the dtd.
Is there are reason you are using the method you are to handle the buttons, rather than say, altering the background-image on hover?
Mon, 2005-11-21 02:47
#4
IE Adds extra line In Horizontal Menu CSS Buttons
ITWeb wrote:
With or without the <br> makes no difference. Will try the style:clear approach and see what happens.
I noticed that you have an incomplete doctype. That may be your issue.
- r
Mon, 2005-11-21 03:26
#5
IE Adds extra line In Horizontal Menu CSS Buttons
"Is there are reason you are using the method you are to handle the buttons, rather than say, altering the background-image on hover?"
Sort of, I am new to CSS and am converting an existing site. Those buttons have two graphics for each button. And, I like the buttons... and... I found some code via Google that used them. So, I clipped it.
I think altering the background image simply overlays a transparent color that might not look as good.
That is what little I know.
Mon, 2005-11-21 03:47
#6
IE Adds extra line In Horizontal Menu CSS Buttons
Rather than try and explain what Chris is getting at and what you're doing wrong, I'm just going to post an example of code that involves far less markup than what you have and which uses the method Chris is talking about (because I think it'll be easier this way):
<style media="screen" type="text/css">
.menu {
height: 44px;
width: 750px;
position: block;
}
.cssnav {
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
margin: 1px;
padding: 0;
float: left;
}
.cssnav a {
color: #ffffff;
font-size: 12px;
padding-top: 2px;
display: block;
width: 91px;
height: 20px;
background: url(buttons_down.jpg) no-repeat;
text-decoration: none;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.cssnav a:hover { background: url(buttons_up.jpg); no-repeat; }
</style>
<body>
<div class="menu">
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
<div class="cssnav"><a href="http://www.mydomain.com" title="1">Button1</a></div>
</body>
Mon, 2005-11-21 04:04
#7
IE Adds extra line In Horizontal Menu CSS Buttons
WOW VERY VERY COOL.
CSS ROCKS
I am not sure I completely understand, but I am going to take a closer look and figure it out!
Thanks... 
Mon, 2005-11-21 13:14
#8
IE Adds extra line In Horizontal Menu CSS Buttons
Code works great. There is a small difference between Firefox and IE. In Firefox the background hover image somehow is about 2 pixels greater in height than it is IE. How odd?
But a small price to pay for an easy solution. I guess IE may never render anything correctly.
Thanks.
Mon, 2005-11-21 13:31
#9
IE Adds extra line In Horizontal Menu CSS Buttons
ITWeb wrote:
Code works great. There is a small difference between Firefox and IE. In Firefox the background hover image somehow is about 2 pixels greater in height than it is IE. How odd?
But a small price to pay for an easy solution. I guess IE may never render anything correctly.
Thanks.
Actually, the problem is in both IE and Firefox the same. Seems the padding-top: 2px; that sets the type into the middle of the block. it also expands the background image. Hmmm,... must be a different way to verticle center the text within the block.
IT
Mon, 2005-11-21 14:50
#10
IE Adds extra line In Horizontal Menu CSS Buttons
set the line-height to the same height as the button and use vertical-align: middle.
.cssnav {
line-height: 20px;
}
.cssnav a {
vertical-align: middle;
}
Mon, 2005-11-21 15:09
#11
IE Adds extra line In Horizontal Menu CSS Buttons
First thing I tried. Finally put it in all elements:
.menu {
height: 44px;
width: 750px;
position: block;
}
.cssnav {
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
margin: 1px;
padding: 0;
float: left;
text-align: center;
vertical-align: middle;
}
.cssnav a {
color: #ffffff;
font-size: 12px;
display: block;
width: 91px;
height: 20px;
background: url(buttons_up.jpg) no-repeat;
text-decoration: none;
font-weight: bold;
text-align: center;
vertical-align: middle;
}
.cssnav a:hover {
background: url(buttons_down.jpg);
no-repeat;
width: 91px;
height: 20px;
text-align: center;
vertical-align: middle;
}
Mon, 2005-11-21 15:12
#12
IE Adds extra line In Horizontal Menu CSS Buttons
Correction, I had not set the line height.
that did it!!
Absolutely Brilliant
thx
Mon, 2005-11-21 15:17
#13
IE Adds extra line In Horizontal Menu CSS Buttons
it only needs to go on the .cssnav a element rule. The .cssnav a rule still applies when the mouse cursor is hovered over the element. Its just the :hover rule applies too and if the two have any conflicts the :hover rule will win out. So you don't need to duplicate styles in the a:hover that already occur in the a.
e.g. this is enough
.cssnav a:hover {
background-image: url(buttons_down.jpg);
}
/edit
also, there is no "position:block". I suspect "display:block" is intended. That is the default value for <div> elements, so its not necessary anyway.
Mon, 2005-11-21 16:20
#14
IE Adds extra line In Horizontal Menu CSS Buttons
http://www.itweb.com/test/buttons.htm
If this is still the link you are using to show your test buttons. You still need a complete doctype.
- r
Mon, 2005-11-21 20:08
#15
IE Adds extra line In Horizontal Menu CSS Buttons
Thanks Ragamuffin,
The example has not been updates. I added it on the real one.
CSS is slick, not that I have it down yet.
Now working on the structure layout. 2 column fixed with header and footer.
IT
Tue, 2005-11-22 17:43
#16
IE Adds extra line In Horizontal Menu CSS Buttons
HAH. This is very very good.
Have one question left. It is easy - unless of course you don't know the answer like I don't.
I am trying to find out how to center the hole menu bar on a page. Now it float left. The only way I know is to add an offset from the left. Seems there must be someway to center the whole div like you would a table, but I can find it nowhere.
Anyone know how to do this?
IT
Tue, 2005-11-22 17:53
#17
IE Adds extra line In Horizontal Menu CSS Buttons
Hi
Providing the container for the buttons has a width, you can set its margin to margin:0 auto;
Trevor
(PS, IE5 will need whatever div contains the one you apply the margin to to have text-align:center, which you then have to reverse on the div containing the buttons by text-align:left, if necessary)