15 replies [Last post]
matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

i know the problem is that i just don't know enough of the tricks and things to watch out for, but i'm going nuts trying to figure out what's wrong with my layout. any help will be appreciated:

http://digitalevent.net

the problem seems to be only the footer div. i don't even know what's wrong with it. margins? something like that. maybe the problem is only showing up in firefox, but i don't know anymore.

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 46 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

css layout going crazy

have you tried applying 'clear:both;' to #footer?

- r

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

css layout going crazy

You don't have units assigned to width.

I'm not sure there is a problem. You have no content in your main div.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

css layout going crazy

http://www.digitalevent.net/solutions.htm

I actually do have content in the main div on all of the pages. If there were no content in the main div tag, firefox would not display it. The only thing in the main div of the index is a   but that's beside the point. The other pages have plenty of content, and there's still a problem with the footer. There is a margin at the top of the div between the footer and the main, the margin that I've placed on the images isn't pushing the boundry of the container down to the top. The paragraph on the right seems to have it's margins working properly, but why are the images lower than the text?

#footer {
	width:640px;
	clear:both;
	border-left:1px solid #999;
	border-right:1px solid #999;
	border-bottom:1px solid #999;
	background-color:#fff;
	}
#footer p { margin:10px; }
#footer {
	text-align:right;
	font-size: .85em;
	}
#footer img {
	float:left;
	margin:10px;
	}

I think that's all the relavent css, the complete files are:
http://digitalevent.net/styles/main.css
http://digitalevent.net/styles/structure.css
http://digitalevent.net/styles/typography.css[/code]

ragamuffin
ragamuffin's picture
Offline
Leader
Iowa
Last seen: 11 years 46 weeks ago
Iowa
Joined: 2005-06-02
Posts: 691
Points: 0

css layout going crazy

I wonder if you need to try 'vertical-align:top;' on #footer img?

- r

matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

css layout going crazy

I'll try it, but there's still the issue of why the footer isn't connected to the main div tag.

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

css layout going crazy

Remove the margin around the <p> in the footer.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

css layout going crazy

That doesn't seem to have made much of a difference either. Is everyone seeing what I'm talking about? It looks right in IE, but not in Firefox, and I'd like to know what I'm doing wrong.

By the way, thanks for all the suggestions up to this point. I appreciate the time taken to look over my problems.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css layout going crazy

Your problem with the footer lies with collapsing margins and the paragrah in the footer it's top margin is collapsing with it's parent and forcing through to #main pushing the footer down, add 1px top padding to footer to contain the margin and close the gap or remove the footer p margin, you may want to add some bottom padding to extend the footer border down to the bottom if you retain the margins on the p:
padding:1px 0 5px;

I have to admit that this is a slightly odd way of structuring a page and I'm not sure why you have placed the shadow graphic as a foreground image it should really be a background one as it's just decoration and placed on the footer, life would be simpler then. I would be careful about image navigation, if images were to fail to load you are left with no links and really the dam mm preloader stuff is just overkill you can achieve CSS rollovers using images just as well if you combine the two rolloverstates into one image and use positioning to move to the part of image required.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

css layout going crazy

I guess I don't understand how I could go about placing the shadow as a background image. I usually avoided using padding, because of the different box models. Is there something I'm doing that's causing the margins to collapse? I'm not sure if I've ever seen this happen before.

I'm also encountering a similar problem on the contact page. I'm guessing it's the same problem. the div is displayed because it has content, but the margins are collapsing.

As far as the image navigation goes, all of the images have alt and title tags set, and if I understand things correctly, if the images don't load one of those tags will be in place of the image. But, I'm very interested to learn more about getting a rollover effect with a single image. Is there a tutorial somewhere?

I'm imagining that it involves a list, and setting a background image for links in the list. Am I close?

drhowarddrfine
Offline
Leader
Last seen: 11 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-21
Posts: 764
Points: 0

css layout going crazy

Sorry I haven't had much time lately to give any real thought to these forums and it's just piece meal but I'm going crazy as well. Believe it or not, this is relaxing for me. Smile

Margins are supposed to collapse so you aren't doing anything wrong. IE sometimes gets it wrong. Go to positioniseverything.com and read about it there.

I might have some time in a little bit.

IE7 is 10 years behind the standards or wrong.
But it works in IE!
IE is a cancer on the web -- Paul Thurott

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css layout going crazy

Try placing the shadow graphic as a background on the footer and have a play around with it , it shouldn't be difficult.

Margins must collapse otherwise you would have odd looking spacing; imagine an element with equal top and bottom margins in it's default state placed on the page, it margins away from the top by 1em then flow a second element directly after you now have a top margin at work pluss a bottom margin margin so suddenly you have a 2em gap which looks a bit odd if they are paragraphs; so when two margins meet one collapse into the other, if they are both the equal then one is rendered null if they are different the greater margin would take over.

This has the side effect though that when you have an element nested in another and it's top margin abuts the parent elements margin then the inner elements margin can take over and in a sense be adopted by the parent; the parent will appear to be showing a margined top causing a gap between it and the element above it .

The method of preventing this collapse is to give the parent a border or padding this will then prevent the margin of the child escaping the parent, the child element will now be margined away from the inside top of the parent.

IE has, naturally, problems with un-collapsing margins when the parent is in hasLayout mode.

Check this link out for fast pre-loaded CSS rollovers (very simple technique)

http://wellstyled.com/css-nopreload-rollovers.html

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

css layout going crazy

Ah, of course. I was just reading about that last week. Ok. Let me ask this, then: it seems like it would be easier to simply wrap the content in another div tag. I can't seem to figure out which seems more sloppy: adding padding or putting in another div. In any case, thanks for the explanation.

I'm still a little confused about the shadow. If I attach the shadow as a background, at the bottom of the div, then the side-borders show. I can take care of the bottom border, by including it in the image, but i don't see how I can do the side borders without making all of the borders part of the image.

I'm also having trouble creating a two-column layout within this layout. Whenever I put the content in two divs, the main div stops expanding to include the content in the divs. The Solutions page is also doing this, but I'm hacking it by adding a clear:all paragraph underneath the two columns. What's the deal with this?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 3 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

css layout going crazy

You have the right idea with the footer but don't mix keyword position values and px etc you could move the footer down by using 0 100%, what you do have to take into account is that the image is a fixed height and part of that height is the shadow that would be expected to look as though it was below the footer, as the image is within the footer you will have the problem if you run a border down it's sides as they will border the shadow,you may have to add the shadow to another div placed bellow the footer.

I would change the padding on the footer to height ~7em
and you need to think about a wrapper div to hold your two columns which will need to be floated there are plenty of two column layouts examples around if you google, when using floats you need to read up on 'clearing float containers'.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

matt.c
Offline
Regular
Last seen: 14 years 8 weeks ago
Timezone: GMT-6
Joined: 2005-05-27
Posts: 25
Points: 0

css layout going crazy

I looked at a couple of two-column layouts, and they seemed to rely on a footer element below the two columns to pull the main container to the bottom. So, I just added an empty 100%, clear:both div at the bottom. If there's a more elegant way to do this, I wouldn't mind knowing.

When using overflow:scroll, is it possible to remove one of the scroll bars? For example: http://digitalevent.net/solutions.htm - there is no need for a horizontal scroll bar.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 1 hour ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

css layout going crazy

See enclosing float elements. Pay particular attention to Tony's clearing hack.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.