Re: [css-d] Internal Anchor Tag Breaks Layout in FF

[Amaryllia Liu]

> Simplest solution: change your 'position: relative' based layout
> to a 'position: absolute' based one - relative to div#main, and
> there won't be any IE-bugs to replicate.
> 
> Add...
> div#main {position: relative;}
> ...and change all existing 'position: relative' to
> 'position: absolute' and give them new 'top' values relative to
> top of div#main.
> 
> regards
>   Georg
> 
> [1]http://www.satzansatz.de/cssd/onhavinglayout.html
> -- 
> http://www.gunlaug.no


Georg,

Thank you so much for such a quick response! Your suggested fix worked like
a charm and didn't take any longer than 10 minutes, which makes me wonder
why I scratched my head for so long before joining this list...

I realize that you may barely remember what I'm talking about at this point
considering the speed of most of the responses on here. I've been swamped
with work and too much traveling recently... but thank you again (and
everyone else who responded) with all of your great advice and suggestions
=)

~Amy

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Internal Anchor Tag Breaks Layout in FF

[David Laakso]

Amaryllia Liu wrote:
> I started learning CSS a few months ago so I'm still very much a beginner at
> this.
I've been doing it for a little bit longer, and trust me when I say I am 
a beginner, too..
>  The problem I'm having can be see at
> http://www.erotophilia.com/July2006/brokenlayout.html
>
> When any of the anchor links on top are clicked, the page layout breaks in
> FF, but seems to work find in IE. This is a fairly simple page
Well, as a friend reminded me a couple of days ago when I ran into a 
mind boggling(for me) css problem: keep it simple.
>  so I'm hoping
> the problem is also a simple fix. I would greatly appreciate any help or
> suggestions in how to debug this.
>
> Thanks!
> ~Amy
>   
I think Georg Sortun summed up the situation you are facing.. Best I can 
do is suggest that  you let the information flow, rather than attempting 
to control and constrain it. The software(the browsers, I mean) are 
pretty darn good at laying down stuff nicely -- providing you do not 
restrain them -- best to let them do their thing. I find it is far 
easier to just work with text. Laying out with images is always 
problematic. The Web is fluid. Ignore that and she'll make you dread the 
day you were born. So anyway, this is nothing to write home about, just 
a quick example of a direction you could take:
 .
Best,
~dL
PS Cursory tested only in xp.

-- 

http://chelseacreekstudio.com/ca/ccs/pow/pow.html

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Internal Anchor Tag Breaks Layout in FF

[Gunlaug Sørtun]

Amaryllia Liu wrote:
> http://www.erotophilia.com/July2006/brokenlayout.html
> 
> When any of the anchor links on top are clicked, the page layout 
> breaks in FF, but seems to work find in IE. This is a fairly simple 
> page so I'm hoping the problem is also a simple fix.

No really simple fixes, I'm afraid, since the page layout rely on a
number of /bugs/ in Internet Explorer - especially the 'Layout'[1] bug,
and other browsers can hardly replicate them all.

This means that since all elements' positions are based on offset from
default-positions, and that default-position rely on dimensions given to
other elements - partly by the browsers, the whole layout becomes a
"house of cards" that will loose positions if/when *one* element's
position and/or dimension changes.

> I would greatly appreciate any help or suggestions in how to debug 
> this.

Simplest solution: change your 'position: relative' based layout to a
'position: absolute' based one - relative to div#main, and there won't
be any IE-bugs to replicate.

Add...
div#main {position: relative;}
...and change all existing 'position: relative' to 'position: absolute'
and give them new 'top' values relative to top of div#main.

I did a test on a few parts, and it became perfectly stable in all
browsers in all situations, and reacted just fine to in-page link clicks.

I didn't bother to test restyling for all element, since - needless to
say - the whole layout is/will be ruined when subjected to any degree of
'font-size options' in any browser. That will happen regardless of
solution since it is laid out on top of a single background-image.

Your existing layout/design is also not very end-user friendly at
default, since it doesn't work well on smaller browser-windows.
800x600 is "no good", and I think it should at least be made to work at
that window-size.

So, it looks like a "back to the drawing-board" layout that is in need
of a little more than a "fix" - sorry.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Internal Anchor Tag Breaks Layout in FF

[Amaryllia Liu]

I started learning CSS a few months ago so I'm still very much a beginner at
this. The problem I'm having can be see at
http://www.erotophilia.com/July2006/brokenlayout.html

When any of the anchor links on top are clicked, the page layout breaks in
FF, but seems to work find in IE. This is a fairly simple page so I'm hoping
the problem is also a simple fix. I would greatly appreciate any help or
suggestions in how to debug this.

Thanks!
~Amy


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/