CSS help! 2121 Responses

Last post: 4 years, 6 months ago | Thread started: Nov 25, 08, 6:17 a.m.

RespondNew TopicDisable Images

• Greedo

  I have a css conundrum...
  http://www.xseet.com/products/to…
  On the right hand side there is a 'downloads' and 'contact' container which somehow ends up at the bottom on IE only, it works in Firefox, safari, opera etc. It should by all means be up there, there's enough space and i made it float right. Yet somehow it doesn't. Any ideas?

  Nov 25, 08, 6:17 a.m. – Permalink

• OhYeah

  Not sure if this will help but have you tried to float the download part to the left and not the right? I have had problems in the past with float:right in general.

  • aye, thats how it was originally and dinnae work– Greedo1/4

    Is the download bit the same size as the rest of the right hand sides?– OhYeah2/4

    I fucking hate IE, piece of shit browser! grrrrr– OhYeah3/4

    yea they're both 233 px
    
    – Greedo4/4

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:25 a.m. – Permalink

• Thompy

  Throw in a clear:both somewhere eh ken?

  • but there's a breaker in there that does that...
    .breaker {clear:both;}
    – Greedo1/3

    aye mon then?– Thompy2/3

    lol– OhYeah3/3

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:28 a.m. – Permalink

• doctor

  I assume the problem occurs in IE6?
  Have you tried narrowing the boxes? What happens if you do - do they still float around in the bottom?
  Make sure you don't trigger IE into quirks mode. That shit is like a parallel universe.

  • IE 7 as well.– OhYeah

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:41 a.m. – Permalink

• benfal99

  CSS wont help you, because that band sucks!

  • amen brother. no idea what the hype was/is about.– airey1/2

    its because of the iPod ad– benfal992/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:43 a.m. – Permalink

• Thompy

  aye it's probably to do with ie's interpretation of the box model.

  • +1– pylon1/2

    yep, ends up too wide in ie– flyingnowhere2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:45 a.m. – Permalink

• Dancer

  Sorry haven't looked at the code but:
  It's not the Double float is it?

  If you having a floated item in another floated item IE requires you to put a display:inline in there

  • no, two floating bits next to each other, not within each other...– Greedo

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:45 a.m. – Permalink

• pylon

  Agree with dr — try narrowing your contact-wrapper from 233 to like 200 or so.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:45 a.m. – Permalink

• Greedo

  i already narrowed it, originally it was 238, that way it was perfectly distributed across the container. i can make it even smaller, but i somehow doubt thats it...

  • Try it already.– doctor1/2

    +1– pylon2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:48 a.m. – Permalink

• Dancer

  Put some BG colours in there so you can see the divs properly

  • Good way to trouble shoot, or add on borders.– Thompy1/7

    +1
    – 7point342/7

    Not borders. It will push everything out by 2 px– Dancer3/7

    hahahaha, I usually just take that into account– Thompy4/7

    Don't add borders, they take up an extra 2 pixels of width which can throw out pixel specific width divs.– jamble5/7

    Dancer you speedy motherfucker ..– jamble6/7

    +1– pylon7/7

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:49 a.m. – Permalink

• 7point34

  greedo,

  are you floating the divs left to get them to line up?

  i dont see a float: left; on wrapper-content or wrapper-downloads.

  also you're missing a 6 on the color for footer li

  • i may not be understanding how your layout works though– 7point341/4

    mind your margins and your borders. otherwise just position everything absolutely.– 7point342/4

    email me if you need to– 7point343/4

    oh waitaminute
    so maybe the display:inline is the answer?– Greedo4/4

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 6:58 a.m. – Permalink

• jasonistaken

  Yes. In IE 6, if a block is floated in one direction, it will double its margin in that particular direction. As mentioned before, just add display:inline to any floated element with a margin... All other browsers ignore it, because floated elements are inherently display block.

  • That sounds dirty. Are you sure it won't mess up the float in standard compliant browsers?– doctor1/2

    As I said... It doesn't.
    Floats ARE blocks. ALWAYS. But for some reason, it makes IE 6 play nice– jasonistaken2/2

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 9:53 a.m. – Permalink

• Gordy22

  I use clearfix for anything float related - google it.

  Also, perhaps add any padding / margin to a child element.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 9:54 a.m. – Permalink

• TResudek

  Not sure if you have the answer yet but I think if you just add display:inline to the div that is floating right, you should be in good shape. Looks like the margin-right is doubling.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 10:28 a.m. – Permalink

• Greedo

  k so i added the display:inline, could someone with IE 6/7 please check for me to see if the downloads/contact div is still ending up on the bottom?
  http://www.xseet.com/products/to…
  fank you

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 5:13 p.m. – Permalink

• TResudek

  Still at the bottom

  • GODDAMMIT– Greedo

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 5:16 p.m. – Permalink

• TResudek

  What you have there is a real messy mess. You have a DIV called "content" with a width of 740px. The right column is out side of that div and the div that surrounds it.

  You need to take a step back and rethink things.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 25, 08, 5:18 p.m. – Permalink

• doctor

  Why would you add display:inline to a floated element? That doesn't make much sense to me, as float only applied to block elements. If it's an IE hack, could you please link to a description of it?

  Greedo: I haven't bothered to look through your code, but it sounds like you've gotten in too deep. Maybe you should try and simplify your layout - fewer containers and less CSS, as suggested above?

  Keep us posted. :)

  • display:inline; stops margin doubling bug in ie6.– Stugoo1/7

    on floats– Stugoo2/7

    But what about standards compliant browsers (ie Safari and Opera)?– doctor3/7

    I should say browsers that pass the ACID test. http://acid3.acidtes…– doctor4/7

    not to my knowledge either,
    in an ideal world.....– Stugoo5/7

    In the ideal world we wouldn't be testing for IE anyway... :)– doctor6/7

    Nothing happens in standards compliant browsers, because it's not a standard. They ignore it. Completely.– jasonistaken7/7

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 26, 08, 5:42 a.m. – Permalink

• Stugoo

  My Ie 6 looks fine tbh.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 26, 08, 5:52 a.m. – Permalink

• doctor

  Just tested in IE7, and that looks fine too actually.

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 26, 08, 5:56 a.m. – Permalink

• Greedo

  lol thanks for looking, but i ended up using a table to fix it all. inelegant, probably wrong even, but it works.

  • tables are not so wrong– van_rijn1/3

    Yes they are. Never use tables for layout.– doctor2/3

    Please never use a table again.
    Seriously.– pylon3/3

  

  You must be logged in to add a note. Login now or register for an account.

  Cancel

  Dog-earNov 26, 08, 7:01 a.m. – Permalink