17 replies [Last post]
ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE Adds extra line In Horizontal Menu CSS Buttons

I looked deeper Smile

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?

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

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

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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.

Shock

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 8 years 8 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

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>

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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... Laughing out loud

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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.

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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;
}

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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;
}

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

IE Adds extra line In Horizontal Menu CSS Buttons

Correction, I had not set the line height.

that did it!!

Absolutely Brilliant

thx

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 10 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

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.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 13 years 38 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

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

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ITWeb
ITWeb's picture
Offline
Regular
Last seen: 17 years 3 weeks ago
Joined: 2005-11-20
Posts: 48
Points: 0

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

Sometimes Tenacity is a Virtue
At other times, it's just a pain in the tail.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 4 years 5 weeks ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

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)