Re: [css-d] Floats not doing what intended in IE, Firefox, etc
T Shorrock wrote:
I made your suggested additions/changes and it seems to have done the
job in Firefox, but Safari (1.3 on OSX 10.2) is a mess.
...
Leaving browser-bugs aside, and using my preferred method with floats
and negative margins. Solution tested in Opera 8, Firefox 1, Safari
1.2.4, IE6 *and* IE5.2.3(Mac). Pretty identical across the board.
Hope Safari 1.3 is happy with this also, as I have yet to upgrade to
that version.
New CSS:
#maincontent {
padding: 0;
margin-top: 0;
margin-left: -10px /* IE-Mac fix */;
margin-right: 140px;
width: 400px /* all fix */;
float: right /* all fix */;
display: inline /* IE-win fix */;
}
#sidebar-b {
float: right;
width: 140px;
margin: 0;
padding: 0 0 88px 0;
font-size: .8em;
margin-left: -135px /* all fix */;
}
...note that there's no hacks anywhere, as all my browsers can use the
same code.
---
Still the same IE/win quirks mode - although it isn't critical as
bug-fix anymore.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
...IE6 will render the same in both modes now, so it's your choice.
---
Strange characters:
Cause: encoding-problems somewhere along the road. This is what I see in
the source-code, and what's rendered in all my browsers: '£75 per
hour thereafter, ...'
Solution: Use entities, like '£75 per hour thereafter, ...'
which will render correctly across the board, more or less regardless of
settings in browsers. I use HTMLTidy as conversion-tool on all my own pages.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats not doing what intended in IE, Firefox, etc
T Shorrock wrote: I made your suggested additions/changes and it seems to have done the job in Firefox, but Safari (1.3 on OSX 10.2) is a mess. It's taken all the content to the left (overlapping the left column) - because of the margin:0 on the #maincontent, or at least I think that's why it's doing it. Screen shot at http://www.vandevelde.co.uk/safari.jpg - is there any way to solve this problem. Sorry, I tested in Safari 1.2.4 and it looked fine. I'll take another round. The margin was correcting a 'display: table' bug in Firefox, so I'll look for a more cross-browser reliable solution to Firefox' problems. No use fighting all those new bugs in the new browsers, as they are pretty unstable. Also, Mac IE 5.2 does not work now. Screen shot at http://www. vandevelde.co.uk/mac_IE5-2.jpg IE 5.2 is also now showing some strange characters that were not there before I put it into quirks mode: screenshot at http://www.vandevelde.co.uk/strangecharaters.jpg - look at words "it's entirely up to you" and "£70" Didn't find that 'strangecharaters' image, but I'll have a round in my IE5.2/Mac - and do some cross-browser comparison with the other pages. IE/Mac is not in quirks mode (only IE/win is) so the strange characters are caused by something else - probably the fact that the 'xml declaration' and the meta-tag are pointing at different encodings at the moment - causing confusion in poor old IE/Mac. Give the 'xml declaration' the same encoding as the meta-tag has (iso-8859-1), and see if that solves it. I'll be back with more later. Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats not doing what intended in IE, Firefox, etc
Hi Gunlaug,
I made your suggested additions/changes and it seems to have done the
job in Firefox, but Safari (1.3 on OSX 10.2) is a mess. It's taken all
the content to the left (overlapping the left column) - because of the
margin:0 on the #maincontent, or at least I think that's why it's doing
it. Screen shot at http://www.vandevelde.co.uk/safari.jpg - is there
any way to solve this problem.
Also, Mac IE 5.2 does not work now. Screen shot at http://www.
vandevelde.co.uk/mac_IE5-2.jpg
IE 5.2 is also now showing some strange characters that were not there
before I put it into quirks mode: screenshot at
http://www.vandevelde.co.uk/strangecharaters.jpg - look at words "it's
entirely up to you" and "£70"
http://www.vandevelde.co.uk/wedding_prices.html
http://www.vandevelde.co.uk/main_1.css
http://www.vandevelde.co.uk/portraiture.html seems to work OK IE 5.2,
and Firefox. So I don't understand why the wedding_prices.html page
isn't working on IE 5.2.
Any help much appreciated.
Cheers,
Tracy
On Monday, June 27, 2005, at 02:50 pm, Gunlaug Sørtun wrote:
Firefox, Safari, Opera & IE6 seems to render flawless when given these
additions:
CSS:
#maincontent {display: table; width: 400px; margin: 0; _height: 0;}
#navcontainer {margin-left: -1em;}
In addition, IE6 needs to be put into quirks mode...
HTML:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Floats not doing what intended in IE, Firefox, etc
T Shorrock wrote:
http://www.vandevelde.co.uk/wedding_prices.html
http://www.vandevelde.co.uk/main_1.css
In IE everything after the first two floats moves to a position below
the left/right columns (ie, everything below Package 1 and Package
2).
In Firefox and Safari, everything below the second set of floats
moves to a position below the left/right columns (ie, Additional
Costs appears below the two side cols).
Firefox, Safari, Opera & IE6 seems to render flawless when given these
additions:
CSS:
#maincontent {display: table; width: 400px; margin: 0; _height: 0;}
#navcontainer {margin-left: -1em;}
In addition, IE6 needs to be put into quirks mode...
HTML:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
http://www.w3.org/1999/xhtml";>
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Floats not doing what intended in IE, Firefox, etc
Hi, I got some more content from my client for the photography website I've been working on for what seems like centuries now - I've designed two whole sites in between. The problem I'm having is still with floats on the following pages: http://www.vandevelde.co.uk/wedding_prices.html http://www.vandevelde.co.uk/main_1.css In IE everything after the first two floats moves to a position below the left/right columns (ie, everything below Package 1 and Package 2). In Firefox and Safari, everything below the second set of floats moves to a position below the left/right columns (ie, Additional Costs appears below the two side cols). I've tried everything I can think of, and am now so much in a muddle I don't know where to start! :( Another page http://www.vandevelde.co.uk/portraiture.html is also causing problems in PC IE, but works in Safari, Firefox and Mac IE. One other 'smallish' issue: I get a thin, blue, vertical line in Firefox when moving the mouse over the navigation links. The line doesn't go away after I've moved the mouse off the link. Anyone got any ideas? Thanks for any help. I'm really looking forward to getting this one off the books - especially as the client is a good friend and they want to start directing people to their new website. Cheers, and thanks Tracy __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
