CSS on IE help
- Started
- Last post
- 13 Responses
- jackfoley
I finally had my site validate XHTML 1.0 tranistional, and everything looks fine in firefox and safari only to find that it looks completely messed up in IE. I'm not really sure where I need to do to correct this. Any help is appreciated.
(http://immeldesign.com/help/tes...
Thanks!
- fusionpixel0
1 word:
Tables
- jackfoley0
Can you explain why I should use tables? I'm trying to transition to an all CSS design. Isn't using tables taking a step back?
- fusionpixel0
I dont know man, Im just trying to give you a quick fix. That layout can be done in 10 minutes tops with 5 minutes coffe break that would work great. Again, if your target oudience is mostly FF and designers who want to push CSS. then I would not even worry about IE. but if most of your clientele is IE oriented. I would just fix the heck out of it with some tables.
Result:
Client Happy = 1
Designer in Love with CSS = 0
Job Paid = 1you do the math
'-'
- jackfoley0
Yeah i know I could do it with tables. This isn't for a client, it's just a fake site I'm using to try and learn CSS. That's why I want to know what I'm doing wrong so I can fix it.
- cvirus0
i understand what fusionpixel is saying, but i've been trying to shed my bad habits as well and do things the "right" way.
with the past 2 all CSS jobs I've done, making design changes have been so simple, based on client's requests. saves a lot of headache -- except for all of the hacks involved with getting it to display nicely on all browsers.
anyway, looks ok in IE5 mac...what version is it being messed up on?
- dc_again0
you're right. it would be taking a step back. there is absolutely no valid reason to do a layout like that using tables. firstly, it's not a complex layout , and secondly, its not tabular data.
however, if you're looking for a quick fix, you won't find it. you're too far down the road and the site is too messed up in IE. put this one down to experience and start from scratch. the moral of the story - always develop with AT LEAST two browsers open at all times, making sure that (for now at least) one of them is IE.
sorry!
- fusionpixel0
sorry, i thought it was for a client and you were trying to figure out how to fix it quick.
In that case yeah you need to surf in some IE hacks. For what I have read nowadays you first design for FF and then make your design compatible with IE, which it seems that is what you have done, then I would just do a search in google for WEB STANDARDS or IE HACKS.
in IE 6 it seems that your floating DIV is jumping down under your menu items.
- jackfoley0
On IE 5.2 Mac there is no title graphic (Bob & Patrick's Corner Market) next to the picture.
On IE 6.0 on PC the header graphic is fine but the text layout below is screwed up.
It just seems like a waste to start over when it's validated XHTML 1.0 and looks fine in Firefox and Safari. It's hard for me to believe that someone who knows CSS well won't be able to fix it.
- cvirus0
go to sitepoint.com forums on CSS, there is a CSS guru there who answers questions in no time, as i think he has nothing better to do...saved me a lot of time and trouble.
- dc_again0
sorry fusionpixel, this is just my opinion...
don't get into thinking that you need to 'hack' your code or css for IE. there are no css 'hacks' (well, there is one which i'll mention in a bit). the simple fact is that if you write your css properly it will work across all standards compatable browsers. end of story. of course there is a few stupid things (like Safari won't accept css styling of form elements), but 99.9% of cross browser css is just writing good css.
the only 'hack' you need to use is the box model hack, which to be fair is just because there are two theories on how padding and borders should be applied to block elements.
and as for fusionpixel's advice for building - anyone who builds for one browser then starts messing with a complete site to make it look good elsewhere is wasting lots of time and effort, and is not a true developer. its's not about crow barring you site into a browser, it's about using standards code for standards browsers.
- netbanshee0
I've been just getting past some of the head banging that I've been doing withh XHTML and CSS programming. Here's what I recommend...
Avoid using floats and z-positioning in your site. Try to use absolute and relative positioning for elements and remember that positioing is based on the div those elements are contained in. Each "grid" area that you want content to sit in should be its own div. Then, use your margins to move your individual divs where you want them to be. Sometimes you might have to do negative top margins to bring text up along the side of body text for example.
Also... listen to dc_again and use the box model hack for your divs. Use them only when you use padding and borders in the horizontal dimension of your divs (width) and when you are using relative font sizing (i.e. - x-small / small).
Good luck...
- fusionpixel0
respect.
I dont know much of CSS, but just how to make a site pretty and easy to update. Most of the people I work for care for being able to see the site. when a contract is signed they dont care what software or programming language I use, as long as it works (Sad I know).
In any case, I understand where you are coming from and I try to push the Standars when possible, but in this world where you have to do your job and eat at the same time, leaves little time for experimenting with clients sites. Again, what do I know, I just do design for a living, leave that to the pros!
- jackfoley0
I'm not using an Z-indexing on my site, but I'll try fixing the floats. Should I use that box model hack to all my content divs?