SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  1. #1
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Screwing Me Over In IE

    I've just about finished redesigning my site ( http://www.utopiasoftware.net/ ) to be entirely standards compliant ( http://www.utopiasoftware.net/testcss.php ). However, anyone using IE will see that the images in the menu jut out of the menu a little bit, and you will also see that the right edge of the main content box does not have a border. In Firebird and Opera, the menu images work perfectly. In Firebird, the main content box also has the border (however, Opera does not display this border either).

    So in sum: Firebird renders it perfectly
    Opera renders it pretty well
    IE sucks

    Can anyone tell, by looking at the code, how to fix that?

    EDIT: Could someone please move this to CSS.
    Last edited by CeleronXL; Nov 28, 2003 at 09:18.
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  2. #2
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why did you use a different style sheet in the second one than you did in teh first? The first one works fine. I do see the difference in the way that NN7 and IE 6 displays the second page.

    Were you trying to twink it to work in the other broswers?

  3. #3
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The second one is my redesign of the site to make it load faster and to make it CSS compliant. The first is based entirely on tables. The second is mostly CSS-P, except for a single basic two-column table to hold the menu next to the content box. I'd like to be able to switch to the standards compliant second one.. that is, if I could get it to work.

    Edit:

    Wow! I just tested the page in IE 4 and IE 5.0 and 5.5, and the page works better in those versions than IE 6! It doesn't look too bad in IE 4 (but it's not perfect), but both versions of IE 5 render it perfectly!
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  4. #4
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just learning CSS myself. But i'll try to take a look at it tomorrow sometime depends on how this going away party for a friend will be going.

    Have you tried taking all the information out and playing with just hte divs. I've never had problems with the border and color problems you are having in the browsers i'm using. Of course i;m just playing around right now. I would love to look at this tomorrow and see if i can help you figure it out. why not send me your stylesheet contents.

  5. #5
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here we are. I was bored, so I felt like making diagrams of how much better IE5 is than IE6.


    http://www.utopiasoftware.net/uswcssie.jpg
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  6. #6
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont have a solution to your problem. just wanted to say that i was into css a lot too. but after designing some sites with it. i realized its just not good enouph yet to rely on css to do everything. so i went back to tables and css. much easier no borwser workarounds!! but when css 3 comes out i think ill try it again.
    Aaron Smith
    smithaaronlee.net

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2003
    Posts
    169
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CeleronXL
    Here we are. I was bored, so I felt like making diagrams of how much better IE5 is than IE6.


    http://www.utopiasoftware.net/uswcssie.jpg
    Funny.

    I don't think the average user would care as long as links work and everything is readable and stuff.

    This is how it looks on Win XP Home IE6, which looks good to me:
    http://home.earthlink.net/~i2x/winxphome_ie6.gif

  8. #8
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Lind
    Funny.

    I don't think the average user would care as long as links work and everything is readable and stuff.

    This is how it looks on Win XP Home IE6, which looks good to me:
    http://home.earthlink.net/~i2x/winxphome_ie6.gif
    It looks unprofessional though.

    And how did you get it to look like that? In that screenshot everything works.. You were looking at the testcss.php file, right? Because for me in IE6 on any computer it looks wrong. [Edit: Nope, that's not the testcss.php file. ]
    Last edited by CeleronXL; Dec 15, 2003 at 14:06.
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  9. #9
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just some basic things to try:

    1) if defining padding or margins, always define both.

    2) I noticed a class called "navlist" referenced in source code but it was not in stylesheet. Never call a class without giving it a definition in the stylesheet.

    3) if you need to have a different stylesheet for IE 5.5 than for other browsers (quite a common problem), use the following to call a special stylesheet:
    <!--[if IE 5]><link href="/IE5.css" rel="stylesheet" type="text/css"><![endif]-->
    It might look goofy, but it does validate and it can help eliminate IE 5.5 issues.

    Always write a page for the latest browser versions and then use fixes like mentioned above for older browsers. The reason is that older browsers are obsolete and newer browsers tend top point towards where the trend is going.

    Hope this helps a little.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  10. #10
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Fleeters
    i dont have a solution to your problem. just wanted to say that i was into css a lot too. but after designing some sites with it. i realized its just not good enouph yet to rely on css to do everything. so i went back to tables and css. much easier no borwser workarounds!! but when css 3 comes out i think ill try it again.
    funny, I don't seem to have a problem...
    perhaps it was just you

    but seriously if you really think there are no browser workarounds necessary for tabled layout take a close look around these forums...
    they are full of requests for help with table layout!

    In css you can currently duplicate almost any table layout, and people are beginnig to experiment with more and different types of layout hardly even possible with tables...
    Plus if you wait for css 3 you may be waiting until 2007!

  11. #11
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm, thanks, I needed to remove navlist. It was crap left over from my first attempt at a menu.

    Anyway, that didn't fix it.

    IE5 doesn't have a problem - only IE6 does. (oddly enough)
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  12. #12
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CeleronXL
    IE5 doesn't have a problem - only IE6 does. (oddly enough)
    This may be true, but what you need to do is fix it for IE6 ignoring IE5 and then make accommodations for IE5 using the method I showed above. I'm quite certain if you declare padding for all table cells and margins everywhere you declare padding (except for TD tags) and padding everywhere you declare margins much of your problems will go away. Its crazy, but different browsers make different default assumptions in regards to margins and padding hence you need to always explicitly declare them if they are important.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  13. #13
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KLB
    This may be true, but what you need to do is fix it for IE6 ignoring IE5 and then make accommodations for IE5 using the method I showed above. I'm quite certain if you declare padding for all table cells and margins everywhere you declare padding (except for TD tags) and padding everywhere you declare margins much of your problems will go away. Its crazy, but different browsers make different default assumptions in regards to margins and padding hence you need to always explicitly declare them if they are important.
    If I fix it for IE6, it throws off the rendering in other browsers. But I'll try the padding settings later tonight if I can.
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  14. #14
    SitePoint Evangelist Fleeters's Avatar
    Join Date
    Jul 2003
    Location
    Dumpsville
    Posts
    406
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pissant
    funny, I don't seem to have a problem...
    perhaps it was just you

    but seriously if you really think there are no browser workarounds necessary for tabled layout take a close look around these forums...
    they are full of requests for help with table layout!

    In css you can currently duplicate almost any table layout, and people are beginnig to experiment with more and different types of layout hardly even possible with tables...
    Plus if you wait for css 3 you may be waiting until 2007!
    could have been me, but i can duplicate any table layout with css. its just getting it to look the same(spacing wise and stuff) in all the browsers that drove me insane.
    Aaron Smith
    smithaaronlee.net

  15. #15
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just looked at it again in IE 6.0 and it looks like its fixed. i also checked NN7 and got the same results. did you fix it?

  16. #16
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    From what i understand you should use NN7 to create your site and then move to IE6.0 and less. IE 5 was buggy from what i can remember and it had padding and margin problems.

  17. #17
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE 5 isn't the problem at all. In fact, IE5 is great.

    I think what I'm going to do is keep the stylesheet as is, and use a little PHP to load up a different style sheet for IE6.
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.

  18. #18
    SitePoint Wizard silver trophy KLB's Avatar
    Join Date
    Nov 2003
    Location
    Maine USA
    Posts
    3,781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CeleronXL
    IE 5 isn't the problem at all. In fact, IE5 is great.
    I have to respectively disagree. While you might have problems with IE6, IE6 does comply with W3C HTML and CSS specifications much completely than did IE5. Because IE5 is an outdate and obsolete web browser, one should program for IE6 and make any special accommodations by way of a special stylesheet for IE5, not the other way around.
    Ken Barbalace: EnvironmentalChemistry.com (Blog, Careers)
    InternetSAR.org
    Volunteers Assist Search and Rescue via Internet
    My Firefox Theme: Classic Compact
    Based onFirefox's default theme but uses much less window space

  19. #19
    Team SitePoint AlexW's Avatar
    Join Date
    Apr 2000
    Location
    Melbourne
    Posts
    832
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Can you just lock the width of navimg ?

    Like:

    .navimg {
    background-color: #78C273;
    background-image: url("images/headbg.gif");
    font-weight: bold;
    text-align: center;
    padding: 3px 0 3px 0;
    width:190px; /* or whatever that works out to be*/
    }

    You wouldn't if you could help it but...
    Alex Walker
    SitePoint Developer
    SitePoint - Learnable

  20. #20
    SitePoint Enthusiast
    Join Date
    Dec 2003
    Location
    USA
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    everything seems to look fine in my fully updated IE6... i've checked it in IE6, Mozilla Firebird 0.7, and Opera 7.22. Only one that had a problem was the Opera 7.22 and the problem was that the far right border of your News container wasn't visible. Other than that I see no problems with IE6.

  21. #21
    SitePoint Addict
    Join Date
    Oct 2003
    Location
    Mobile
    Posts
    330
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Celeron what browsers do you have and which did you design with?

  22. #22
    SitePoint Addict CeleronXL's Avatar
    Join Date
    Dec 2002
    Location
    United States of America
    Posts
    349
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jacobpressures
    Celeron what browsers do you have and which did you design with?
    I designed in Mozilla/Firebird, Opera, and IE6. And setting a fixed 190px width for .navimg didn't do it either. :/
    So hold me when I'm here
    Right me when I'm wrong
    Hold me when I'm scared
    Love me when I'm gone.


Bookmarks

Posting Permissions

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