css help?
- Started
- Last post
- 10 Responses
- cramdesign
http://www.cramdesign.com/client…
Looks as I intended on firefox/safari but ie is making it go crazy. For some reason, I was under the impression that using a strict doctype forced ie 6+ to render the box model correctly. Clearly I am wrong or have created other problems.
Please help a css idiot.
- acescence0
yeah, there are issues with floats and doubling margins in IE6, plus a host of other box-model weirdness. i'd guess your issues are where you've given something a width as well as padding/margin. the safest thing to do is to give something one or the other: give a containing element width, but specify a margin or padding on the element within the container.
- acescence0
or you can use conditional comments to adjust your css for just that browser.
<!--[if IE 6]>
IE6 css here
<![endif]-->
- doctor0
You need to remove all code above your DOCTYPE. It is not correct to place a HTML comment as the first line.
- cramdesign0
Great. Thanks for taking the time to help.
Removing the comment above the doctype fixed over half the problem. Rookie mistake huh? A part where I use a negative margin is still wacky though.
After years with flash, I am finally giving in to html/css. I have to face facts that this is what most of my smallish clients need. Plus there are so many good and free cms systems out there.
- doctor0
Yes, placing stuff above the DOCTYPE triggers IE into quirks mode, which is like a bizarre parallel universe. Further reading: http://en.wikipedia.org/wiki/Qui…
Good job taking on HTML/CSS though. It's most often the most proper solution. If you feel like you need some more insight into the world of web standards, check out http://www.happycog.com/publish/…
- Stugoo0
ok. first off, welcome to the wonderful and colourful world that is ie6.
try to avoid using negative margins, ie6 hates it. it doesnt like overlapping elements.
to try and fix double margins on floats with ie6 do a display:inline; on that element. For this reason I like to try to use padding instead of margins.
I cant really help much more as I am on my g\fs lappy that doesnt have any dev tools... and its sunday and im hungover. x
- cramdesign0
Success! Thanks for the help.
The two fixes I needed were to move the doctype declaration to the top and rearrange things to not use a negative margin.
Another bit of advice if anyone is interested: the contact info on the business card is placed with absolute position. What is the better way to do this? Surely not tables. Divs and floats?
- bort0
You don't have to set each line in a new <p> wrapper. I'd wrap each column in a <p> and use line-height to tweak the spacing. If you want to manually set line breaks use <br />. This way you won't have all the unneccessary id's on those paragraphs. Float them and use padding or margins to adjust position.
- cramdesign0
Bort, you are exactly right on all those div ids. I did it as you suggested and it seems more right.
Thanks to all who have helped today. I was feeling a little lost on the ie stuff especially. I work on a mac and had to keep looking at my wife's computer to test. Before you know it, I will be getting a job as a slicer.
- bort0
Take heart, it gets easier. You learn the bugs. You learn to avoid them.
Keep the PC at hand throughout the process. Test frequently, it makes debugging way easier.
- If you haven't already, go download Firebug and Web developer. They're infinitely helpful.bort
- found web developer from another link... i will take a look at firebug too. thanks.cramdesign
- Firebug is the superior of the two, IMHO.bort