nav alignment breaks when I upload

User 1880877 Photo


Registered User
9 posts

Hi all:

I'm tearing my hair out over a problem this morning. You'll see a nav mis-alignment problem here http://markgarvey.com/work-copy.html. The two bottom nav items-- "Technical Communication" and "My Books" -- should be on the same line.

The problem is, when I preview the page from within Coffee Cup HTML Editor, those two elements ARE aligned. They look fine and all works well.

I'm dead certain I have the same html file referencing the same css stylesheet in both places. It's a quandary and it's driving me around the bend.

Any thoughts would be most welcome!

thanks
Mark
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Why are you using those spacer gifs?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1880877 Photo


Registered User
9 posts

It's been a while since I created it, so don't recall specifically, but I'm sure it had to do with getting everything in that nav section to align in a way that looked right. I've been using a slightly different list of nav elements successfully in this design for quite a while and I wanted to update.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

It has to do with using images for your link instead of the text that is already in the span. Why not use a standard text link?
Otherwise if you adjust line 259 of your stylesheet.css
#mybooks {
display: inline-block;
width: 81px;
height: 30px;
background: transparent url("images/mybooks1.gif") no-repeat scroll 0px 0px;
}

to this
background: transparent url("images/mybooks1.gif") no-repeat scroll 0px -6px;

Or you could move the other one down.
line 648 stylesheet.css
#techcomm {
display: inline-block;
width: 213px;
height: 30px;
background: transparent url("images/TECHCOMM1.gif") no-repeat scroll 0px 0px;
}

to this
background: transparent url("images/TECHCOMM1.gif") no-repeat scroll 0px 6px;
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1880877 Photo


Registered User
9 posts

I suppose I went this route because I didn't know how to create the same hover effects, and the same text colors, etc., using standard text links, so I went looking online and found the CSS and image combo that you see here.

That said, this recipe has been working for years, until I added a couple new nav elements.

What I don't understand is how it now can appear to work in Coffee Cup HTML Editor but not when I upload it.
User 1880877 Photo


Registered User
9 posts

OK...I'm trying out your code suggestions now..
User 1880877 Photo


Registered User
9 posts

Thanks a lot, Eric. That seems to have fixed it. I went with your first suggestion, and I subtracted 6 from each state of the mybooks button. I still don't get why Coffee Cup was showing different results than online, but it's working now, and that's what I needed.

Great job! And much appreciated.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Look at your settings in the html editor to see what your previewing with.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.