Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 9 of 9
  1. #1
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Okay so this sort of ties in with my other thread in this section, but it's a different problem really.

    I don't get why my page looks different in Firefox, Opera and IE. It's like they all read different things in my CSS file and/or don't read other bits of it.

    My page can be found here: http://www.tlcook.com/tlc
    I ran a CSS validator on it and it returned no errors. I am yet to use IE hacks, if someone could explain those to me that would be grand.

    It's really annoying when I make a page that looks good in Firefox, but then looks rubbish in Opera and IE etc...

  2.  

  3. #2
    Senior Member solidgold's Avatar
    Join Date
    Jun 2006
    Posts
    766
    Member #
    13373
    well, the real reasons that it displays differently aren't your fault, its because browsers are so different.
    i like to think of getting scripts correct in a similar way to writing words, if you think about it the two are very much alike:
    if you spell a word drastically wrong it doesn't make sense, but if you spell it a bit wrong it can be interpreted, this doesnt apply to you!
    another similarity is language, i always imagine that browsers are like people from around the UK; they all speak a similar language, but interpret it differently.
    so you have to explain certain meanings to them, its the same with browsers.
    this website explains commenting out ie errors, which is better practise than other IE hacks

  4. #3
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Okay, so having looked at that site and read the info...If I stick:
    HTML Code:
    <!--[if IE 6]>
     <link rel="stylesheet" href="style2.css" />
    <![endif]-->
    in my page source, then have only the little bits that are wrong in IE corrected in style2.css, that will do the trick?

    How can I make divs change when hovered over in Firefox and IE? I can get it to work in Opera, by using:
    Code:
    .something {
     width:100px;
     height:100px;
     background-color:#888;
    }
    .something:hover {
     background-color:#000;
    }
    Which makes the square box change colour to black when hovered over in Opera. But nothing happens in IE or Firefox.
    I'm too new to CSS! Sorry!

  5. #4
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    If I understand right, IE ( 6 anyway) will not respond to :hover on anything other than an <a> tag.

  6. #5
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Conditional comments are a bit advanced, they might not be the way to go. The major way to get things working in IE is to use the * character of style selectors (you know, the a, .blah, #menu part), which only IE will read (for some reason I don't know).

    And yes, IE6 only responds to :hover on anchors. There is a JS script to allow these things, its called suckerfish.

    I'm not sure why it's not showing properly in Firefox and Opera. True, Firefox didn't pass the Acid2 test, but their box model is a lot better than IE. If there are problems between FF and Opera, it's generally just a few gaps or bumps. Nothing major (like the gigantic holes in IE). Maybe your layout is a bit too complex.

    Btw, valid CSS doesn't mean it looks properly.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  7. #6
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Okay, thanks for your replies. But I'm none the wiser! So conditional comments aren't the way to go? Is that because they only work in IE 6? Or, whatever version you define? Blah.

    I'll look into JavaScript. Thanks once again

  8. #7
    Senior Member
    Join Date
    Jun 2005
    Location
    Atlanta, GA
    Posts
    4,146
    Member #
    10263
    Liked
    1 times
    :hover should be working on Firefox, yes. Do you have a test page up we can look at? As to conditional comments... They're generally the *only* way to go if you want to handle IE7, as most of the CSS hacks used with IE6 disappeared in IE7, while many of the problems with their CSS implementation remained. Anyway, I still haven't made up my mind as to which is cleaner. On the one hand, conditional comments ensure you're going to keep all of your IE hacks in a separate file and the user won't waste bandwidth or download time on them until it's absolutely necessary. On the other hand, there's something dirty about using proprietary weirdness like that one. I can't recall if their usage of the comments is actually valid (X)HTML...

  9. #8
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    I doubt that it's valid. The most correct way, of course, would be to use a server-side language to check and send you the proper style sheet, preferably saved in a cookie. To me, conditional comments just aren't an elegant solution to the problem. I try to create layouts which work with up to 7px offset on different browsers, and it's usually not too hard. Unless your code is very sophisticated or unstructured.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  10. #9
    Member tlcook's Avatar
    Join Date
    Nov 2006
    Posts
    38
    Member #
    14386
    Shadowfiend, I have test page located here.

    When hovering over the title and slogan, they have lightly coloured backgrounds. The title, body and footer of the bulletin post have darker backgrounds when hovered over.

    Yes I'm still using the two separate stylesheets for IE and all other browsers. I still haven't figured out how to do IE hacks effectively, so that they work in IE7 too.

    So yeah, the hovering doesn't work in IE anyway, so that's not in the IE stylesheet.

    If that makes sense :P


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:19 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com