Stylesheets - Floating is FF

Author

Floating is FF

ioni

2007-07-19, 6:16 am

Dear all,

I have a site on WordPress with a theme that perfectly works for IE6.
However, as soonas I started cheking it with FF, Opera and IE7 I
foudna few things.

Of the major:
It seems that a adSense block (only when it is 120 x 600!, mind me!)
does not seem to position correctly.
I have a div that explicitly (that is inside the div itself) adjusts
the position of the block:

<div style="float:right; display:inline; width:120px; height:600px;
padding:5px;">Adsence block</d>

However, FF seems to think a lot about itself and positions the <div>
as if it has display:block rather then inline, so the text that should
float around the block actually moves below (which makes more sense
for Adsence, but less for the users and for me)

Dopes anyone have any ideas how may I fix it

dorayme

2007-07-19, 6:19 pm

In article
<1184835667.323999.82880@j4g2000prf.googlegroups.com>,
ioni <kirionis@XXXXXXXXXX> wrote:

> Dear all,
>
> I have a site on WordPress with a theme that perfectly works for IE6.
> However, as soonas I started cheking it with FF, Opera and IE7 I
> foudna few things.
>
> Of the major:
> It seems that a adSense block (only when it is 120 x 600!, mind me!)
> does not seem to position correctly.
> I have a div that explicitly (that is inside the div itself) adjusts
> the position of the block:
>
> <div style="float:right; display:inline; width:120px; height:600px;
> padding:5px;">Adsence block</d>
>
> However, FF seems to think a lot about itself and positions the <div>
> as if it has display:block rather then inline, so the text that should
> float around the block actually moves below (which makes more sense
> for Adsence, but less for the users and for me)
>
> Dopes anyone have any ideas how may I fix it

What is your point in display: inline when specifying this float;
floats are a special inline thing by nature? And why do you close
with </d> instead of the correct </div>

--
dorayme

Bergamot

2007-07-19, 6:19 pm

ioni wrote:
>
> <div style="float:right; display:inline; width:120px; height:600px;
> padding:5px;">Adsence block</d>
>
> However, FF seems to think a lot about itself and positions the <div>
> as if it has display:block rather then inline

If you read the specs, you'll see that Firefox and other non-IE browsers
get it right.
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo

In case you miss it, display:inline should be computed as display:block

> Dopes anyone have any ideas how may I fix it

Post a URL so we can see what the real situation is. Do not post code.

--
Berg

ioni

2007-07-20, 6:17 pm

On 19 , 16:16, Bergamot <berga...@visi.com> wrote:
> ioni wrote:
>
>
>
> If you read the specs, you'll see that Firefox and other non-IE browsers
> get it right.http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
>
> In case you miss it, display:inline should be computed as display:block
>
>
> Post a URL so we can see what the real situation is. Do not post code.
>
> --
> Berg

Dear all,

I have tried it gazilion times..

Well, I position the block with class, Google600.
If the block does not have the JavaScript refence to Adsence, then it
positions perfectly in any browser.
As soon as I put the adsence block back - the div stops behaving as it
should...

I am totally lost for a week now!

Well, this is the sample page - so check for youself..
http://sunshine.by/category/books/must_read/

I would very much appreciate the help!

ioni

2007-07-20, 6:17 pm

On 20 , 14:02, ioni <kirio...@XXXXXXXXXX> wrote:
> On 19 , 16:16, Bergamot <berga...@visi.com> wrote:
>
>
>
>
>
>
>
>
>
>
>
>
>
> Dear all,
>
> I have tried it gazilion times..
>
> Well, I position the block with class, Google600.
> If the block does not have the JavaScript refence to Adsence, then it
> positions perfectly in any browser.
> As soon as I put the adsence block back - the div stops behaving as it
> should...
>
> I am totally lost for a week now!
>
> Well, this is the sample page - so check for youself..http://sunshine.by/category/books/must_read/
>
> I would very much appreciate the help!- -
>
> - -

Please note that this only happens in FF 2.0 which I have installed.
IE6 shows everying perfectly

Bergamot

2007-07-20, 6:17 pm

ioni wrote:
>
> If the block does not have the JavaScript refence to Adsence, then it
> positions perfectly in any browser.
> As soon as I put the adsence block back - the div stops behaving as it
> should...
> http://sunshine.by/category/books/must_read/

