Please explain…

@FalconWebMasterMay 27.2011

I’m working at the same objective here. I have two iframes, side by side, inside a div. The div has a border of 1px. When I use {float: left;} on the left iframe, it covers the div’s left border. But when I use {float: right;} on the right iframe, it does NOT cover the div’s right border.

To get the page to appear how I want, I only use the {float: right;}, but from what I know and have experiences with iframes and html, this shouldn’t work this way. Can someone explain this to me?

And the reason I’m using the div tag is that I want my content centered on the page, and while “body {text-align: center;}” makes things look fine in IE, it does not in Firefox 4. If there are any ideas why this is so, please add to reply.

Thanks

[CODE] div.main { width: 1006px; align: center; border: 1px #656565 solid; margin: 0 auto; }

<div class=”main”> <iframe class=”header” src=”header.html” width=”100%” height=”58px” frameborder=”0″></iframe> <iframe class=”leftpanel” src=”leftpanel.html” width=”216″ height=”500px” frameborder=”0″></iframe> <iframe style=”float: right;” src=”rightpanel.html” width=”789″ height=”300px” frameborder=”0″></iframe> </div>

[/CODE]

And yes, I know, the align tag in the div css is deprecated, but I find nothing on correct css for center alignment.

to post a comment

HTML

30 Comments(s) _↴

@FalconWebMasterauthorMay 27.2011 — #and yes, I know, the align tag in the div css is deprecated, but I find nothing on correct css for center alignment.[/QUOTE]

Nevermind this, I forgot I had the {margin: 0 auto;} in there.

@DanInMAMay 27.2011 — #looks to be a padding issue. every browser has slightly different default values for things like margin and padding for example. some browsers interpret the width as being the border + the stated width of the object others do not. you might want to try giving div.main padding:0; and cut down the width of the 3rd iframe a pixel or 2. If your trying to cover the entire area, you may even want to go with percentages instead for the width. .

@FalconWebMasterauthorMay 27.2011 — #I tried adding {padding: 0;} to div.main, used {float: left;} for leftpanel and {float: right;} for banner. This time, both left and right borders on div.main are covered. I left padding in place, reset leftpanel to have no float, and everything went back the way I want it.

Just to see, I changed padding on the left and right to 1px, put the floats in, and got the same results. Firefox and IE are both behaving the same way.

@mooremMay 31.2011 — #I tried adding {padding: 0;} to div.main, used {float: left;} for leftpanel and {float: right;} for banner. This time, both left and right borders on div.main are covered. I left padding in place, reset leftpanel to have no float, and everything went back the way I want it.

Just to see, I changed padding on the left and right to 1px, put the floats in, and got the same results. Firefox and IE are both behaving the same way.[/QUOTE]

Did you find your way solve it?

@FalconWebMasterauthorMay 31.2011 — #No, I just went with what worked and moved on. Still would like explanation should someone have one. ?

@WebJoelMay 31.2011 — #Your [B]first[/B] CSS rule should always be using the Universal Selector, below:

[B]* {padding:0; margin:0}[/B]

This strips proprietary padding and margin (from IE,) making most of IE's blunders correct and cross-browser. Compliant browsers do this by default. IE adds its own padding & margins to EVERY element, and these mysterious pixel overlapping faults become common. The Universal Selector Method levels the playing field.

@FalconWebMasterauthorJun 03.2011 — #Okay, here's a new problem, from the same code posted above. Works fine in IE9, FF4, but not Chrome. Chrome's inherent brokenness strikes again as it causes the right panel to clear left and drop underneath the left panel.

Now, I hate Chrome, I don't care if it looks right in Chrome, wouldn't use Chrome if I didn't have to. BUT, my boss uses Chrome, loves Chrome, and cares about it looking right in Chrome.

I've searched high and low for an answer on how to correct for this, and I find no articles in the past YEAR that are for this symptom. I disregard anything older than that because Chrome was still in Beta. I find stuff for FF AND Chrome, but FF4 works fine, so it's just Chrome that's (again) broken.

Does ANYONE have an idea, or have encountered and has a fix for this?

@criterion9Jun 03.2011 — #Okay, here's a new problem, from the same code posted above. Works fine in IE9, FF4, but not Chrome. Chrome's inherent brokenness strikes again as it causes the right panel to clear left and drop underneath the left panel.

Now, I hate Chrome, I don't care if it looks right in Chrome, wouldn't use Chrome if I didn't have to. BUT, my boss uses Chrome, loves Chrome, and cares about it looking right in Chrome.

I've searched high and low for an answer on how to correct for this, and I find no articles in the past YEAR that are for this symptom. I disregard anything older than that because Chrome was still in Beta. I find stuff for FF AND Chrome, but FF4 works fine, so it's just Chrome that's (again) broken.

Does ANYONE have an idea, or have encountered and has a fix for this?[/QUOTE]

Chrome has been out of beta for much longer than a year. It sounds like you've been coding for IE and now are trying to figure out why it isn't working the same elsewhere. A general best practice is to do the opposite and then fix IE quirks after you get everything the way you want it everywhere else. Just out of curiosity are you using a valid doctype?

@FalconWebMasterauthorJun 03.2011 — #No, I'm a complete noob who knows nothing about web development but bears the username "Falcon[U]WebMaster[/U]"

Please don't assume.

@criterion9Jun 03.2011 — #No, I'm a complete noob who knows nothing about web development but bears the username "Falcon[U]WebMaster[/U]"

Please don't assume.[/QUOTE]

Could've fooled me... Chrome in beta a year ago?

@FalconWebMasterauthorJun 03.2011 — #Back to my problem. Does anyone know a [U]reason[/U] this is happening and/or [U]have a fix[/U]?

@criterion9Jun 03.2011 — #Back to my problem. Does anyone know a [U]reason[/U] this is happening and/or [U]have a fix[/U]?[/QUOTE]

You never answered the question about the datatype declaration. Did you try the solution posted above with resetting the margin/padding? Did you read the explanation of box model above that explained why the border may or may not be included in the computation of width?

@FalconWebMasterauthorJun 03.2011 — #Did you try the solution posted above with resetting the margin/padding?[/QUOTE]

It overrode all the margin and padding settings I had set elsewhere. But already I set margin and padding to 0 on everything that I don't want to have margins or padding, anyway, so this didn't really help. I've been at this a few years and know how to compensate for cross-browser glitches.

Did you read the explanation of box model above that explained why the border may or may not be included in the computation of width?[/QUOTE]

Yes, and I compensated, but it has no relevance on my current issue.

Doctype Declaration: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

@FalconWebMasterauthorJun 03.2011 — #UPDATE:

Okay, I adjusted the width of the right panel iframe until it fit in Chrome where I wanted. Chrome forces a multi-pixel gap, even with margins and padding at 0. There is no way these will be flush, as it exists now, in any browser.

@criterion9Jun 04.2011 — #Perhaps if you posted a link we could fiddle with it and figure out what exactly the issue is?

@FalconWebMasterauthorJun 06.2011 — #http://www.tradingcomputers.com/testfolder/TClaptop.html

This is the version that works in IE and FF4.

@criterion9Jun 06.2011 — #I don't see the reset css as described above... did you decide not to use it?

@FalconWebMasterauthorJun 06.2011 — #Yes. As stated, that overrides other margin settings I use. I zero out margins and padding by default anyway.

@criterion9Jun 06.2011 — #The reset CSS goes above all other css rules. Your specified margins and such would then override the defaulted ones above. Without having a level playing field across all browsers (i.e. a reset of box model margins and padding) you'll just end up fighting a losing battle or end up with different css rules for each browser type.

@FalconWebMasterauthorJun 06.2011 — #Go ahead and try it, but it throws off the margin setting on my lists.

@criterion9Jun 06.2011 — #Go ahead and try it, but it throws off the margin setting on my lists.[/QUOTE]

Then you specify the margins and padding for ul, ol, li tags. I usually use something like

<i>
 </i>ul, ol, li{
 margin-left:1.5em;
 }

to start with. Then I make minor tweaks as needed.

@FalconWebMasterauthorJun 06.2011 — #It still doesn't help my overall problem.

@criterion9Jun 06.2011 — #It still doesn't help my overall problem.[/QUOTE]

I was under the impression that resetting margins and padding globally fixed your initial problem but introduced a problem with you list items?

@FalconWebMasterauthorJun 06.2011 — #Where did you get that impression? The only impact the * {margin: 0; padding: 0} has is on the lists margins/padding, I never said it fixed my overall problem.

@FalconWebMasterauthorJun 06.2011 — #So, I figured it out.

Nothing was wrong with my html or css, except for the fact that the Chrome was reading white-space where I have a carriage return in the html. That's what's different between Chrome and IE/FF4. IE/FF4 compensate for that, because no one wants to have their code all in one line, makes it hard to edit.

@criterion9Jun 06.2011 — #So, I figured it out.

Nothing was wrong with my html or css, except for the fact that the Chrome was reading white-space where I have a carriage return in the html. That's what's different between Chrome and IE/FF4. IE/FF4 compensate for that, because no one wants to have their code all in one line, makes it hard to edit.[/QUOTE]

That doesn't make any sense since the rendering engines discard additional space characters.

@FalconWebMasterauthorJun 06.2011 — #Apparently Chrome doesn't follow that rule.

@criterion9Jun 06.2011 — #What specific white space did you remove?

@FalconWebMasterauthorJun 06.2011 — #

[CODE]<iframe src="blahblah.html">
 <iframe src="blahblah.html">
 [/CODE]

to

[CODE]<iframe src="blahblah.html"><iframe src="blahblah.html">[/CODE]

@criterion9Jun 06.2011 — #Are you embedding two iframes inside each other? You have no closing tag for the first iframe. I'm surprised that works at all.

ex:

<i>
 </i>&lt;IFRAME src="foo.html" width="400" height="500"
 scrolling="auto" frameborder="1"&gt;
 [Your user agent does not support frames or is currently configured
 not to display frames. However, you may visit
 &lt;A href="foo.html"&gt;the related document.&lt;/A&gt;]
 &lt;/IFRAME&gt;

Found at the bottom of this page:

http://www.w3.org/TR/html4/present/frames.html

Also in #HTML _↴

Getting Spaces Between Tables in Firefox Only!Randomize/shuffle Playlist <option> tag and Fonts

Success!

Help @FalconWebMaster spread the word by sharing this article on Twitter...

Tweet This

Please explain…

30 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Please explain…

30 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

30 Comments(s) _↴

Also in #HTML _↴