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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS not rendering as expected in IE

    Hello,

    I am really new to developing websites, but have finally come up with something I'm happy with... in Safari and Firefox at least!

    When I view the website in Internet Explorer 7, everything looks pretty obscured... The red line on the background is not in line with the red line on the banner, and the dark part of the panel at the bottom (where you see "step 1") is gappy and not at all how I styled it using CSS...

    The panel that contains "step 1" initially is supposed to have 2 states: 'active' and 'non-active'. Step 1 should initially show as 'active' where the text color is #FFFFFF, the left and right borders are #333333, the top border is #FFFFFF, and the bottom border is #999999. When the "continue" button is pushed, this box should turn 'inactive' where the text becomes #999999, and the border colors should all change. Incidentally, "step 2" should be shown next to "step 1", and it should be in the 'active' state.

    The web page is viewable at http://web.me.com/philbateman/TowerTool/index.htm

    Can anyone please help me to shed some light on how I can fix this? I've been trying everything I can think of, and nothing seems to be working...

    Any help greatly appreciated!!
    Last edited by manic2511; 11-04-2008 at 02:06 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Fix the errors in your markup first, before expecting cross browser support, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Nov 2008
    Posts
    24
    Thanks
    0
    Thanked 1 Time in 1 Post
    Why not make the entire top section a background picture and add on a transparent gif to link to the homepage? I do that whenever I get frustrated and can't find anything else that will solve it.

  • #4
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Fix the errors in your markup first, before expecting cross browser support, see http://validator.w3.org/check?uri=ht...Inline&group=0
    Thanks. I have fixed all of the errors in the markup now, but I am still not getting the expected styling from IE7. As before, the 'active' state, looks ok, but the 'inactive' icons do not seem to be showing the border colors, and it appears as though they are floating. (The background of the body can be seen in between each icon.)

    Do you have any ideas on what I could change?


    Quote Originally Posted by stanfordrep View Post
    Why not make the entire top section a background picture and add on a transparent gif to link to the homepage? I do that whenever I get frustrated and can't find anything else that will solve it.
    Thanks for your advice. I had the same thought earlier, and it certainly solves the problem with the red line alignment. However, the GIF image was pretty blocky, and I couldn't seem to avoid that with a GIF.

  • #5
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by stanfordrep View Post
    Why not make the entire top section a background picture and add on a transparent gif to link to the homepage? I do that whenever I get frustrated and can't find anything else that will solve it.
    Sorry, I misread your previous post. I see what you mean now, I'll give that a go, thanks!

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I have fixed all of the errors in the markup now
    Congrats! Now the next important one to read.. "Why tables for layout is stupid?"

    PS: have some errors in CSS too.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Congrats! Now the next important one to read.. "Why tables for layout is stupid?"

    PS: have some errors in CSS too.
    Thanks, I have cleaned up the CSS errors, but am still getting the same styling problems. Are the tables definitely causing the problem in IE7? I only ask because this seems like a big job, and will take a lot of time, and it all seems fine in Safari and Firefox (on a Mac).

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Are the tables definitely causing the problem in IE7?
    I can't assure this, but you'd get some quick help/solution from here, if it's not a table layout.

    See http://www.boagworld.com/technology/..._what_why_how/ also.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Tags for this Thread

    Posting Permissions

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