...

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



ProductivePC
10-10-2004, 11: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 :)

circusbred
10-11-2004, 02: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.

ProductivePC
10-13-2004, 09: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.

http://www.spectacularstuff.com/vonstorm/

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum