browser question - IE vs. Firefox - different appearance?
Permalink
Hey all
I'm making a new site, and i got it all working just fine till now. But what's with the different appearance in IE and Firefox/Opera? I adapted all the transparent settings for both kinds of browsers, but some stuff I just dont get.
http://www.c-ex-c.org/Testsite_textcube/...
3 things bother me in IE:
- the little black edges on the 4 corners of the main content
- the blue border around the logo
- the font looks really bad. Probably a basic IE problem, but why does the italic font look perfectly fine in Firefox/Opera and all pixelated in IE?
any help would be greatly appreciated.
RizzzO
edit: I found out that the border around the logo is because it's made clickable (link to homepage). After clicking, it changes color - "visited link" I suppose? But where the heck are those colors defined? Can't find them neither in style.css nor typography.css....
I'm making a new site, and i got it all working just fine till now. But what's with the different appearance in IE and Firefox/Opera? I adapted all the transparent settings for both kinds of browsers, but some stuff I just dont get.
http://www.c-ex-c.org/Testsite_textcube/...
3 things bother me in IE:
- the little black edges on the 4 corners of the main content
- the blue border around the logo
- the font looks really bad. Probably a basic IE problem, but why does the italic font look perfectly fine in Firefox/Opera and all pixelated in IE?
any help would be greatly appreciated.
RizzzO
edit: I found out that the border around the logo is because it's made clickable (link to homepage). After clicking, it changes color - "visited link" I suppose? But where the heck are those colors defined? Can't find them neither in style.css nor typography.css....
You need to add to the style for your logo to remove the blue border.
The fonts are a typical problem across browsers. Your only solution is to use a font stack for instance. Now with template customization you can get crafty with font settings by using typography.css and c5 ability to customize settings.
http://www.concrete5.org/index.php?cID=8282...
Now as for the black edges, check your images and make sure the edges are clean, but in general IE just does a really $hitty job of rendering portable network graphics, even ie 8. So I'll have to defer to someone with a bit more experience in css for some magic. I would love to use png and transparency, but ie is just horrible and deficient in alot of different ways. Designers spend 90% of their time hacking code to make Microsoft's dumb browser work correctly.
You may have to resort to using something like jquery to get those rounded corners with your particularly graphic design.
span#logo img { border: 0; }The fonts are a typical problem across browsers. Your only solution is to use a font stack for instance. Now with template customization you can get crafty with font settings by using typography.css and c5 ability to customize settings.
http://www.concrete5.org/index.php?cID=8282...
body { font-family: Arial, Helvetica, sans-serif; }
Now as for the black edges, check your images and make sure the edges are clean, but in general IE just does a really $hitty job of rendering portable network graphics, even ie 8. So I'll have to defer to someone with a bit more experience in css for some magic. I would love to use png and transparency, but ie is just horrible and deficient in alot of different ways. Designers spend 90% of their time hacking code to make Microsoft's dumb browser work correctly.
You may have to resort to using something like jquery to get those rounded corners with your particularly graphic design.
For the blue border its easier to do a reset in the css....img border-style :none.
Either add this to your main or import a reset.css.
You can find pre made resets online, just do a googel search, Chris Meyers is about the best at this time,
This will reset all your borders,margine's ect ect ect,so your have a clean starting point with most browsers
Either add this to your main or import a reset.css.
You can find pre made resets online, just do a googel search, Chris Meyers is about the best at this time,
This will reset all your borders,margine's ect ect ect,so your have a clean starting point with most browsers
There is also a fix for this just do your search for "PNG FIX IE" and you will get a few working solutions.
Logo border worked. I'll try out the font thing later on.
But PNG: Red3, the fix you propose is only for IE6, afaik. My image is fine (checked with PS), and I'm using IE7/8...any suggestions?
But PNG: Red3, the fix you propose is only for IE6, afaik. My image is fine (checked with PS), and I'm using IE7/8...any suggestions?
Maybe that is why I don't get any ansers.. :-)
Does anybody even see this post?