 |
 | Home | Contact Us | FAQ | Search & Site Map | Link to Us |
 | Sign In | Join | Other 45 Sites in Network |
| HomeDiscussion GroupsGeneralPHPASPPerlColdFusionFlashHTML, CSS, ScriptsBrowsers |
Webmaster Forum / HTML, CSS, Scripts / CSS / July 2007Floating is FF
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 In article <1184835667.323999.82880@j4g2000prf.googlegroups.com>, > Dear all, > [quoted text clipped - 17 lines] > > 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>  Signaturedorayme > <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. SignatureBerg > > <div style="float:right; display:inline; width:120px; height:600px; > > padding:5px;">Adsence block</d> [quoted text clipped - 13 lines] > -- > 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! > > > <div style="float:right; display:inline; width:120px; height:600px; > > > padding:5px;">Adsence block</d> [quoted text clipped - 31 lines] > > - - Please note that this only happens in FF 2.0 which I have installed. IE6 shows everying perfectly > 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. SignatureBerg > > If the block does not have the JavaScript refence to Adsence, then it > > positions perfectly in any browser. [quoted text clipped - 10 lines] > -- > 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 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 Signaturehttp://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 meinte: > [quoted text clipped - 14 lines] > > --http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://www.licht-blick.at ::: Forum f?r Multivisionsvortr?gehttp://www.image2d.com ::: Bildagentur f?r 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 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 Signaturehttp://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 meinte: > [quoted text clipped - 14 lines] > > --http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://www.licht-blick.at ::: Forum f?r Multivisionsvortr?gehttp://www.image2d.com ::: Bildagentur f?r 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 <!--myCounters--> 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 In article <1185266746.624969.180870@57g2000hsv.googlegroups.com>, > Dear Greegor, > [quoted text clipped - 19 lines] > Regards, > Cyrill Dear Cyrill, I can't tell you with what impatience I await Greegor's answer. Regards dorayme Signaturedorayme 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 Signaturehttp://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 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 Signaturehttp://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 meinte: > [quoted text clipped - 15 lines] > > --http://www.gregorkofler.at::: Landschafts- und Reisefotografiehttp://www.licht-blick.at ::: Forum f?r Multivisionsvortr?gehttp://www.image2d.com ::: Bildagentur f?r 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 |
Reply to this Message |
 Sign In
 Join
 My Latest Posts My Monitored Threads My Blog My Photo Gallery My Profile My Homepage Start New Thread Enable EMail Alerts Rate this Thread
|
©2009 Advenet LLC Privacy Policy - Terms of Use
This website includes both content owned or controlled by Advenet as well as content owned or controlled by third parties.