12 replies [Last post]
jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 28 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

I have 3 buttons on the right hand side of my navigation for MySpace, Facebook, and YouTube. They line up just fine in Firefox and Safari, however in IE they really get screwed up.

Link to site: www.mutineermagazine.com

Here is a screenshot from IE:

HTML:
Link to navigation file: http://www.mutineermagazine.com/library/includes/navigation.php

<div id="navigation">
&nbsp;
<a class="blog" href="http://www.mutineermagazine.com/blog" title="Blog">Blog</a>
<a class="bookstore" href="http://www.mutineermagazine.com/bookstore.php" title="Bookstore">Bookstore</a>
<a class="forum" href="http://www.mutineermagazine.com/phpBB3" title="Forum">Forum</a>              
<a class="subscribe" href="http://www.mutineermagazine.com/subscribe.php" title="Subscribe">Subscribe</a>
<a class="magazine" href="http://www.mutineermagazine.com/currentissue.php" title="Magazine Current Issue">Magazine</a>
<a class="downloads" href="http://www.mutineermagazine.com/downloads.php" title="Downloads">Downloads</a>
<a class="links" href="http://www.mutineermagazine.com/links.php" title="Links">Links</a>
<a class="press" href="http://www.mutineermagazine.com/press.php" title="Press">Press</a>
<a class="about" href="http://www.mutineermagazine.com/about.php" title="About Us">About</a>
<a class="contact" href="http://www.mutineermagazine.com/contact.php" title="Contact Us">Contact</a>
<a class="youtube" href="http://www.youtube.com/user/MutineerMag" title="YouTube" target="_blank">YouTube</a>
<a class="facebook" href="http://www.facebook.com/pages/Los-Angeles-CA/Mutineer-Magazine/25415799768" title="Facebook" target="_blank">Facebook</a>
<a class="myspace" href="http://www.myspace.com/winemutineer" title="Myspace" target="_blank">Myspace</a>
 
 
<img src="http://www.mutineermagazine.com/img/ontour.gif" align="bottom" alt="Mutineer On Tour!" style="border-top:#981C1E 1px solid; height:200px; margin-top:3px;" />
</div>

CSS:
Link to CSS file: http://www.mutineermagazine.com/library/css/structure.css

#navigation {background:#FFFFFF; border:#981C1E 1px solid; border-top:0px!important; border-bottom:0px!important; height:233px; margin:0 auto; padding-bottom:10px; width:900px;}
 
#navigation a {border-bottom:0px; display:block; float:left; height:18px; margin:0px, 0px, 0px, 3px; text-indent:-999999px;}
 
#navigation a.myspace {background:url(<a href="http://www.mutineermagazine.com/img/myspace.png" rel="nofollow">http://www.mutineermagazine.com/img/myspace.png</a>) no-repeat; height:23px!important; float:right!important; width:23px;}
#navigation a.myspace:hover {background-position:0 -23px;}
 
#navigation a.facebook {background:url(<a href="http://www.mutineermagazine.com/img/facebook.png" rel="nofollow">http://www.mutineermagazine.com/img/facebook.png</a>) no-repeat; height:23px!important; float:right!important; width:25px;}
#navigation a.facebook:hover {background-position:0 -23px;}
 
#navigation a.youtube {background:url(<a href="http://www.mutineermagazine.com/img/youtube.png" rel="nofollow">http://www.mutineermagazine.com/img/youtube.png</a>) no-repeat; height:23px!important; float:right!important; width:25px;}
#navigation a.youtube:hover {background-position:0 -23px;}

Thanks in advance for the help!!

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 14 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Start by learning how to

Start by learning how to validate your code, both CSS and particularly html. CSS is predicated upon the html it is applied to being valid. You have 91 html markup errors including multiple use of the same ID on the same page. There is no CSS standard for invalid html.

You are dealing with computers here. They do not know what you want, they can only do what you tell them to do, and you have to tell them in the language they understand.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 28 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

I know how to validate code.

I know how to validate code. I am already aware of those errors. Those markup errors are caused by a Wordpress plugin. I've emailed the author already in regards to those errors.

Plugin: http://calevans.com/view.php/page/notable

There is an ID for each icon in the blog post. The ID's are displayed numerous times on a single page because there is numerous posts on a single page.

Anyways... back to the problem I am having. I don't want this thread to get derailed by a Wordpress plugin.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 14 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, multiple Ids on one

Well, multiple Ids on one page are still illegal no matter what the reason may be, and there is still no CSS standard for invalid html no matter what the reasons for it are.

So often merely getting the html valid fixes problems that people are rather reluctant to wade through reams of invalid code looking for a problem that could be fixed with some validation. At least when the code is valid we know that it's worth looking for the cause.

Wordpress doesn't have to put out invalid code - I know because I run a Wordpress site that validates. If a plugin produces invalid html then it's not a plugin that belongs in a public page so far as I am concerned.

