I really suck at making the internet - please help (CSS in IE)

K

KevySaysBeNice

[H]ard|Gawd
Joined
Dec 7, 2001
Messages
1,452
Hi all, I have very limited web making experience but at least a decent amount of programming experience (just graduated!).

Anyway, I'm trying to make a simple (what I hope to be simple) and of course I've been checking everything in firefox/safari, but when I looked at my page in Internet Explorer it looks like total shit. I'm wondering what I need to do differently...

here is what it looks like so far:
http://shoelessone.com/lentzteeples/

(the style sheet is at http://shoelessone.com/lentzteeples/generalStyle.css )

I've been trying to start converting my "px" to "em" as I've been told a few times that I should try to get away from using "px" when doing a layout, so maybe that is affecting things, but again everything looks good (or at least reasonably useful) in firefox/safari, but not IE.

I'm dieing here, thanks for any help! (I told a friend I'd make him a very simple site before I left for Asia in 7 days, but it's taking long then I expected!)
 
OK, now some parts of the page look OK, but the sizes are way off.

I'm using "em" instead of "px" and the columns are super wide in IE, but they look right in firefox/safari...
 
what really drives me crazy is the fact that I've totally gotten rid of any moving/positioning (i.e. left:-10px) and everything is laid out simply.
 
I read a bunch of links on the "box model bug" but this is still driving me crazy.

First of all, in http://ipinfo.info/netrenderer/index.php rendered in IE 7 the page looks OK, like I'd imagine it should.

In IE 6, the mind-height property doesn't seem to be holding, i.e. there is no min-height for the columns, plus the transparency in my PNG files doesn't seem to work.

BUT, if I use my mom's actual laptop running Vista (I'm not sure what version of windows), then I get the super-wide columns (i.e. the box model bug issue).

Any more help by chance (I know I'm asking a lot).

I'll keep looking in the meantime!
 
here area few tips I've learned over the years working with IE. I don't like using browser hacks, and I find most of the problems with IE can be solved if you do the following:

- explicitly define position: relative on all container div's
- set explicit margins and padding for block level elements, this forces IE to not use it's default margin/padding setting for block elements.
- explicitly define a width for all block level elements (this is expecially true for li elements as IE6 adds some retarded default margins to them).
- use margin, padding and width to hammer floated elements in line. E.g. if your container width is 150px, and you have an anchor element inside (set to display: block), make sure the anchor's COMBINED width/padding/margin do not exceed the defined width of the container.
- use a proper doctype in your HTML
- when a style setting won't "stick", try using !important (eg. background: #eee !important to force the background to be gray no matter what.)
- if at all possible, avoid combining fixed and elastic width block elements.
- if you must go elastic, liberal use of position: absolute helps a lot. If fixed, then position: relative is the way to go.
 
Some good comments by maw.

As for the PNG issue, alpha transparency and other features are not properly supported by IE6 and earlier -- though a bit of hackery does exist (do a Google search for "pngfix.js").
 
You must log in or register to reply here.
Back
Top