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.
Page 1 of 3 123 LastLast
Results 1 to 15 of 40
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    VISTA IE v WinXP IE and CSS container

    the following code shows the page correctly in IE and FireFox, but when viewed using Vista and IE it is not showing correctly.

    the box is now showing with gaps in between, but this should not be like this, it should all be in one block.

    can anyone see what could be wrong with my code that is causing this to happen?

    thanks in advance for your help.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style>
    #index-container { border: 1px solid #fff; background: #CC9966; }
    .rtopcolour1, .rbottomcolour1{ display: block; background:#CC9966; }
    #index-content { margin: 8px; }
    .containercolour1 { position:relative; background:#CC3366; margin:0 5px;}
    .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#CC3366; }
    .r1{ margin: 0 5px}
    .r2{ margin: 0 3px}
    .r3{ margin: 0 2px}
    .r4{ margin: 0 1px; height: 1px }
    h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5; }
    h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 5; }
    h3 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5; padding: 10; }
    </style>
    </head>
    <body bgcolor="#CC9966">
    
    <div class="containercolour1">
    	<b class="rtopcolour1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    		<h1><a class="two" href="" target="_blank">text here</a></h1>
    	<b class="rbottomcolour1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>
    
    </body></html>

  • #2
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    FIRST check out VIPStephan's post after this one, It seemed to work for me.

    Vista uses IE7, XP uses IE6.

    It is recommended to design your pages using Firefox which is a more accurate browser and then deal with any peculiarities using conditional sections.

    First, try putting this at the start of your css.

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    If not, try this.

    Try putting this code immediately following the <head> tag on your page and see if it helps.


    Code:
    <!--[if lt IE 8]>
    <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
    <![endif]-->
    also look here - http://exitfegs.co.uk/IEBugs.html

    Frank
    Last edited by effpeetee; 05-21-2008 at 01:19 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    You are using an incomplete doctype which may throw IE in quirks mode, and hence, make it render pages differently. Now, you didn’t specify which version of IE you were talking about but I guess it shouldn’t matter too much. Use this doctype and see what happens:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    VIP I have amended my previous post.
    I failed to check the Doctype.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks for all your replies...

    i changed the doctype and the page went completely hectic in FF ! all scrunched up.

    i also added the padding code and the googlecode too but still it is showing the box broken up into its lines.

    Quote Originally Posted by VIPStephan View Post
    You are using an incomplete doctype which may throw IE in quirks mode, and hence, make it render pages differently. Now, you didn’t specify which version of IE you were talking about but I guess it shouldn’t matter too much. Use this doctype and see what happens:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    This works for me. You had left some of the units from the code padding:5; instead of padding:5px; That with the new Doctype works in FFox and IE7 for me,

    Frank

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    #index-container { border: 1px solid #fff; 
    background: #CC9966; }
    
    .rtopcolour1, .rbottomcolour1{ 
    display: block; background:#CC9966; }
    
    #index-content { margin: 8px; }
    
    .containercolour1 { 
    position:relative; 
    background:#CC3366; 
    margin:0 5px;}
    .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#CC3366; }
    .r1{ margin: 0 5px}
    .r2{ margin: 0 3px}
    .r3{ margin: 0 2px}
    .r4{ margin: 0 1px; height: 1px }
    h1 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 0; padding: 5px; }
    h2 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5px; padding: 5px; }
    h3 { text-align: left; font: small tahoma; font-size: 12px; font-weight: bold; margin: 0 5px; padding: 10px; }
    </style>
    </head>
    <body bgcolor="#CC9966">
    
    <div class="containercolour1">
    	<b class="rtopcolour1"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
    		<h1><a class="two" href="" target="_blank">text here</a></h1>
    	<b class="rbottomcolour1"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
    </div>
    
    </body></html>
    Last edited by effpeetee; 05-21-2008 at 03:13 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #7
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Screenshot with Firefox.

    Is this what you want.

    Frank

    Edited: Using Vista Home Premium.
    Attached Thumbnails Attached Thumbnails VISTA IE v WinXP IE and CSS container-screenhunter_01-may.-21-14.16.jpg  
    Last edited by effpeetee; 05-21-2008 at 04:31 PM. Reason: Added information
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #8
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    all works using Windows Xp, but visitors with Vista get a the problem of the box spreading downwards line by line, above and below the text box

    Quote Originally Posted by effpeetee View Post
    Screenshot with Firefox.

    Is this what you want.

    Frank

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Oh hang on…
    Try .rtopcolour1 *, .rbottomcolour1 * {line-height: 1px;}

  • #10
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    jasonc310771 ,

    My results are from Vista. I do not have XP.

    See it here.
    http://exitfegs.co.uk/a21.html

    http://exitfegs.co.uk/b21.html - This with VIP's suggested css added.

    Frank
    Last edited by effpeetee; 05-21-2008 at 04:44 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #11
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    IE6 screenshot here.
    Attached Thumbnails Attached Thumbnails VISTA IE v WinXP IE and CSS container-screenhunter_01-may.-21-15.46.jpg  
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #12
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    thanks...

    where should i put this?

    do i add this line to my css code or do i replace this code with the previous line of code that starts the same?


    please note.... i do not have Vista, i have been told that the pages do not show correctly by someone who does have Vista.


    Quote Originally Posted by VIPStephan View Post
    Oh hang on…
    Try .rtopcolour1 *, .rbottomcolour1 * {line-height: 1px;}
    Last edited by jasonc310771; 05-21-2008 at 06:31 PM.

  • #13
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Code:
    .rtopcolour1, .rbottomcolour1{ 
    display: block; background:#CC9966; }
    .rtopcolour1 *, .rbottomcolour1 * {line-height: 1px;}
    #index-content { margin: 8px; }
    
    .containercolour1 { 
    position:relative; 
    background:#CC3366;
    Put it there (in red)

    Vista gives me no viewing problems. I have it on three computers. IE7 has its problems but they are no worse than IE6 (XP's browser)
    IE8 is just beginning to make an appearance.

    Nothing stays the same.

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #14
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,917
    Thanks
    6
    Thanked 1,040 Times in 1,013 Posts
    Based on the code you provided in your first post you can add these styles to the existing rule already:
    Code:
    #index-content { margin: 8px; }
    .containercolour1 { position:relative; background:#CC3366; margin:0 5px;}
    .rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#CC3366; line-height: 1px;}
    .r1{ margin: 0 5px}
    .r2{ margin: 0 3px}
    But of course you can add a new rule if you prefer.

  • #15
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  
    Page 1 of 3 123 LastLast

    Posting Permissions

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