Trouble with buttons in IE

[Keleth]

I was hoping I could get some help with some CSS.

I've written a small CSS code for the links at the top of my menu. It uses a two span wrapper around a link to create a bubble around the link. It looks fine in Firefox, but I can't get it to look how I'd like it to in IE; the bottom gets cut off. I can't think of any way to fix or any hacks that seem to work. I was hoping to get some thoughts on it.

The test site is located at http://test.rhovisions.com

Thanks!

[jscheuer1]

First off, start with a valid document. Now, that probably has nothing to do with it, but it cannot be ruled out until it is fixed. The page looks virtually identical to me in IE 7, FF 2 and Opera 9.5. In IE 6, there is just a slight misalignment to left of the top section. To create a separate style for IE 6, don't use a hack, use the standard conditional comments:


<!--[if lt IE 7]>
<style type="text/css">
put styles here for IE 6 and less
</style>
<![endif]-->

or:


<!--[if lt IE 7]>
<link rel="stylesheet" href="ie6_and_less.css" type="text/css">
<![endif]-->

One or the other of these should follow your main stylesheet(s). Styles set by these will only be used by IE 6 and less. All of the styles in your main stylesheet(s) will also be used by IE 6 and less, so all you need to put in the IE 6 and less specific stylesheet are additions and changes to the main styles.

[Keleth]

Thanks for the info... I guess just to check up, because I really hope its not just me...

But in IE7, the bottom of the buttons get cut off... its hard to see, as the whole thing is very dark (I'll be brightening it up).

Another quick question: I'm relatively new, so correct me if I'm wrong, but I'm using XHTML 1.1... is that not a valid doctype? Should I use something else?

Also, I was mistaken with the word "hack". I had seen those conditional statements referred to as "CSS hacks" on other sites, and so assumed those were the hacks.

[jscheuer1]

Just about all DOCTYPES are valid. However, your document is not:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Ftest.rhovisions.com%2F

To validate with that DOCTYPE would mean (among other things like fixing the markup) serving the page as application/xhtml+xml - if you did that, IE wouldn't even parse it. Try HTML 4.01 strict or loose. You are right about the button cutoff, I didn't notice it. But, gotta run for now, this works in IE 6:


<!--[if lt IE 7]>
<style type="text/css">
#header {
position:relative;
left:10px;
}
</style>
<![endif]-->

[jscheuer1]

Back now, this looked good for IE 7:


<!--[if IE 7]>
<style type="text/css">
span.button {
position:relative;
top:-1px;
}
span.button a {
padding-bottom:3px!important;
display:inline-block;
}
</style>
<![endif]-->

[Keleth]

I can put those fixes straight into the .css right? by removing the style tags? And do I have to put them in at the end? Because when I add one (such as the IE7 fixes), it doesn't seem to make a difference if I have the relative line or not, or the top line (for span.button). Either way, it does the same thing.

EDIT: In fact, nothing seems to be working. If I put a tag of any sort, it changes how the tag works, but doesn't actually effect the tag (I just tried adding a border around the header, nothing).

My code, pasted from the bottom of my stylesheet, is



<!--if IE 7]>
#header {
border: 1px solid white;
}
<![endif]-->

[jscheuer1]

They have to be separate stylesheets. See:

http://www.dynamicdrive.com/forums/showpost.php?p=150796&postcount=2

from this thread where I stated that. You can either put them on the page after your main stylesheet link, or you can make up separate external stylesheets and link to them from within the comment areas. Either way, they still have to be after the main stylesheet link. The key concept is that this part:


<!--if IE 7]>

<![endif]-->

is seen as an HTML comment to all non-qualifying browsers, so it must be on the page.

I just looked at your source code and saw:


<link href="/styles/rhovisions.css" rel="stylesheet" type="text/css">
<!--[if IE]>
<link href="/styles/rhovisions_ie7.css" rel="stylesheet" type="text/css">
<![endif]-->

And the page is working better in IE 7, so it looks like you are getting the idea.

[Keleth]

I kept toying around with it and yah, I am understanding it better, thanks a lot.