Links not appearing in Chrome or Safari

E

eristicapple

New Member
Hi! I've designed a simple website for my improv troupe (www.borderlineplayers.com), but cannot for the life of me figure out why the links are not appearing in Chrome or Safari. The site looks good in Firefox and IE.

Please, any advice you can give will be greatly appreciated.

Thanks,

Scott
 
CaldwellYSR

CaldwellYSR

Member
Just a wild guess, get rid of the overflow: hidden; in the #nav ul. Not sure really why you have it or why it would cause a problem but it's the only thing I can think of. If it doesn't work then sorry :p
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Firefox and IE are cutting you some slack, surprising for IE :). The manner in which the site is rendering in Chrome and Safari is correct. Here's why:

  1. You are using floats. But you are only floating one item (nav).
  2. The floated item appears after the natural flow of the content in that parent
  3. (parent being the element that holds the image and the nav. The image is the natural flow.)
  4. When ever you have floated items in an element, and they are either the last item or the only items, you need to clear the floating (allow the parent to recognize the floated items).
  5. Float clearing can be done by using the css property "overflow"

Try this out:
Code: 
div#navcon {
   overflow:hidden;  /* allows parent to encompass floated children */
}
div#navcon img {
  float:left;
}
div#nav {
  float:right;
  font-family:arial, sans-serif;
  width:700px;
}
/* removed the background and margin properties from #nav.  They are not needed. */
 
You must log in or register to reply here.
Top