Topic: A couple of minor layout issues Pages that link to <a href="https://ozoneasylum.com/backlink?for=26918" title="Pages that link to Topic: A couple of minor layout issues" rel="nofollow" >Topic: A couple of minor layout issues\

 
Author Thread
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-28-2005 23:11 Edit Quote

I'm having two minor but annoying issues on the main page here:

http://www.in-dented.com/gallery/

1) in IE, the "node" div does not extend to contain the "node-sub" div which is floated within it. I can't figure out why. The "node-sub" is floated right, and I suppose I could make two div's and float them both left, but I would prefer not to.

2) in Firefox, the "side" div is a couple of pixels higher than the "main" div, though the tops should be even.
I know I have had this issue in the past, and have fixed it, but I cannot remember what the problem was (and thus can't remember how to fix it).

Any tips appreciated.

=)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 10-28-2005 23:45 Edit Quote

#2 is the margin values for .node-side & .node

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 10-28-2005 23:58 Edit Quote

I don't believe I'm seeing #1

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-29-2005 03:31 Edit Quote

Ok, got #2 straightened out by removing the top margin form both divs.

Here is a screen shot of #1, which I am still clueless about.
http://www.in-dented.com/temp/gallery.gif

Thanks



(Edited by DL-44 on 10-29-2005 03:31)

poi
Paranoid (IV) Inmate

From: France
Insane since: Jun 2002

IP logged posted posted 10-29-2005 03:35 Edit Quote

DL-44: have you tried to set the overflow:hidden; in the .node rule to fix the point #1 ?

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 10-29-2005 11:54 Edit Quote

see if .node { width: 99%; } fixes it

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-29-2005 17:15 Edit Quote

Yep, that did it reisio.

can you tell me why? =)

reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

IP logged posted posted 10-29-2005 17:41 Edit Quote

I can't justify the effort. "IE is stupid" has always been enough to satisfy me. (or: don't know, don't care)

(2 minutes later)
I've given it a good 30 seconds thought and I still have no idea. Ask someone knowledgeable.

DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

IP logged posted posted 10-29-2005 18:07 Edit Quote
quote:

reisio said:

"IE is stupid" has always been enough to satisfy me



I guess that'll have to do then

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 01-04-2006 14:04 Edit Quote

Try here, it might help:
http://positioniseverything.net/explorer/escape-floats.html

.node { width: 99%; } might be an alternate Holly Hack and trigger hasLayout, I don't know.

Alternatively, try * html .node { height:1px }. Only IEs < 7 will apply the rule (they think there is a magical element above html, according to spec there isn't) and the contents of the box will stretch it because IE honours the contents before the container. So it will stretch to the spec auto size, but the float should then be contained because according to the rendering engine, it now "hasLayout".

Cheers,
DC

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 01-05-2006 06:09 Edit Quote

As far as I can tell if you have a container that is non-float positioned and you flaot something inside it then the rendering engine no longer stretches the container around it. Why, I have no idea, but I've encountered this problem in my own design work before.


Justice 4 Pat Richard

divinechaos
Obsessive-Compulsive (I) Inmate

From:
Insane since: Dec 2001

IP logged posted posted 01-05-2006 10:03 Edit Quote

But that is actually according to spec. Eric Meyer wrote a good article on why.

http://www.complexspiral.com/publications/containing-floats/

However, I thought the OP had a clearing element at the bottom of the containing div, which should change the behaviour as in the article.

Regards,
DC

Skaarjj
Maniac (V) Mad Scientist

From: :morF
Insane since: May 2000

IP logged posted posted 01-06-2006 09:53 Edit Quote

Yes, or, as I use in my designed when i need to do this, everything gets floated. It may not, perhaps, made for the most semantic code in the word, but it works, and it works the same across all the browsers.

For example: http://sunday.yarinareth.net/design/sunday_3-0-1/index.html

This is, admittedly, on a partially completed mockup of a not-even-begun WordPress theme. But it uses functional markup (a <div> outer wrapper that provides the centering and nothing else, so it's invisible as far as the user is concerned, a <div> header of a fixed size that fills the containing wrapper div's width and is floated left, a sidebar and content <div> both sized so they float one next to the other, and a footer <div> that clears both, just as the header does), and has no broser-specific hacks in the CSS. And that's how I intend to keep it, if I can. I'll be quite happy with the layout if I can avoid hacking anything.


Justice 4 Pat Richard



Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« BackwardsOnwards »

Show Forum Drop Down Menu