asked on

CSS not working anywhere but IE

Please have a look at http://www.haaswebdesign.com/NLYAA/index.html

The menu at left and main content at right are supposed to butt up right against the header logo at the top. In IE, they appear to do so.

In FF or Chrome, there appears ot be a gap (about 15 or so pixels).
Why is the gap there and how can I ensure my design works across all browsers (IE, FF, Chrome)?

ASKER CERTIFIED SOLUTION

Jagadishwor Dulal

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Amar Bardoliwala

Hello dimmergeek,

I made following changes in your code

1. changed doctype
Current => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

My Change => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2. Changes in mystyles.css file

div#main
{
      margin-top: -10px;
      padding-bottom: 88px;
}

To following

div#main
{
      margin-top:0px;
      padding-bottom: 88px;
}

--------------------------------------------------------

add margin-top:0px; to css div#main_content div.sidenav ul

After, Above changes I was able to get leftmenu joined with header.

Hope this will help you.

Thank you.

Amar Bardoliwala

Julian Hansen

Don't like negative margins to fix problems that don't specifically require it

Try this
mystyles.css line 72

div#main_content div.sidenav ul {
  display: block;
  font-size: 14px;
  height: auto !important;
  line-height: 20px;
  list-style: none outside none;
  min-height: 145px;
  padding-left: 0;
  padding-right: 5px;
  padding-top: 27px;
  margin: 0;  /* ADD THIS */
}

Open in new window

;

Chris Stanyon

Julian's right - negative margins are a hacky way to fix problems. Your sidenav UL needs it margin-top setting to 0, but you will probably also need to set your logo header image to display as a block. Add this to your stylesheet

#logos img { display:block }

Kim Walker

Another thing to consider is the image in the "logos" div. Since images are inline objects and the default vertical alignment is baseline, they tend to generate space for descenders. Often this space is based on an arbitrary default line-height value. Add style="vertical-align: bottom" to your image tag.

Chris Stanyon

Just a heads up - the answer you've accepted is the wrong way to do it! Setting negative margins to fix other problems is only a way of hacking around the problem. Your call though :)

Julian Hansen

Second that - setting margin-top to the nav UL was the correct solution.

Kim Walker

I agree with ChrisStanyon and julianH. This is not a good application for negative margins.

Amar Bardoliwala

I suggested same in my solution, remove negative margin and put margin-top:0px for <ul> tag, but after all its askers decision to accept his answer. We can only suggest better or best ways.

Thank you.

Amar Bardoliwala