26 replies [Last post]
GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 7 years 43 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

hello,
i've got a simple layout and i *think* i'm getting hit with the IE double margin bug. i was able to fix it on the left (data) column with display:inline;, but i cant seem to fix it with the right hand columns! when i add display:inline; to those divs, all sorts of wierd things start happening in FF and IE.

how do i get rid of the extra spacing between columns in IE?

CSS:

html, body { 
    font-family: helvetica, arial, sans-serif;
	background: #ffffff /*url("../assets/bkg2.gif") repeat-x*/;
	font-size:92%;
    }


* { margin: 0; padding 0; } /*global margins and padding*/


#strip { background-color:#000000; height: 3px; font-size:1px; /*font size for IE*/  }	
#data  {float: left; width: 32em; background-color: #999;  margin-left: .3em; display: inline; /* inline for IE double margin fix*/ }

#nav { margin: 0 0 0 33em; height: 1.5em; background-color:#000000; }	
#nav ul {margin: 0; padding: 0;} /*for firefox */
#navlist li { display: inline; list-style-type: none; padding-right: 20px;  }
a.main-nav:link {color:#fff; text-decoration:none;}  /* unvisited link */
a.main-nav:visited {color:#fff; text-decoration:none;}  /* visited link */
a.main-nav:hover {color:#009900;}   /* mouse over link */
a.main-nav:active {color:#009900; text-decoration:none;}   /* selected link */


#sidebar { margin: 0 0 0 33em; width: 24em; height: 150px; background-color:#666999;}
#footer { clear: both; height: 50px; background-color: #666;  margin-left: .3em; }


XHTML:

<body>
<div id="strip"></div>
<div id="data">
<h1>Website Name</h1>
  <p>words</p>
  <p>words</p>
  <p>words</p>
  <p>words</p>
  <p>words</p>
  <p>words</p>
  <p>words</p>
  <p>words</p>
</div>
<div id="nav">
	<ul id="navlist">
	<li><a class="main-nav" href="#" id="current">HOME</a></li>
	<li><a class="main-nav" href="#">SERVICES</a></li>
	<li><a class="main-nav" href="#">PROJECTS</a></li>
	<li><a class="main-nav" href="#">ABOUT</a></li>
	<li><a class="main-nav" href="#">LEARN</a></li>
	</ul>
</div>

<div id="sidebar">sidebar<p>words</p><p>words</p><p>words</p></div>

<div id="footer"></div>
</body>

thanks for any help or ideas!

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

Hrm .. I have a very similar problem. Not sure in your case, but your and my problem doesn't appear to be THE "double-margin" bug since you fixed your left most with the inline param. But I could be wrong. Yours renders broken in FF and Opera which (I believe) don't have that bug.

Here is my example (problem). Not sure if it's the same, but any help would be appreciated. I've started pulling my hair out. http://beta.ubergoobers.com/css_problem/index.html

Mine renders fine in Opera and Firefox, just not IE. Where GOLGO-13's doesn't.

If this issue is different, I will start another thread.

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

if anyone wants to see GOLGO-13's prob in action, here ya go:
http://beta.ubergoobers.com/css_problem/index2.html

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE double margin? how do i fix it in this case?

How would it (they) look like if the html and css code were valid (although there's a problem with ie 6 - fixed with ie 7) ?

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

well.. mine was valid until I started messing with it recently trying to fix this problem. I will retest to make sure everything is valid.

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

Ok.. mine now validates as good CSS and XHTML. Go fig I didn't have quotes around the onclicks for you guys to play with hiding the problem div. err.. but all checks out now.

XHTML:
http://validator.w3.org/check?uri=http%3A%2F%2Fbeta.ubergoobers.com%2Fcss_problem%2Findex.html

CSS :
http://jigsaw.w3.org/css-validator/validator?uri=http://beta.ubergoobers.com/css_problem/index.html

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE double margin? how do i fix it in this case?

For ie 6, you can try to add float:left; width:100%; in #info_box

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

Very nicely done. Any idea why it wouldn't fall into place without width 100%. . I tried padding and margins set to 0 without luck.

I had used float: left; already on it, but it alone just did weird stuff.

Anyway.. if you have an idea why (so it's in my logics next time) it would be appreciated.

Otherwise, consider me resolved (for now Laughing out loud )

Thanks DanA

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE double margin? how do i fix it in this case?

Not really resolved as you must add a background color to #infobox , and have a line-height for your br tags.
Is float-left still useful in .info_data ?

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

well.. if I take out float: left; and leave in the width: 100%, it doesn't have the effect I want. The div drops. But that info_box div is only a container, it won't have text or have a need for a background. Well, yeah, I guess it might have a need for a background color.. here, let me add .... ok added. Now I have to add a color or it won't validate without warnings.. ok done..

It's just going to contain a few divs, nothing else. Actually maybe a few span's instead.. .but I've made it with divs once already. Took them out for simplicity sake here.

But line height for br?. .. I have run into this before on another project, but why do you mention it specifically?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE double margin? how do i fix it in this case?

Dan 'must' is a very emphatic statement, for the nature of the warning it's not so much a case of 'must' as 'must understand how it may prove a problem' it's an accessibility warning meant to prompt to the fact that there 'could' be a possible problem.

@ ubergoober was your original problem not an IE 3px jog bug?

Hugo

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

DanA
DanA's picture
Offline
Elder
Last seen: 11 years 29 weeks ago
Timezone: GMT+2
Joined: 2004-08-14
Posts: 1087
Points: 2

IE double margin? how do i fix it in this case?

Quote:
Is float-left still useful in .info_data

Firefox will not display <br /><br /> as IE without a line-height.

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

Hugo, seems like that's what it was, but I couldn't get rid of it reading all the IE bugs..... man are there plenty.

It didn't seem to work with adding just height: x%; x being 1-100, and it didn't fix just adding float: left; .. I just never tried them both at the same time. That did the trick. I read several pages on the 3px bug, but the ones I was reading just said 'add height: 1%;' .. so I did Wink and it didn't fix it. Added the both per dana and viola.

DanA - FF won't display a lot correctly without a line height. The pre tag (had to use it, router output) was a nasty one for me for weeks. hr tag and I know another at least in the project I was working in. Looked great in IE without adding styles to those tags, but then loaded in FF (some outlaw bandit in the office tries to be the super stuborn geek "WINDOZE BLOZ" who HAD to use FF) and it was ALL SPACED OUT.. WHOA.. then started the nightmare. Never thought it was something so simple as 'removing' styles by setting styles to the elements. Removing padding here, margins there, line height here .. blah.. FF was a headache that week.

DisinfectedBarfbag
DisinfectedBarfbag's picture
Offline
Enthusiast
Kent, UK
Last seen: 1 year 32 weeks ago
Kent, UK
Timezone: GMT+1
Joined: 2005-08-06
Posts: 411
Points: 1

IE double margin? how do i fix it in this case?

Excuse me for asking, but wasn't the thread started by GOLGO-13 who it appears has not had a single answer, but was then hijacked by ubergoober who then had his problem sorted. At least that's the way I see it.

And if this is the case,

1. ubergoober should have started a different thread of his own, and,

2. what about the original OP's problem? or has that been fixed also. There has been no other post from him/her :?

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

Well, Disinfectedbarfbag, I wasn't attempting to hijack. It appeared to possibly be the same problem. I went so far as posting his code on the web, and noting that if the problem wasn't the same, then I would start another thread. It happened that DanA was able to assist me immediately, and we haven't even gotten off page one of the thread yet.

Also, the original comment from DanA was directed at GolGo-13 as well, who hasn't responded yet for whatever reason. He has had the same chance as I. Probably it's the weekend and he started the thread and won't revisit until monday, is my guess.

So, no, the thread hasn't been hijacked, it just hasn't been revisited by GolG0-13.

Also, being a moderator in previous forums, we usually encourage people with similiar problems to work together in a single thread. Like I mentioned in post #2, that I thought they were the same and if not I would repost. I had no intention to take over (and I don't think I have yet, and surely wasn't my intention.)

I'm still monitoring this thread, and will still try to help Golgo if I can.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE double margin? how do i fix it in this case?

ubergoober disinfecteds point is fair comment as is your reply.

As a moderator on this forum I ought to point out that in our posting guidelines we ask and prefer that people start new threads due to the confusion it can cause on occasion, but in this instance it's no great problem , although if you can sort the OP problem out that would redeem yourself completely Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 7 years 43 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

IE double margin? how do i fix it in this case?

okay... thanks for pointing out the validation error.
the CSS now validates.. and i'm ignoring the color warnings for the moment. the xhtml validates as xhtml strict.

unfortunately, that did not fix the problem.
IE and FF are still showing differnt widths between #data and #sidebar.

IE shows a width of 13px.
FF shows a width of 9px.

here's the valid code reposted. i'll also put the file online for a little while if anybody wants to take a look at it live.

http://fresh-off.com/layout.htm


CSS:

  
html, body {   
    font-family: helvetica, arial, sans-serif;  
	background: #ffffff /*url("../assets/bkg2.gif") repeat-x*/;  
	font-size:92%;  
    }  
  
  
* { margin: 0; padding: 0; } /*global margins and padding*/  
  
  
#strip { background-color:#000000; height: 3px; font-size:1px; /*font size for IE6*/  }	  
#data  {float: left; width: 32em; background-color: #999;  margin-left: .3em; display: inline; /* inline for IE double margin fix*/ }  
  
#nav { margin: 0 0 0 33em; height: 1.5em; background-color:#000000; }	  
#nav ul {margin: 0; padding: 0;} /*for firefox */  
#navlist li { display: inline; list-style-type: none; padding-right: 20px;  }  
a.main-nav:link {color:#fff; text-decoration:none;}  /* unvisited link */  
a.main-nav:visited {color:#fff; text-decoration:none;}  /* visited link */  
a.main-nav:hover {color:#009900;}   /* mouse over link */  
a.main-nav:active {color:#009900; text-decoration:none;}   /* selected link */  
  
#sidebar { margin: 0 0 0 33em; width: 24em; height: 150px; background-color:#666999;}  
#footer { clear: both; height: 50px; background-color: #666;  margin-left: .3em; }  
  
h2 {color:#ffffff;}  


XHTML:
  
<body>  
<div id="strip"></div>  
<div id="data">  
<h1>Website Name</h1>  
<h2>#data div</h2>  
  <p>words</p>  
  <p>words</p>  
  <p>words</p>  
  <p>words</p>  
  <p>words</p>  
  <p>words</p>  
  <p>words</p>  
  <p>words</p>  
</div>  
<div id="nav">  
	<ul id="navlist">  
	<li><a class="main-nav" href="#" id="current">HOME</a></li>  
	<li><a class="main-nav" href="#">SERVICES</a></li>  
	<li><a class="main-nav" href="#">PROJECTS</a></li>  
	<li><a class="main-nav" href="#">ABOUT</a></li>  
	<li><a class="main-nav" href="#">LEARN</a></li>  
	</ul>  
</div>  
  
<div id="sidebar"><br /><h2>#sidebar div</h2><p>words</p><p>words</p><p>words</p></div>  
  
<div id="footer"></div>  
</body>  

also, with IE7 coming, will this * { margin: 0; padding: 0; } still work? i'm unclear about that.

and yup, the weekend and a family party caught my attention for the last few hours. anyhow, i'm glad uber was able to get his problem fixed, but i'm still hoping somebody might be able to give me a little bit of direction too!

Smile

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

I'll take a look. I work nights, so I have some time tonight to have a look see.

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

ok .. have a look here. Don't ask, cause I really don't remember what all I did :? I'm at work, so it was in between network outages and calls...

http://beta.ubergoobers.com/css_problem/index2.html

XHTML validated good:
http://validator.w3.org/check?uri=http%3A%2F%2Fbeta.ubergoobers.com%2Fcss_problem%2Findex2.html

CSS validated good:
http://jigsaw.w3.org/css-validator/validator?uri=http://beta.ubergoobers.com/css_problem/index2.html

Some CSS warnings, but nothing that's not obvious.

I created a wrapper around nav and sidebar to position those two divs to the left along the inside wall of that div. Getting the to divs to position along the outside right wall of data didn't look like it was happening.

hope this works.. and redeems me Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE double margin? how do i fix it in this case?

The universal selector '*' is a legal CSS property, you are probably thinking of it's use as part of the star selector filter * html #id {} IE7 will not read the star selector filter but the reasons for needing to use it should be largely corrected in IE7 so it should be ok to feed IE6 rules this way and IE7 should read the rules that IE6 stumbled on or didn't understand. The universal selector used in it's correct sense is understood by all.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 7 years 43 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

IE double margin? how do i fix it in this case?

hey uber, thanks for trying. unfortunatly, the structure seems to fall apart in FF. Sad

it was pointed out to me that i'd forgotten to change all the dimensions to EMs. this is my first time expiermenting with an all em layout, and i only intended to use pixels in the #strip div as its height wasnt displaying correctly across browsers. anyhow, since #strip will end up be just decorative, i've removed it for the time being, and have made sure all dimensions are in EMs.

as a result, the spacing between #data and #sidebar has shrunk down to 3pixels. i've read about a 3pixel bug in IE. is that what i'm experiencing?

i've updated the code at: http://fresh-off.com/layout.htm
but still have that gap between columns... :?

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

ha.. you're right. FF breaks it. blah .. I have begun starting to hate CSS for layouts. And really I should hate the browsers, but nothing I can do about that. Could just use tables and then use divs for 'special' areas.

Anyway .. I'm back at work. I may have a go at it tonight.

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

you have

#nav { margin: 0 0 0 33em; }
#sidebar { margin: 0 0 0 33em;}

which is adding most of the gap, is this intentional? Are you wanting a gap in there? replace 33em with 0 on each and the gap goes to the 3px.

I'm still working on the 3px.

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

http://beta.ubergoobers.com/css_problem/index2.html

spaces gone between divs in IE and FF, I think that's what the OP was regarding.

Only things I changed was 33em on margin for nav and sidebar, and added the wrapper style and div.

That fixes the 3px

GOLGO-13
Offline
Enthusiast
seattle.usa
Last seen: 7 years 43 weeks ago
seattle.usa
Timezone: GMT-8
Joined: 2004-09-07
Posts: 62
Points: 27

IE double margin? how do i fix it in this case?

wow! thanks!

rats.. seeing as how you fixed it before i could, i shoulda checked back in here earlier!!

so.. eventually i sorta came up with a solution of my own.. on the bright side, i prefer the way i've rearanged the order of divs in the html.. it will make more sense to screen readers... on the bad side.. now IE is throwing 1 extra pixel at me in heights.. Oups

i'll paste that code below in case anybody beside me is ever interested. warning, it might be kinda Frankenstien.. uses ems for width, and px for margin heights.. woulda preferred it to be all ems.. but, doing that just makes it harder to keep track of the IE height issues.. guess my CSS just isnt that strong yet.

thanks again uber.. i'm going to study your solution quite thoroughly tommrow afternoon, seeing as how it doesnt seem to be throwing any bugs or anomalies!

my "solution"
CSS:

body { font-size:100%;}
div#strip { background-color:#000000; height:5px;}
div#header { background-color:#999999; height:5em; width: 30em; float:left; clear:both;}
div#nav {background-color:#FF9900 ; margin-bottom:0;}
div#data {background-color:#009900; float:left; width:30em; margin-left:-30em; clear:right; margin-top: 43px;}
div#sidebar { background-color:#66CCCC ; float:left; width: 20em; margin-left:0em; margin-top:-18px;}
div#footer {background-color:#CC9966 ; display:block; clear:both;}

*{ margin: 0; padding: 0; } /*global margins and padding*/

html:

<body>
<div id="strip">&nbsp;</div>
<div id="header"><h1>header</h1></div>
<div id="nav">links links links links links</div><br />
<div id="data"><h2>data</h2><p>words</p><p>words</p><p>words</p><p>words</p><p>words</p></div>
<div id="sidebar"><h2>sidebar</h2><p>word up</p><p>words</p><p>words</p><p>words</p><p>words</p></div>
<div id="footer">FOOTER<p>words</p><p>words</p>
  <p>words</p><p>words</p><p>words</p></div>
</body>

*notes*
my solution uses negative margins on #data and #sidebar.
the extra height pixel appears in IE between #header and #data. and then again between #nav and #sidebar. the margins are currently set to show a small gap between divs. if looked at closely, there a 1pixel differnce in IE. Crying

http://fresh-off.com/new-layout.htm
uber, there's a link to it, i'll leave it up for a few days in case you want to see what my frankenstien attempt looked like! thanks again friend!

ubergoober
Offline
Regular
Last seen: 15 years 29 weeks ago
Timezone: GMT-6
Joined: 2006-05-14
Posts: 14
Points: 0

IE double margin? how do i fix it in this case?

try replacing yours with these:

div#data {background-color:#009900; float:left; width:30em; margin-left:-30em; clear:right; margin-top: 42px;}
div#sidebar { background-color:#66CCCC ; float:left; width: 20em; margin-left:0em; margin-top:-19px;}

That takes the spaces out in IE, but I don't know the effects for FF.

Positioning finely like that, I am personally trying to stay away from. At least for base layouts.

I will note that imbedding divs in divs is something you have to come to terms with. Looks like, in both your layouts, that you may have the same mind set I had, just make divs and position them on the page. Well, doesn't always work so well. You will still sometimes have to make divs, position that div, then place divs inside to position them where you want them. Kinda like tables inside tables. That's probably the most important thing I've learned doing my css layouts. Simplicity, which you think css will provide, isn't the case. CSS layouts have become more of a headache than tables for me, but have more benefits.

Just some friendly advice. Laughing out loud

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

IE double margin? how do i fix it in this case?

and good advice!

Nesting of elements is an important concept and one that is key to layouts and how elements flow regardless of whether were talking tables or CSS-P

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me