?
Solved

CSS not working anywhere but IE

Posted on 2012-09-17
9
Medium Priority
?
288 Views
Last Modified: 2012-09-18
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)?
0
Comment
Question by:dimmergeek
  • 2
  • 2
  • 2
  • +2
9 Comments
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 800 total points
ID: 38408422
In your style div #main_content  add top margin like below:
   
 
  margin-top: -20px;

Open in new window

   
Your Style will be:

div#main_content {
    background: url("../Images/gradient.jpg") repeat-x scroll 0 0 #FFFFFF;
    color: #666666;
    margin-top: -20px;
    padding-bottom: 150px;
}

Open in new window

0
 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 38408429
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
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38408481
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

;
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38409081
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 }
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38409244
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.
0
 
LVL 45

Expert Comment

by:Chris Stanyon
ID: 38410509
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 :)
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38410540
Second that - setting margin-top to the nav UL was the correct solution.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 38410542
I agree with ChrisStanyon and julianH. This is not a good application for negative margins.
0
 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 38410589
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
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question