SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Internet Explorer Problem

    Site: http://www.zahnarztpraxis-koschuetzki.de

    Problem: In Internet Explorer (and probably other browsers as well), the "Home" heading is too much at the top and the left box with the validation links is also messed up unlike in Mozilla Firefox.

    Request: Could someone please help me fix this? Especially the second problem with the box as the first one is probably easy to fix.

    Thanks in advance!

  2. #2
    With More ! for your $ maxor's Avatar
    Join Date
    Feb 2004
    Location
    Scottsdale, Arizona
    Posts
    909
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm just going to guess, without looking at the page, that it's a box model problem.

    Check here www.positioniseverything.net

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Tim,

    The first problem is just the margins on the h1:
    Code:
    #centrecontent h1 {
    color:#369;
    font:bold 2.0em/1.0em Arial,Helvetica,sans-serif;
    margin:.5em 0 -0.6em 0;
    padding:0;
    }
    The second problem needs a bit of tweakin like this:
    Code:
    #left .ulhead {
    background:#fff url('http://www.zahnarztpraxis-koschuetzki.de/graphics/left_ul_head.jpg') no-repeat left top;
    width:130px;
    height:30px;
    margin-left:5px;
    }
    #left .ulfoot {
    background:#fff url('http://www.zahnarztpraxis-koschuetzki.de/graphics/left_ul_bot.jpg') no-repeat left top;
    width:130px;
    height:30px;
    margin-left:5px;
    }
    #left #valid {
    background:#fff;
    width:126px;
    border-left:2px solid #D8D8DD;
    border-right:2px solid #D8D8DD;
    margin-left:5px;
    text-align:center;
    }
    * html #left #valid{width:130px;w\idth:126px}
     
    #left #valid p.top{margin:0 0 5px 0}
    #left #valid p.bottom{margin:5px 0 0 0}
    Code:
    	<div class="ulhead"></div>
    	<div id="valid"> 
    	  <p class="top"><a href="<A href="http://validator.w3.org/check?uri=referer"><img">http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"
       alt="Valid XHTML 1.0!" height="31" width="88" /></a></p>
    	  <p class="bottom"><a href="<A href="http://jigsaw.w3.org/css-validator/"><img">http://jigsaw.w3.org/css-validator/"><img style="border:0;width:88px;height:31px"
    	   src="http://jigsaw.w3.org/css-validator/images/vcss"
    	   alt="Valid CSS!" /></a></p>
    	</div>
    	<div class="ulfoot"></div>
    It looks as though your image is a fraction out as the lines don't meet up and a pixel difference either way doesn't work so it seems to be the image is half a pixel out. You will need to edit the image and check the size of it.

    Also all the voice family hacks will play havoc with ie5 as it jumps all the next style blocks and not just the next style. Use the star selector hack as in my example.

    Paul

  4. #4
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul, smooth fix.

    Also all the voice family hacks will play havoc with ie5 as it jumps all the next style blocks and not just the next style. Use the star selector hack as in my example.
    Sorry, I do not quite understand this sentence (from the English language point of view ).

    I just noticed that you became Webdesigner of the Year! Congratulations, man.

    And thanks again!

    PS: Don't wonder..I haven't uploaded the fixed version yet.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Tim
    Sorry, I do not quite understand this sentence (from the English language point of view
    Yes, its a bit vague perhaps an example would be better.

    Code:
    #element1{
    width:300px;/*ie5 and 5.5. get this*/
    padding:10px;
    voice-family: "\"}\""; voice-family:inherit; 
    width:280px;/* good browsers (and ie6) get this*/
    }
     
    #anotherstyle {/* this whole style block will be missed by ie5 only*/
    position:absolute;
    left:200px;
    right:200px;
    height:500px;
    width:500px;
    background:red;
    }
     
    #morestuff{/* ie5 decides to rejoin the party here*/
    float:right;
    width:300px;
    }
    The reason that not many people know about this bug is that they use the be nice to Opera5 style block that usually follows the tantek hack. Ie5 just jumps the block which it wasn't meant to read anyway. http://tantek.com/CSS/Examples/boxmodelhack.html

    Hope that makes sense this time

    Quote Originally Posted by tim
    I just noticed that you became Webdesigner of the Year! Congratulations, man
    (and mentor of the year lol) Thanks Tim

    Paul

  6. #6
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://wildfiregames.com/temporary/

    Added another navigation box and edited the image everything works smooth now, except for two minor problems:

    The center navigation image at the top has such a weird greyish background in IE..can anything be done about that?

    In Firefox the left navibox with the "Home" link flickers unfortunately. What is wrong with that one?

    Thanks in advance.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    H Tim,

    The image problem is probably because you have specified alpha transparency for the images background. IE doesn't understand that and you would need to use either index transparency(thats what fireworks calls it anyway) which will make the background transparent but doesn't work too well on coloured backgrounds.

    Ths simplest answer is to make the images background white to match the location.

    I couldn't see a flicker on the home link in firefox. It only changes colour so there shouldn't be anything noticable. You do however have to correct the default margins on the ul.

    Code:
    /* Left Navigation Box */
    #left #navi {
    background:#fff;
    width:126px;
    border-left:2px solid #D8D8DD;
    border-right:2px solid #D8D8DD;
    margin:0 0 0 5px;
    text-align:center;
    }
    * html #left #navi{width:130px;w\idth:126px}
    #left #navi ul{margin:0;padding:0;}
    #left li {
    color:#B37538;
    list-style:square;
    }
    Paul

  8. #8
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I corrected the margins and the flicker is gone. Also changedt he image backgrounds, but the greyish background is still there in IE.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi Tim,

    if we are talking anput this image:

    http://wildfiregames.com/temporary/graphics/home.png

    Then it looks to me as though the background is still transparent when I copy it into fireworks. Why don't you just use a white background.

    Paul

  10. #10
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah you mean the image itself. Alright, I will see what I can do about it.

  11. #11
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright. That fixed it, thanks again.


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
  •