Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Not rendering Correctly in IE6 and Opera 7


    I have been fighting with this for some time now and cannot seem to figure it out. I have some css written on 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

  • #2
    Regular Coder
    Join Date
    Apr 2004
    Location
    Birmingham, MI
    Posts
    131
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

    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.
    Last edited by ProductivePC; 10-13-2004 at 08:33 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •