View Full Version : CSS Not rendering Correctly in IE6 and Opera 7

10-10-2004, 10:54 PM
I have been fighting with this for some time now and cannot seem to figure it out. :confused: I have some css written on www.vonstorm.com/php (http://www.vonstorm.com/php) and it is rendering different in IE6 than it is in Opera 7. I am mainly talking about the images to the left. Is there something that I can do about that so it looks the same way in opera that is does in IE?

Thanks for any help. I am pretty new to CSS although I have been doing a lot of studying :)

10-11-2004, 01:00 AM
First off:
<style type="text/css" media="all">@import "vss.css";</style>
Bad hat. Improper use of style & import.
use <link> to attach stylesheets

Second: Doctype goes above <html>

Third: Id is supposed to be unique. for elements that will be used more than once, use class

Fourth: Spans are generally used for inline content. Use Divs, or use display:block; to change them to block elements. This IS your problem.

10-13-2004, 08:30 PM
Thank you for your reply.
I was using header and footer files because the website was originally done in html. Now that I am using CSS and PHP I am only using 1 file. I did not realize that I had the <html> in the header file above the doc type.... when I fixed that.... everything screwed up so I rewrote everything from scratch again. What a mess! (Well, a good attempt for my first time :) ) Doesn't it just give you a warm fuzzy feeling to find out all of these hours and days you have spent learning to program a new language and you find out you were learning it incorrectly! :eek:

However, now I have another dilemma that I have been messing with. This time the CSS is written correctly. I am still using ID's however I have tried to change over to class and it still renders the same. I have also tried to change the @import to the link as suggested (The original reason for using this is because I read an article on the www.alistapart.com [I believe] website that says something about cross browser compatibility with MAC IE5 and that is why to use the @import rather than the <link>) and it still renders the same. I cannot figure out how to properly make the code look the same cross browser.


In IE the text links to the left are directly under the image. so directly that the background color goes behind the image when you hover over the link. Normally I would just use a margin: 4 0 0 0; however I cannot do this because in Opera and Firefox the links are exactly where I need them to be and using any margins to correct IE will result in those browsers putting the link at the very bottom or below the box I am trying to keep them in.

I have tried making them into 2 different <span> tags. I have tried to make the text link into a separate link away from the image and put it into the same tag. You get the same results. I have tried, well I have tried everything I can possibly think of to get this to look exactly the same in all of these browsers however they are parsing the <br> differently. If I don't use it then I end up with a text link on the same line as the image and then the image is not centered. I have tried position:relative; top:8px; left:0px; and it makes the text link disappear.

Any help in this matter would be greatly appreciated... I am not sure what I am doing that is incorrect.

Thanks in advance.