30 replies [Last post]
charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Here's my CSS:

my html is:

asdfasdf

asdfasd Here

asdfasdf

asdfasd Here

In IE6 i get an issue where i see an extra space on background div... yet in ie7 and ff it looks fine..

What's the problem?

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

<!DOCTYPE html PUBLIC

Untitled Document

asdfasdf

asdfasd Here

asdfasdf

asdfasd Here

This is the full code

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

try validating first. You

try validating first. You can't use an id more than once on a page.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Sorry how's this: <!DOCTYPE

Sorry how's this:

Untitled Document

asdfasdf

asdfasd Here

asdfasdf

asdfasd Here

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

charlie, why are you trying

charlie, why are you trying to recreate the wheel? You are using an extraneous div for clearing purposes when it's not needed. What happened with the results from the other clearing thread?

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

well I know the new way of

well I know the new way of the after but I kinda like the traditional way... because then the css has a whole bunch of div:after.. when i want the css to be clean as possible... do u recommend another way?

and do how to fix the problem above?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

I use the simplest way:

If you use the clearfix method you wouldn't need to add the after psuedo class to every element you wanted to have contain floats - just add the clearfix class. That's the beauty in it.

I personally would do this:
add overflow: hidden; to the container (div2). This has FF and IE7 contain floats. Then you simply need to set hasLayout for IE6 and it will follow suit. How you do that is up to you. I would do this
* html #div2 {height: 1%}
in a separate stylesheet. There are other ways as mentioned in your previous thread.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Great! that fixed the IE

Great! that fixed the IE issue... but I still wonder.. why use overflow: hidden.. when its already looking fine on ie7 and ff.. I know when I added the height it fixed the ie6 issue but what's the purpose of overflow if it's fine in ff and ie7 already?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

have you removed the

have you removed the extraneous clearing div?
FF and IE7 (for a different reason) need overflow: hidden; to contain floats. Are you sure they contain the floats without them? I don't thinks so (unless div2 is floating as well)

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

I am lost completely now...

I am lost completely now... I was still using the extra clearing div... for the reason I told u.. I didn't want to add after for everything container i need to clear... Do u mind explaining to me how it works.. or could u write a code of what u want exactly?

with the extra clearing div.. I left it there and added the height: 1%; to div2 and that fix the ie issue

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

<!DOCTYPE html PUBLIC

Untitled Document



asdfasdf


asdfasd Here




asdfasdf


asdfasd Here




charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Another example

Untitled Document

asdfasdf

asdfasd Here

asdfasdf

asdfasd Here



asdfasdf

asdfasd Here

asdfasdf

asdfasd Here

This is a new example... Everything's fine and clearing as I want to...
As you can see I'm using the new method... But notice how the CSS has to :after for clearing... this is what i mean by not a cleaner css just a cleaner html... am I doing it the wrong way? also like u said... I have to add overflow: hidden for what though.. I did add it even though I don't know for what reason...

Let me know what's the cleanest way to do what I'm doing in the HTML above..

thankss for all you help wolf

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

Okay, I'll try to explain as

Okay, I'll try to explain as best I can.

There are multiple ways of containing floats.

One way is to put a clear property on a sibling element following the floats. There isn't always such an element available - and adding a div for the sole purpose of clearing is frowned upon. It uses extraneous markup for no good reason. This is why I said to eliminate the div classed clearing.

Another way to contain floats is to use css to place a sibling after the floats which can then be cleared. This is the creation of this site's creator Tony Aslett's clearfix method. It places the content using the after psuedo class which is also cleared.
Please read and understand how this works. All that is needed is to add the .clearfix class to any element you want cleared. Then in the css place the rules once - no need to add them to each and every element.

A third way is to add overflow: hidden (or auto) to the parent. This works in Firefox because the specs say it should. It works in IE7 because it sets hasLayout in that browser which will then auto enclose floats. It does not work in IE6.

IE6 will auto enclose floats on it's own - all it needs is the containing element to have hasLayout. How you go about setting this varies. You would use a different method if using the clearfix method than the overflow method.

Note that you don't need to use multiple methods. There are other ways as well (as seen in gary's article). But these are the basics.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

ok which is the best way

