...

View Full Version : VISTA IE v WinXP IE and CSS container



jasonc310771
05-21-2008, 11:24 AM
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.


<!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>

effpeetee
05-21-2008, 11:54 AM
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.


* {
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.



<!--[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

VIPStephan
05-21-2008, 12:10 PM
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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

effpeetee
05-21-2008, 12:22 PM
VIP I have amended my previous post.
I failed to check the Doctype.

Frank

jasonc310771
05-21-2008, 01:35 PM
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.


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:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

effpeetee
05-21-2008, 02:01 PM
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


<!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>

effpeetee
05-21-2008, 02:19 PM
Screenshot with Firefox.

Is this what you want.

Frank

Edited: Using Vista Home Premium.

jasonc310771
05-21-2008, 02:27 PM
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


Screenshot with Firefox.

Is this what you want.

Frank

VIPStephan
05-21-2008, 02:56 PM
Oh hang on…
Try .rtopcolour1 *, .rbottomcolour1 * {line-height: 1px;}

effpeetee
05-21-2008, 03:29 PM
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

effpeetee
05-21-2008, 03:49 PM
IE6 screenshot here.

jasonc310771
05-21-2008, 05:12 PM
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.



Oh hang on…
Try .rtopcolour1 *, .rbottomcolour1 * {line-height: 1px;}

effpeetee
05-21-2008, 06:05 PM
.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

VIPStephan
05-21-2008, 07:25 PM
Based on the code you provided in your first post you can add these styles to the existing rule already:


#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.

effpeetee
05-21-2008, 07:51 PM
Updated'

http://exitfegs.co.uk/b21.html

Frank

jasonc310771
05-21-2008, 11:36 PM
i have 4 different colours i use, and have created 4 different styles, i have been told once before to use 'big boy CSS' ?!
which will allow me to have the two styles work together, colours and look ?!

how would i do this with the code in my first post?

so i can change both background and box colours?

COLOUR CODES ARE JUST FOR EXAMPLES AND ARE NOT COLOUR CODE I AM USING.
I am still learning CSS but this would help me understand how the process works a bit more.


.containercolour1 { position:relative; background:#AAAAAA; margin:0 5px;}
.rtopcolour1, .rbottomcolour1{ display: block; background:#BBBBBB; }
.rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#AAAAAA; line-height: 1px;}

.containercolour2 { position:relative; background:#CCCCCC; margin:0 5px; }
.rtopcolour2, .rbottomcolour2{ display: block; background:#DDDDDD; }
.rtopcolour2 *, .rbottomcolour2 *{ display: block; height: 1px; overflow: hidden; background:#CCCCCC; }

.containercolour3 { position:relative; background:#EEEEEE; margin:0 5px; }
.rtopcolour3, .rbottomcolour3{ display: block; background:#FFFFFF; }
.rtopcolour3 *, .rbottomcolour3 *{ display: block; height: 1px; overflow: hidden; background:#EEEEEE; }

.containercolour5 { position:relative; background:#GGGGGG; margin:0 5px; }
.rtopcolour5, .rbottomcolour5{ display:block; background:#HHHHHH; }
.rtopcolour5 *, .rbottomcolour5 *{ display: block; height: 1px; overflow: hidden; background:#GGGGGG; }

.containercolour6 { position:relative; background:#JJJJJJ; margin:0 5px; }
.rtopcolour6, .rbottomcolour6{ display:block; background:#KKKKKK; }
.rtopcolour6 *, .rbottomcolour6 *{ display: block; height: 1px; overflow: hidden; background:#JJJJJJ; }



on a side note......

if i have a line of CSS code which is say..

.rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#AAAAAA;}

now i could just add the other bit of code as said in previous post, to the end of the line.....
.rtopcolour1 *, .rbottomcolour1 *{ display: block; height: 1px; overflow: hidden; background:#AAAAAA; line-height: 1px;}

but in a post here it says i could also add a new line (rule)....
.rtopcolour1 *, .rbottomcolour1 *{ line-height: 1px;}

i am a bit confused by this...
would one rule take over the other? or do both rule work ?

i have tried to find a site that explains about CSS to beginners but can not find one which i understand well, can anyone suggest a good site for me to start with the basics and work my way up to the hard CSS coding.

effpeetee
05-22-2008, 09:36 AM
Have you checked the many sites in my Sources program.

Frank

Here. (http://exitfegs.co.uk/Sources.html)

jasonc310771
05-22-2008, 11:46 AM
Have you checked the many sites in my Sources program.

Frank

Here. (http://exitfegs.co.uk/Sources.html)

Sources program ?

effpeetee
05-22-2008, 12:30 PM
Sources program ?
The word Here (http://www.exitfegs.co.uk/Sources.html) which is underlined on my previous post.
Also at the bottom of this and the post.

I thought my eyes were bad..........



The first of this line of url's:-

jasonc310771
05-23-2008, 06:39 AM
ok, seem like it is not just the css text box, please visit the main site....

www.du m ptr ump et.com (remove the space)

effpeetee
05-23-2008, 07:42 AM
i am a bit confused by this...
would one rule take over the other? or do both rule work ?

The one presented last would be used and either added to or replace the earlier code. Like a cascade.

Thus:-

#content{
display:inline;
height:60&#37;;
width:10%;
}

#content{
width:25%;
color:#ff0000;
}

would effectively be:-

#content{
display:inline;
height:60%;
width:25%;
color:#ff0000;
}

Unless the property "!important" was used. Thus -

width:10% !important;
width:25%;
In this case, the first line would be used, even though there was a later instruction.



Understanding Priorities and !important, (http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/)

Using Cascading Style Sheets (CSS) - Priority of Styles. (http://www.developerfusion.co.uk/show/3833/4/)

Hope this helps.
Frank

jasonc310771
05-24-2008, 01:00 PM
here is the results of a mates Vista pc viewing in IE...

effpeetee
05-24-2008, 01:54 PM
This is what I get with Vista home premium and IE7.

http://exitfegs.co.uk/sh24a.jpg

Frank

jasonc310771
05-24-2008, 03:16 PM
yep thats what people using vista IE get, the lines above and below the box as in my previous post is not right, there should not be a gap, it should show as it does in FireFox.

or like this images...

http://dumptrumpet.com/dtnolines.png

effpeetee
05-24-2008, 04:04 PM
You have 38 mark-up errors and 10 css errors according to the W3 validators.
I suggest that you sort this out first.

http://validator.w3.org/ for the mark up and

http://jigsaw.w3.org/css-validator/ for the css.

Several of your measurements do not give the unit. width:12; and the like, is not acceptable. it needs to be as width:12px; or what you will.

You really should not have the valid sign on your frong page yet!

Frank

jasonc310771
05-24-2008, 06:56 PM
ok i have fixed those issues, i had already put the site through a test and it passed.

When i had made changes thats when we noticed the problems.

all seems to pass ok now, just need to know if the strange lines are showing still, please can you test on vista IE again.

thanks

effpeetee
05-24-2008, 07:28 PM
Here are some screen shots

effpeetee
05-24-2008, 07:29 PM
Here some more.

It is not Vista itself but the new version 7 of Internet Explorer that causes the problem.
I am afraid that the page is too much for me. There is so much css. My fevered brain can't cope.

Frank

jasonc310771
05-26-2008, 01:48 PM
Please can some take a look at the following links using IE and tell me which are showing the same as in FireFox.

I have attached screen shot links to what it looks like and what it should look like.

Thanks you in advance for your help.

currently main site looks like this in IE using Vista...
www.dumptrumpet.com/dtlines.jpg

but should look like this....
www.dumptrumpet.com/dtnolines.png

here are the test pages which i have removed parts of the page bit by bit to see if i can find the problem.

www.dumptrumpet.com/css_error_check_1.php
www.dumptrumpet.com/css_error_check_2.php
www.dumptrumpet.com/css_error_check_3.php
www.dumptrumpet.com/css_error_check_4.php
www.dumptrumpet.com/css_error_check_5.php
www.dumptrumpet.com/css_error_check_6.php

effpeetee
05-26-2008, 02:50 PM
Screenshots - IE7

Frank

effpeetee
05-26-2008, 02:55 PM
More screenshots.

jasonc310771
05-26-2008, 02:58 PM
thats strange, its seems to be showing ok.

it was internet explorer on a vista pc?

if so could you please check the main site in IE, and send me screen shot of this page.
www.d u m ptru m pet.com (remove spaces)

thanks for your help so far.

effpeetee
05-26-2008, 05:28 PM
2 screenshots.

The first screenshot is as immediately loaded. Then after a few seconds one gets the second result.
F5 to refresh the page starts the sequence again. Ok for a few seconds and then the lines appear.

It takes an age to load.

Vista Home Premium with IE7 full up to date.

Frank

jasonc310771
05-28-2008, 01:47 PM
ok i have with the help of someone with vista removed all but the bare minimum of content and still the lines show, previous post stated there was to much CSS so i have removed all text styles and other CSS that seems not to be affecting the paqe.

can anyone see why the page is still showing lines when viewed in internet explorer on a vista pc.

thanks in advance for your continued help

this is the page i have recreated from the main site which is where i have the problems.

http://du mptr um pet.com/index-test_css.php (remove spaces)

i looked around and see it could be something to do with the 'line-height' in the CSS code but thats just something i found, but can not check myself.

effpeetee
05-29-2008, 10:17 AM
Hi!

When I download, at first there is no problem. I can got to your other links and back without the lines showing up. But it is better in one respect. Previously on my Vista computers, it would, after a few seconds show the lines without any intervention by the user. Now however, that does not happen. Unless the user presses f11 for the full screen,when the lines will appear.

They can be removed by refreshing the page f5 or downloading again. This also happens to me even on your link pages. Very strange. It will take one of the very top coders to help you there I think.

Just in finishing, can't you reduced the size of the index page. I have an 8meg broadband server and it takes ages to download.

Frank.

jasonc310771
05-29-2008, 12:07 PM
ok sounds like i need a refresh on load.

heard of it but no idea how to do it. looked around but only find a refresh every so many seconds.

re: smaller index file size... this is the next project as it was on our first lot of things to do but other thing needed to come first.
i shall be attempting to have page numbers done soon.

effpeetee
05-29-2008, 05:50 PM
I may have inadvertantly misled you.

When I go to the webpage I get a good download but I usually press f11 to get rid of the top of the screen whilst viewing. (I have poor eyesight.) Most people will not do this, But it should not bring on the lines. If I don't use f11, the lines do not appear although they did with your original code. Something that you did improved the situation.

Note that when it downloads there is a normal full screen. As I said above I use f11 because of my poor eyesight. I like to see as much of the page as I can.

You may well decide that this is not a problem. Unfortunately I cannot offer you a solution. It is not a problem I have come accross before.

Frank

jasonc310771
05-29-2008, 06:14 PM
ok i have put back the side panel that i had removed, i had also removed alot of other stuff to, but think it could be something to do with the page needing to be refreshed by the browser when it is loaded, but as you said if it looks ok when you load it full screen then maybe i have found out why, it seems to be i think something to do with the width as someone had suggested to me before, but i have no way of knowing this, no one has any suggestions for me as they say the code was to much, thats why i started to cut out bits to get just the bare minimum of coding.

i so wish i knew someone local that had vista, i'd have this sort in a few hours, its taken nearly a month just to get this far.

jasonc310771
05-29-2008, 06:15 PM
someone also said to use images and not all CSS, but i have many colours that will eventually be used in the future, so it needs to be all CSS to create the boxed area


this is the page to view...
http://dumptrumpet.com/index-test_css.php

effpeetee
05-29-2008, 09:22 PM
I only get trouble when I use f11. Moving around the site works fine. At the moment my Office is being re-plastered and my main PC is out of use. I am doing this on my laptop which also has Vista Home Premium SP1.

I'll try to get the Main PC up and running in the morning.

It is 2120hrs now and I am seriously thinking about bed. I'll help all I can. Keep us posted.

Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum