Member Avatar for iamthwee

Hi guys,

I am using .css for a website and I am using divs to separate the header, middle and footer.

Within the header there are various classes, one for the logo the other for the menu.

It lines up OK in all browsers except IE, in IE there is white space gap between the header and main content? And the odd thing is each version of IE the gap between the header and main content seems to be diffferent!

Is this just a problem for IE or my CSS.

Will post some code after I've cleaned it up.

Edited by iamthwee because: n/a
  • 3 Contributors
  • 4 Replies
  • 164 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by Arkinder
Member Avatar for drjohn

At the start of your css file, i.e. the very first line, set the margin and padding for the body to zero. You should always do this to get rid of browser inconsistencies. But note that it may make a few other parts of your layout look wrong, if you have styled things a lot and accidentally required the browser to use its default settings. Different browsers have different defaults for things, you see, and taking advantage of them in one browser can break a design in another browser.

Member Avatar for Arkinder

Make sure that you are using a doctype and that your HTML and CSS are valid.

As drjohn suggested, reset the margin and padding for every element. Except, instead of using a body selector, try a universal rule just to avoid any possible inheritance issues.

* { margin: 0; padding: 0;}

There are several things that could cause this, but I'll wait until you post your markup and CSS.

Regards
Arkinder

Member Avatar for iamthwee

Thanks, I am using a css reset anyway, it turned out it was something in the CSS that was causing the problem, but somehow only ie6 and ie7 was appparent. ie8 to 9 was rendered OK.

Another question...

Let's say I have two divs. One has a logo and the other div is the menu, but I want the menu on the right hand side of the logo instead of appearing under it.

In other words how do I create a two columns with a div in each column?

Thanks for the help.

Member Avatar for Arkinder

If it's happening in IE6 and IE7 then it's the browser, not your CSS. IE6, and IE7, has several properties that only exist in that respective browser. The lynching of IE6 is long over due. It cannot ever truly be out of quirks mode and shouldn't be supported by designers anymore.

As for IE7 I can't really say for sure what's causing it without seeing your CSS. I don't have to time to list what I think it may be with decent explanations today - sorry.

That's easy enough, but are you wanting the menu to sit next to the logo or on top of it?

To sit next to it simply float both elements to the left and give each a set width that doesn't exceed the container - this includes margin and padding. Don't forget a clear: left; on the next element.

To sit on top of it, give the menu's container (presumably the same container of the logo) a position: relative; . Then use position: absolute; and right: 0; on the menu.

Once again, sorry for the lacking reply. I'm currently working on a project that's consuming most of my time.

Regards
Arkinder

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.