Member Avatar for AdamBasich

Hello!

I am having some difficulty in a web site I built: www.vipercabling.com

Everything looks the way it should in all browsers but IE and Firefox. In these two browsers there is extra space showing up in the main navigation area on three of the five pages. The code is the same on all of the pages and I am not sure what the extra space is from?
About Us and Gallery are as they should be, in all browsers; Services, Projects, and Contact have a bit of space at the top and bottom that should not be there.

Any thoughts would be appreciated! Thank you in advance for your time.

AB

  • 2 Contributors
  • 5 Replies
  • 125 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by AdamBasich

Recommended Answers

All 5 Replies

Member Avatar for JorgeM

I do see a difference in the spacing between items in the navigation list when viewing via Chrome vs IE10, but I see the same spacing on all of your pages.

I beleive the spacing issue could simply be the default style applied by the brower. you can override it by specifying your own.

Maybe I'm not looking at the right place? Do you have a pic that shows what you are looking at?

Member Avatar for AdamBasich

Hi JorgeM

Thank you so much for looking. I think if you toggle between the About Page and Services you'll see the sizing between the nav links expand and shrink.

On my older model iMac it looks fine on Safari, Opera, and Chrome but firefox 24 shows a different spacing as described above. Toggling makes it look like it grows and shrinks.

I made a quick graphic with two screen shots side by side and the difference is easier seen than described but I'm having difficulty finding the upload option here...

Member Avatar for JorgeM

Click on the paperclip icon in the editor to add a file.

yes, i see what you mean. I'll take a closer look.

Edited by JorgeM
Member Avatar for JorgeM

Looks like some of the nav items have a height of 29px and the others have a height of 30px; Most likely being affected by other content on the page.

If you set a height of 30px manually, that should solve your problem.

for example..in your stylesheet...

#nav ul li {height:30px;}

Member Avatar for AdamBasich

Completely solved the problem thank you so much!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.