ok which is the best way then? tony's or the overflow hidden? which do u recommend having in mind the most flexibility?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Hi Charlie, As I said in

Hi Charlie,

As I said in the article you were pointed to, no one method works for every situation. But, at least one method will work for any given case. It is up to you to become familiar with the options and their gotchas, so you can chose the most appropriate for your case.

I find the overflow: method to be generally useful (combined with an IE hasLayout trigger), and Tony's clearfix method to be a good means when overflow: causes problems. The display: methods are less useful due to IE's miserable lack of support for css2.1.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Great.. Appreciate that..

Great.. Appreciate that.. I've decided to use the overflow/trigger for the following example but still having a little problem.... In FF everything is fine.. but in IE7 and 6, I don't see the the bottom margin applied like in FF.. Please see the code below:

Untitled Document

asdfasdf

asdfasd Here

asdfasdf

asdfasd Here

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

I think this is a

I think this is a manifestation of IE's buggy support of margin collapse. I haven't messed with this bugginess much, so can't provide definitive help. Try giving the container element a 1px bottom padding.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

I got nothin' there... same

I got nothin' there... same issue.. don't see the extra 5px at bottom like in FF.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

anything?

anything?

wolfcry911
wolfcry911's picture
Offline
Guru
MA, USA
Last seen: 5 years 33 weeks ago
MA, USA
Timezone: GMT-5
Joined: 2004-09-01
Posts: 3224
Points: 237

remove the margin from the

remove the margin from the floats and use padding on the container (top and bottom anyway, you can keep the horizontal margins).

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

that did the job for the

that did the job for the bottom margin... still one more problem.. in ie6 it adds an extra 5px on the left.. while in ie7 and ff it looks fine showing only 5px on left margin on div1.. here's the code:

Untitled Document

asdfasdf

asdfasd Here

asdfasdf

asdfasd Here

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

Look up 'IE double margin

Look up 'IE double margin bug' for the answer to that one.

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

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

great.. display: inline; is

great.. display: inline; is genius! Thanks for everything guys (Hugo, Gary, Wolf)...

In respect to wolf and gary.... Hugo I have question for u... in the above code that I gave to wolf where ie6 doesn't show that extra 5px margins... is there anyway besides removing margin and adding padding to container?

like so they way display:inline fixed that double margin....

is there a css property that can trigger that extra 5px bottom margin for ie?

this will probably be my last question on this topic.. everything is pretty much solved... just curious on this one.....

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

charlieconcepcion

charlieconcepcion wrote:
<snip> in the above code that I gave to wolf where ie6 doesn't show that extra 5px margins... is there anyway besides removing margin and adding padding to container?

Since it's been an hour or so, and it's after 9PM in Hugoland, I'll jump in. IE just does not handle margins they way the specs say margins should work. In many cases, you simply must work around the buggy behavior. Since IE collapses margins it's not supposed to, we eliminate the margin on the inner container and use padding on the outer container to simulate it.

Quote:
like so they way display:inline fixed that double margin....

Nope, no magic bullet here.

Quote:
is there a css property that can trigger that extra 5px bottom margin for ie?

The problem is that IE collapses the margin[1] right on through the outer containers, body, html and into the mythical container that can't legitimately exist outside html. It's a bug that you just have to work around sometimes.

Quote:
this will probably be my last question on this topic.. everything is pretty much solved... just curious on this one.....

I'd say IE qualifies as a curiosity.

cheers,

gary

[1] Float margins are not supposed to collapse at all.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

charlieconcepcion
Offline
Enthusiast
Last seen: 11 years 51 weeks ago
Joined: 2007-04-03
Posts: 102
Points: 0

Thanks Gary!.. Great

Thanks Gary!.. Great answer... that's all I needed... PROBLEM SOLVED! Smile though u can't never really solve IE Wink.. that u all for the great help.. wolf... gary.. hugoo

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

Gary wrote:and it's after

Gary wrote:
and it's after 9PM in Hugoland, I'll jump in

I thank you and couldn't have put it better myself Smile hugoland was sent to a dark place of limbo, doing tests and troubleshooting my adsl connection so that I could provide my ISP with the information as to what was wrong with my line and how they could best fix it :? and I even pay them to let me do this Smile

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

What? You have Verizon,