In structure.css
..narrowcolumn {display:table}

It's not supported by IE, and doesn't really give you the results you
want in other browsers. Just set margin-left instead and be done with it.

--
Berg

ioni

2007-07-21, 6:16 pm

On 20 , 17:10, Bergamot <berga...@visi.com> wrote:
> ioni wrote:
>
>
> In structure.css
> .narrowcolumn {display:table}
>
> It's not supported by IE, and doesn't really give you the results you
> want in other browsers. Just set margin-left instead and be done with it.
>
> --
> Berg

Thanks a mil, Bergmot!
Probalby be too much to ask now, but it still floats only around the
first post and then leaves a great nice empty space between the
following entry. Why would that be happening?

Same url...

Regards,
Cyrill

Gregor Kofler

2007-07-21, 6:16 pm

In-Reply-To: <1185016775.859484.61560@k79g2000hse.googlegroups.com>
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 8bit
Message-ID: <7529e$46a23ac0$557fb468$18824@news.inode.at>
X-Complaints-To: abuse@inode.at
Lines: 21
NNTP-Posting-Host: 85.127.180.104 (85.127.180.104)
NNTP-Posting-Date: Sat, 21 Jul 2007 18:56:32 +0200
X-Trace: 7529e46a23ac0f0da11cd18824
Bytes: 1905
Xref: number1.nntp.dca.giganews.com comp.infosystems.www.authoring.stylesheets:106995

ioni meinte:

> Thanks a mil, Bergmot!
> Probalby be too much to ask now, but it still floats only around the
> first post and then leaves a great nice empty space between the
> following entry. Why would that be happening?
>
> Same url...

It's the clear:left in .postmetadata.

Anyway: Your markup is a real disaster: No less than 44 errors. Do
yourself a favor and get some decent FF plugins. I suggest FireBug, Web
Developer and HTML Validator.

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum

ioni

2007-07-23, 6:17 pm

On 21 , 19:50, Gregor Kofler <use...@gregorkofler.at> wrote:
> ioni meinte:
>
>
>
> It's the clear:left in .postmetadata.
>
> Anyway: Your markup is a real disaster: No less than 44 errors. Do
> yourself a favor and get some decent FF plugins. I suggest FireBug, Web
> Developer and HTML Validator.
>
> Gregor
>
> --http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://ww=
w=2Elicht-blick.at ::: Forum f=FCr Multivisionsvortr=E4gehttp://www.image2d=
..com ::: Bildagentur f=FCr den alpinen Raum

Ok Gregor, I certainly will follow your advise and thank you for the
great answer!
In the meanwhile may I request why the index now has the first post is
acting as though it has a margin-bottom: 600px?

No advertising on index, please be assured on that - http://sunshine.by

Regards,
Cyrill

Gregor Kofler

2007-07-23, 6:17 pm

ioni meinte:

> Ok Gregor, I certainly will follow your advise and thank you for the
> great answer!

Sigh. 59 Errors.

> In the meanwhile may I request why the index now has the first post is
> acting as though it has a margin-bottom: 600px?

The <br clear="all">.

Took me about 30 seconds with FireBug's inspect (and edit) function. Go
figure!

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum

ioni

2007-07-24, 6:19 am

On 23 , 22:47, Gregor Kofler <use...@gregorkofler.at> wrote:
> ioni meinte:
>
>
> Sigh. 59 Errors.
>
>
> The <br clear=3D"all">.
>
> Took me about 30 seconds with FireBug's inspect (and edit) function. Go
> figure!
>
> Gregor
>
> --http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://ww=
w=2Elicht-blick.at ::: Forum f=FCr Multivisionsvortr=E4gehttp://www.image2d=
..com ::: Bildagentur f=FCr den alpinen Raum

Dear Greegor,

I have checked the page with WC validator for XHTML Strict, which I
set in the header.
THe main problem with the errors aplenty comes from the counters
(between the  comments) which I use and since I am
not allowed to chage their code it only has to be there as it is well
compacted within a table.

Apart from those I have now only two errors - one refers to onCLick
action connected to the href and oanother one - to the <MAP> tag which
valigator syas cannot be placed like it is placed on the page - which
I have no idea how to put in any other way but in the end after all
the closing tags - is there any other way to put it just so and
generate no errors?

However, I have noted that now the menu on the side has emty space
between them..

Any idea how this can be undone?