Now you could disable that plugin and show us the code without it. Does the problem go away or is it still there?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 28 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

Removed Wordpress plugin.

Removed Wordpress plugin. Validates just fine now, but still having the problems in IE.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 14 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

How do you know the CSS

How do you know the CSS error that remains is not the cause?

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.mutineermagazine.com%2Fblog%2F

Particularly since the items that don't work are inside that element?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I went to the page, and was

I went to the page, and was disappointed that not a single stitch of content was available to me without letting who-knows-what scripts in : ( Bah! Scripts enhance a page; they do not MAKE a page.

I usually get issues with IE and this technique, although you're doing it much differently than I do. Usually, to better see what's going on in the browsers where I don't have mah toolz, I give things ugly hotdog colour backgrounds. Like, I see in FF that the last three really are floated right, and their order is switched (like it should). But in your screenshot they're also not in the right order... so possibly the float isn't kicking in or the myspace (the foot?) is dropping down. Giving the elements background colours might help see what's going on.

With the technique I use, the issue is always the text pushing things away from where they should be. overflow:hidden doesn't work in IE (not for text limiting anyway) so you might need one of those IE-only break-word or text-overflow or something to clip the length of the text you're hiding. Possibly longer text can force someone to be bumped out of line and wrap down.

I'm no expert, but I fake one on teh Internets

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 28 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

Ed Seedhouse wrote:How do

Ed Seedhouse wrote:

How do you know the CSS error that remains is not the cause?

http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww.mutineermagazine.com%2Fblog%2F

Particularly since the items that don't work are inside that element?

OK, you got me on that one. I hadn't validated CSS before. I went through and validated all my CSS though. Everyone is validated now and I am still receiving the same problem. For some reason the 'k' from Facebook (my link title) is displaying on the page as well.

Stomme poes wrote:

I went to the page, and was disappointed that not a single stitch of content was available to me without letting who-knows-what scripts in : ( Bah! Scripts enhance a page; they do not MAKE a page.

I am not 100% sure what you mean by this. I have a total of 5 JavaScript files on the site. Three are to handle a subscription form. One is to handle the collapsible div on the main page (News section). And the last one is to handle the ibox (Lightbox with HTML). I didn't think that was very many. Am I wrong?? :blushing:

I am going to dink around for a bit and use some of the tips Stomme poes said. I'll note any success I have in here, which will probably be none. Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 14 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

If your page relies on

If your page relies on scripts for basic useability it is not going to work for a certain percentage of folks who turn javascript off for security reasons. There is a surprisingly large minority of folks who do just that.

Best practice is to have a page that works without a script, and use scripting to make the experience even better. Especially if you are counting on a page to give you some income. Why knowingly exclude a certain percentage of your revenue source?

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 1 year 14 weeks ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

As for your buttons, they

As for your buttons, they look the same in FF3 and IE7 to me. I suspect your problems might be cause by not understanding how floats work and the mysterious IE "haslayout" property by which IE treats them it's own special way and not according to the standard.

You might want to do a google search on "haslayout" and "containing floats".

I don't have time right now to investigate any more deeply than that.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 28 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

OK so I have continued to

OK so I have continued to screw around with this and read about all the IE bugs and whatnot.

I found that if I just remove the contents inside the CONTENTS HERE everything works just fine.

Example:

Before:
<a class="blog" href="http://www.mutineermagazine.com/blog" title="Blog">Blog</a>

After:
<a class="blog" href="http://www.mutineermagazine.com/blog" title="Blog"></a>

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 30 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

If that solves the problem,

If that solves the problem, then I'm pretty sure IE was looking at the width of the text while the other browsers weren't.

I'm trying to remember where I did a menu for someone like this and it worked-- instead all I can remember is the one I did for Catalyst systems where I ran into IE problems, and I stopped working on it because it was a whole-page example... because you do still need text somewhere (not just in title either, since that is usually only triggered by mouse and not keyboard...)

Because there is a way to keep the text you need AND cover it up with the icons in all browsers. I'm thinking of having a ul (unordered list) containing only those three items (because they are special icons rather different from the rest of your menu) and having the text in the relatively positioned li's, while the a's (now being empty) are set to display: block and absolutley positioned over the li's. Since the ul will have a set width, it should work, but again I need to remember how I stopped IE6 from letting the text content push the width wider (IE6 can do that) and IE7 wasn't a whole lot better behaved... but it can be dealt with.

I'm no expert, but I fake one on teh Internets

jeffd
Offline
Regular
Hollywood, CA
Last seen: 13 years 28 weeks ago
Hollywood, CA
Joined: 2007-01-13
Posts: 20
Points: 0

Yeah I really want to keep

Yeah I really want to keep that text inside of the links, but I also really need the site to work in IE and I just don't have enough time in the day to be screwing around little problems like this. If you have anymore ideas shoot them my way! Smile

I'll probably try the UL idea as well.