What? You have Verizon, too?

I spent more than an hour each on two occasions trying to
1)explain to the dipwad at the 'help' desk that a non responsive name server would not be helped by my resetting my router or rebooting Windows, and yes, the name server was important (didn't know what it was), and yes, it does belong to them (no it doesn', whatever it is), and yes, it is beyond your scope but still Verizon's responsibility (don't you dare try to bail), and get off your fat @ss and have your supervisor initiate a network trouble ticket, and
2)more of the same over blocked ip addy blocks. Or maybe it was misconfigured routers in their server farm. Who cares? Fix it.

You have my sympathy,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

Just be greatfull you don't

Laughing out loud Just be greatfull you don't have to suffer a megalomaniac Telecom company placing a cease on your line removing your service altogether (fatal and non recoverable) all for absolutely no reason (engineer pulled wrong plug - all it takes)

Your ISP not having a clue why no adsl line tell you it's a LUU changeover, "hang in and service will return", two days pass , nothing, get back to them to be told "Oh no it isn't it's just been cancelled, you'll have to order a new package as from fresh! no you can't have the one you were on you have to a variable speed 'max' service which may constantly vary in throughput speed, and you'll have to wait for the 5 working days it takes to order"

Get new connection, first day nice fast 2Mb throughput as of last Saturday slowing down and on the dot of 6pm no service plenty of sync high SNR good low attenuation, stable line, absolutely no throughput.

Dealing with Tech support is the worst of it as it takes you 3 days of hanging on for half an hour queuing to talk to them each day before you finally manage to convince them that you aren't clueless, whereupon they start to open up and stop saying daft things like have you changed the filter.

The frustration last night was having to log onto the Telecom testing account and then run their bypass speedtester to get official figures on throughput to exchange, cos it doesn't actually work telling you you can't run a test while using the telecom adsl connection :? contrary to all instructions, so decide to run ISP tests, they just hang, gather all sorts of info from tech adsl sites build my case for it being their problem ring back this morning start ranting about the speedtester only for them to say " oh yes it's well known it's hopeless and doesn't work most of the time" :? " but looking at things I feel pretty sure it's a problem with our end of things" :curse:

I'm drained of the will to go on, oh and all this has occurred exactly as I became rather busy and having to get my head down and work.

Me life's a nightmare Smile

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

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

I think the hardest part of

I think the hardest part of dealing with these idiots is getting them to understand/admit that they have the problem and that yes, indeed, they can actually issue a trouble ticket to the right department.

Or … it may be operator error and have you got an Aunt Penelope who can come in and reconnect everything for you?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 day 32 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

I think the hardest part of

I think the hardest part of dealing with these idiots is getting them to understand/admit that they have the problem and that yes, indeed, they can actually issue a trouble ticket to the right department.

Or … it may be operator error and have you got an Aunt Penelope who can come in and reconnect everything for you?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

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

I've come to a conclusion

I've come to a conclusion based on dealing with these matters that there is a three strikes and we fold rule in operation, the first they mumble away, say they'll look into things , nothing is heard, you are forced to contact them a second time , now they ask you to run round the block 5 times, ensure the furniture has been re-arranged and the dog walked and when that's done to to get back to them with you stats , stress level, pulse rate etc, if you do this, on the third contact they actually then start to look at their gear and realise that interestingly plain as day thre is an apparent oddity on the connection.

It ticks me off that I had to find out for myself that the line is 'profiled' and that that profile is based on max sync speed, stable line rate SNR, connect and sync at a low SNR and the profile is dropped down re-connect at higher SNR and the line is re-profiled over three days gradually increasing line throughput, and crucially then the router must be left connected for at least a week for maximum speed rates.

It ticks me off that they didn't think to tell me that re-connecting within 15 minitutes didn't release the Ip address allocated and it wasn't till I reconnected after an hour faffing around with speed tests that I found that I had a new addy allocated from the pool and a sudden boost to over 3Mb, when I mntioned that the engineer remarked "interesting yes it shouldn't matter, but I can see you're on a different pipe now" hmm wonder whether that could have anything to do with matters?

Honestly a simple bit of effort initially and they likely would have got to the bottom of this far faster, I've still got an open ticket which they haven't updated as yet :rolleyes:

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