[SOLVED] DIV design problems

It doesn't matter if you do all the error checking in the world, or if you have the most beautiful graphics, if your site or application design isn't usable, it's not going to do well. Get input and advice on usability and user interface issues here.

Moderator: General Moderators

Post Reply
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

[SOLVED] DIV design problems

Post 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.
Last edited by vigge89 on Thu Aug 12, 2004 4:41 pm, edited 1 time in total.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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.
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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 :(
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

Post 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.
User avatar
phice
Moderator
Posts: 1416
Joined: Sat Apr 20, 2002 3:14 pm
Location: Dallas, TX
Contact:

Post 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.
Image Image
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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..
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post 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:
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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>
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

what do you mean? i tried taking away all those tabs, new lines, etc. but that doesn't change anything :(
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post 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 ?
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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..
zenabi
Forum Commoner
Posts: 84
Joined: Mon Sep 08, 2003 5:26 am
Location: UK

Post 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.
User avatar
vigge89
Forum Regular
Posts: 875
Joined: Wed Jul 30, 2003 3:29 am
Location: Sweden

Post by vigge89 »

you completly solved the problems for both browsers!
big thanks :D
Post Reply