Regards,
Cyrill

dorayme

2007-07-24, 6:19 am

In article
<1185266746.624969.180870@57g2000hsv.googlegroups.com>,
ioni <kirionis@XXXXXXXXXX> wrote:

> Dear Greegor,
>
> I have checked the page with WC validator for XHTML Strict, which I
> set in the header.
> THe main problem with the errors aplenty comes from the counters
> (between the  comments) which I use and since I am
> not allowed to chage their code it only has to be there as it is well
> compacted within a table.
>
> Apart from those I have now only two errors - one refers to onCLick
> action connected to the href and oanother one - to the <MAP> tag which
> valigator syas cannot be placed like it is placed on the page - which
> I have no idea how to put in any other way but in the end after all
> the closing tags - is there any other way to put it just so and
> generate no errors?
>
> However, I have noted that now the menu on the side has emty space
> between them..
>
> Any idea how this can be undone?
>
> Regards,
> Cyrill

Dear Cyrill,

I can't tell you with what impatience I await Greegor's answer.

Regards

dorayme

--
dorayme

Gregor Kofler

2007-07-24, 6:18 pm

ioni meinte:

> However, I have noted that now the menu on the side has emty space
> between them..
>
> Any idea how this can be undone?

I don't know... did I already mention FireBug? This one was tricky -
about 50 seconds. Set the font-size to 0em in die <a>s of the sidebar.
Not smart, but it gets the job done. There might be a character
somewhere within these tags that forces the extra space. Removing this
is smarter.

However, this gets boring. Perhaps you should try yourself. I could
recommend one or two Firefox-Plugins...

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Gregor Kofler

2007-07-24, 6:18 pm

dorayme meinte:

> Dear Cyrill,
>
> I can't tell you with what impatience I await Greegor's answer.

Dear dorayme,

have I already pointed out the advantages of some FF plugins?

;) (just in case...)

Gregor

--
http://www.gregorkofler.at ::: Landschafts- und Reisefotografie
http://www.licht-blick.at ::: Forum für Multivisionsvorträge
http://www.image2d.com ::: Bildagentur für den alpinen Raum

ioni

2007-07-25, 6:18 am

On 24 , 15:25, Gregor Kofler <use...@gregorkofler.at> wrote:
> ioni meinte:
>
>
>
> I don't know... did I already mention FireBug? This one was tricky -
> about 50 seconds. Set the font-size to 0em in die <a>s of the sidebar.
> Not smart, but it gets the job done. There might be a character
> somewhere within these tags that forces the extra space. Removing this
> is smarter.
>
> However, this gets boring. Perhaps you should try yourself. I could
> recommend one or two Firefox-Plugins...
>
> Gregor
>
> --http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://ww=
w=2Elicht-blick.at ::: Forum f=FCr Multivisionsvortr=E4gehttp://www.image2d=
..com ::: Bildagentur f=FCr den alpinen Raum

Dear Gregory,

I have tried your suggestion (along with installing the FireBug) and
it did not work out (at least in the way you ahve suggested it, as it
turned out later).
So I decided to make the whole thing from the scratch and see whether
it will be different and where are the bottlenecks, so to say.

I made a separate file with separate div and inserted all the images
in one line, double-checking the absence of any additional symbols in
between the tags (and even made it one line to even exclude the
possibility that CR/LF would be considered as such symbol.
Additionally to check the whole thing i put just two images withouts
links attached to them one after the other to see whether it is the A
HREF that is affecting the whole issue)

So, no, it did not work out as well!.

In fireBug i saw that the anchor tag on the linked images has of 2px
height which I was not able to change in any way that I have tried
(including making a separate class, a separate ID and writing the CSS
definition inline) - nope it did not work out at all!

Even more strange things happened to the images without the link -
Firebug shows their correct hieght (16 px) and then renders a 2 px
layer between the next image, which also has no link. There are no
tags, whitespace, carriage returns and line feeds in between them -
plain nothing. In fact, they both are "border:none; padding:0px;
margin:0px;" - as FB shows to my pleasure and however, FF renders as
if they are padded (which of course they are not).

So I tried to make the following:

I put the whole thing inside the DIV within one <P> tag and followed
your suggestion on making it font-size:0em - and it worked perfectly -
made the whole thing thing full of sence

Just in case you would like to test it for youself:
http://sunshine.by

My best regards,
Cyrill