IE/CSS making me crazy
- Started
- Last post
- 17 Responses
- bort
I spend more time fixing IE's retarded interpretation of my CSS than actually coding the site.
Does anyone know why IE isn't letting the #nav float up next to the Pull and Press logo (#logo)? It works properly in FF, Safari and Opera.
The #nav is supposed to sit aligned with the bottom of the pull and press logo. In IE, the #nav gets forced down to the light blue band (#sectionOne).
I've been digging through Smashing Magazine's CSS Float theory articles and still can't figure this out.
I can't wait for IE6 to die.
Here's the site: http://pullandpress.com/pullandp…
Any help is appreciated.
- brenton0
I'll help you drag IE out back. You can pull the trigger.
- stupidresponse0
which IE? the li's aren't floating at all in IE7, they're stacked. for one thing, you have huge amounts of whitespace inside the ul and li tags, when i view source it's:
<ul ><
li>- well, it ate the whitespace, but something is wonky therestupidresponse
- lvl_130
are you using dreamweaver in design mode?
- Mojo0
Do you use global reset CSS? you should!
- 4040
i want to punch ie in the face.
- kev_charlton0
actually this is the full reset:
http://snipplr.com/view/2582/eri…
- bort0
I'm looking at it in IE6.
I set the lists up like that because I read that it might eliminate gaps between content. I guess it's making things worse rather than better.
No, I'm writing the code. I'm still pretty new to CSS, so the problem could be my approach.
- with all that extra space, i just thought that it was dreamweaver. sorry.lvl_13
- Mojo0
Work from a global reset file. Browsers define somethings by default differently.
One browser might say default margin is 10px, and another may say 12px.
Unless you redefine the default margin, it will always vary depending on the browser viewed in. Global resets do just that.
- voiceof0
Check out the left padding in #nav you have 560 defined and thats pushing it outside of the 895px defined in the container
- 7340
ie6 is probably half your problem. also make sure you have defined your dtd. it keeps the older browsers in line, and attepts to keep ie from displaying in quirks mode
- Mojo0
Are you using those IE conditional statements so that ie 6 loads ie6.css, and ie7 ie7.css for example?
I code for a proper browser, then fix the IE crap in seperate CSS files.
- kev_charlton0
take the height: 1% of your nav div. that sorts it a bit.
- kev_charlton0
also why is there a div called 'content' in there, thats not specified in your css.
Then delete. height:160px; from #sectionOne ul.
Then delete height: 85px; from #sectionOne
- Thanks for all the suggestions. I'll try these after the global reset.bort
- kev_charlton0
by my calculations, that should work the same now. In future always try and avoid using set heights on elements. IT can screw things up, and is also bad for when you resize text...the layout doesn't stretch.
- bort0
kev_charlton, you are a god. It works beautifully now. Thanks so much for your time and help. Global reset from now on and no height specified on containers.
- kev_charlton0
hehe, no worries fella. i made the transition from design to web/css a few years ago and know how annoying it can be!! glad to help.