Page 1 of 1

[SOLVED] DIV design problems

Posted: Wed Aug 11, 2004 6:45 am
by vigge89
I've just started creating a new design for my new site, and i've come to a problem with it. If you visit http://vigge89.mine.nu/index/, you'll see that my #menu and #content DIVs are messed up, both in IE and in Firefox (different things though). In IE, the design looks like it should, apart from the space between the top "logo" and the menu. On the other hand, in Firefox, the logo and menu looks right, but the content-div is positioned wrong, there are no margin between the menu and main content. The problem seems to be that the menu is positioned under the menu-div, and not inside it as i should.

Here's a picture on how it should look like in all browsers:
Image
The blue square is where the menu-div should be, and the red square is where the main content div should be positioned.

Pictures of how it looks like in IE and Firefox:

Internet Explorer:
Image

Mozilla Firefox:
Image

The CSS and XHTML code can be found here:
http://vigge89.mine.nu/index/index.phps - XHTML
http://vigge89.mine.nu/index/vigge.css - CSS


Do any CSS-gurus know how to solve this?

Note: since the files are located on my test-server on this computer, it isn't online all the time.

Posted: Wed Aug 11, 2004 7:17 am
by CoderGoblin
You define border twice in #menu.

Code: Select all

border: 1px solid #33f;
border: 0px solid #f44;
delete the second one. Not sure about the extra spacing in one of them. Try making padding-top: 0px; in the content.

Posted: Wed Aug 11, 2004 9:20 am
by vigge89
oh, stupid me, didn't spot the second border: :P :wink:
Actually, the blue and red squares are just for debugging, if you check the page out now in Firefox, you'll see that the menu is below the menu-div, and instead is overlapping the main content div. In IE, it looks like it should, but there's still space between the logo and the menu :(

also, i've set padding to 0 everywhere, so i don't think that's the case :(

Posted: Wed Aug 11, 2004 9:24 am
by malcolmboston
without meaning to p!ss on your parade.

i have suffered exactly the same fate working with divs across multiple browsers, i never found a workaround really.

If you find out be sure to let me no.

Posted: Wed Aug 11, 2004 11:22 am
by phice
Your problem is with the comments. You need to remove them from your <div tags (all of them).

Example:

Code: Select all

<!-- LOGO starts --><div id='logo'>
	<a href='./' title='vigge.net'><img src='img/logo.jpg' alt='vigge.net' /></a>
<!-- LOGO ends --></div>
is fixed to

Code: Select all

<!-- LOGO starts -->
<div id='logo'><a href='./' title='vigge.net'><img src='img/logo.jpg' alt='vigge.net' /></a></div>
<!-- LOGO ends -->
I know it looks nice like it was before, but you can't have comments inside div tags or you'll get extra whitespaces that you don't want.

Posted: Wed Aug 11, 2004 12:08 pm
by feyd
more explicitly, you can't have carriage returns in divs or anything for that matter, as you'll get extra spaces added to lines and things..

Posted: Wed Aug 11, 2004 2:21 pm
by vigge89
ok, what about this then?
doesn't really solve the problem, but I changed it anyway. Thanks for the advice, I didn't know that :wink:

Posted: Wed Aug 11, 2004 3:01 pm
by feyd
looks like you are getting a slight bit of whitespace stuck in from your carriage returns after the last <li> in the <ul>

Posted: Wed Aug 11, 2004 6:38 pm
by vigge89
what do you mean? i tried taking away all those tabs, new lines, etc. but that doesn't change anything :(

Posted: Thu Aug 12, 2004 2:50 am
by CoderGoblin
Dont you just love Explorer...

I know phpBB using two style sheets, the main.css and if the browser is explorer, it also loads a explorer.css. Could this sort of methodology help in this instance ?

Posted: Thu Aug 12, 2004 3:10 am
by feyd
it's an issue in both firefox and IE.. so, it's either an oddity in css (which I don't see that) or the whitespace..

Posted: Thu Aug 12, 2004 1:38 pm
by zenabi
The problem occurs when the float is applied to the list elements. Add a clear:left to the content div and all should be fine.

Posted: Thu Aug 12, 2004 4:40 pm
by vigge89
you completly solved the problems for both browsers!
big thanks :D