Strange Layout?

[minkcar]

Good Morning People,

I have a problem that has been troubling me the last couple of days and I was wondering if you can help me. Our schools website is www.weydonschool.surrey.sch.uk .

It was recently updated to include our new school results (new page added) but since then the layout of the site has gone all wrong - it's as though the CSS file is not being rendered properly. See below.

However, if you force refresh the page with CTRL + F5 it displays fine! I've cleared the cache and all IE settings and I have stopped and restarted the webserver but it's still doing it. This also happens in FF. Here is how the site should look:

If anyone has any suggestions I would be really greatful.

Thank you,

Edited August 28, 2008 by minkcar

[Steven P. Administrators]

Install IE8 Beta 2 and you'll see a button at the top that forces "compatibility mode" that website (like Neowin) is not fully compatible with IE8, see the news story and my paragraph on Neowins troubles with IE8 b2 here: https://www.neowin.net/news/main/08/08/28/m...se-ie8-beta-2-2

[minkcar]

Install IE8 Beta 2 and you'll see a button at the top that forces "compatibility mode" that website (like Neowin) is not fully compatible with IE8, see the news story and my paragraph on Neowins troubles with IE8 b2 here: https://www.neowin.net/news/main/08/08/28/m...se-ie8-beta-2-2

But this is IE7 still, I have not installed the IE8 beta.

[Steven P. Administrators]

Oh I apologise, it looks like the web admin didn't account for Internet Explorer then :/

[minkcar]

Hehe but they did, I helped code it. Everything was displaying fine, it both IE and FF up until a few days ago after an extra page was added, and then it went all weird, but it displays fine once you CTRL + F5 the page :(

[Steven P. Administrators]

Looks like someone with vast CSS knowledge will have to have a look at your CSS file, did it mess after adding a section in the left links bit?

[The_Decryptor Veteran]

It's like that in Firefox too, the page is terribly written, did they even bother checking it before putting it up?

They've got iframes with a source starting with "../" in the root folder (you're in the root folder, you can't go any higher)

[minkcar]

Yea I know it's written pretty poorly, it had to be put up quickly, but the point it it was rendering completly fine up until a few days ago and now it doesn't render until you refresh the page for some reason. It's as if the css file isn't being read the first time around but the link to it is in there.

Yea it went wrong after a link was added into the latest news part on the left hand side.

[p858snake]

your css seems to be missing bits and has random sections as well

body

{

background-image: url(Images/Global_Images/BG_Gradient.jpg);

background-color: #630063;

background-position: top;

background-repeat: repeat-x;

margin-top: 0px;

}

.logo

{

position: absolute;

top: 30px;

width: 355px;

left: 30px;

}

ol

{

list-style-image: url(Images/Global_Images/Latest_News.png);

vertical-align: middle;

margin-left: 17px;

}

ul

{

list-style-image: url(Images/Global_Images/Small_Arrow.png);

vertical-align: top;

}

WTF IS THIS FOR?

li

{

pad

ENDING BRACKET

li

{

padding: 3px 0px 5px 15px;

text-align: left;

}

STARTING BRACKET and NAME

width: 70%;

height: 100%;

margin-left: auto;

margin-right: auto;

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

background-color: White;

background-image: url(Images/Global_Images/Container_BG.png);

background-position: top right;

background-repeat: no-repeat;

padding: 200px 30px 30px 30px;

min-width: 600px;

max-width: 750px;

position: relative;

overflow: hidden;

}

.normaltext

{

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

}

.menuitem

{

padding: 10px 0px 10px 10px;

border-bottom: 1px solid #640064;

width: 30%;

text-transform: uppercase;

font-family: Tahoma, Arial;

color: Black;

font-size: 15px;

position: relative;

text-decoration: none;

cursor: default;

}

.menuitem:hover

{

padding: 10px 0px 10px 10px;

border-bottom: 1px solid #640064;

width: 30%;

text-transform: uppercase;

font-size: 15px;

position: relative;

text-decoration: none;

cursor: default;

background-image: url(Images/Global_Images/Menu_Item_BG_1.png);

}

#ParentInfo

{

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

background: #FFF;

color: #52004A;

width: 350px;

height: 230px;

position: absolute;

top: -1px;

left: 100%;

visibility: hidden;

border: 5px solid #52004A;

}

#StudentInfo

{

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

background: #FFF;

color: #52004A;

width: 310px;

height: 90px;

position: absolute;

top: -1px;

left: 100%;

visibility: hidden;

border: 5px solid #52004A;

}

#AboutWeydon

{

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

background: #FFF;

color: #52004A;

width: 280px;

height: 90px;

position: absolute;

top: -1px;

left: 100%;

visibility: hidden;

border: 5px solid #52004A;

}

#Media

{

font-family: Arial, Helvetica, sans-serif;

font-size: 24px;

background: #FFF;

color: #52004A;

width: 80px;

height: 70px;

position: absolute;

top: -1px;

left: 100%;

visibility: hidden;

border: 5px solid #52004A;

}

.maincontent

{

width: 67%;

height: auto;

margin-top: 25px;

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

float: right;

}

WTF THIS ONE ISN'T NEEDED

.maincontent2

{

wid

ENDING BRACKET

.maincontent2

{

width: 66%;

height: auto;

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

float: right;

text-align: justify;

}

NAME + STARTING BRACKET

%;

height: auto;

margin-top: 25px;

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

}

.addcontent

{

width: 30%;

height: auto;

margin-top: 25px;

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

}

.mainheading

{

color: #00573C;

font-size: 25px;

margin-bottom: 10px;

letter-spacing: 2px;

}

.footer

{

width: 70%;

margin-left: auto;

margin-right: auto;

font-family: Tahoma, Arial;

font-size: 13px;

color: Black;

border-top: 1px solid #640064;

background-color: #FFFFFF;

padding: 20px 30px 20px 30px;

min-width: 600px;

max-width: 750px;

}

a

{

color: #00573C;

text-decoration: none;

}

a:hover

{

color: #00573C;

text-decoration: none;

}

a:visited

{

color: #00573C;

text-decoration: none;

}

img

{

border-width: 0px;

}

[Jerry Grey Member]

I just had a quick look, the code is a complete mess I am not surprise it not rendering.

Edited August 28, 2008 by Gerry

[former1]

Well... ****, no wonder it's not working lol :p

[p858snake]

After reviewing the source for the main index file its a mess also, It's calling scripts multiple times, you have multiple body/html/head calls, random css in the document, non closing div's.

[joker999]

Wow! html is soooo MESSY!!!!

[minkcar]

Yea i know its a complete mess we are in the process of cleaning it up, but it still does not explain why it renders wrong, but then displays fine when you CTRL + F5 the page.

[Kudos Veteran]

You have the header section in there 3 times, lmao. :D

Yea i know its a complete mess we are in the process of cleaning it up, but it still does not explain why it renders wrong, but then displays fine when you CTRL + F5 the page.

The reason for it is purely academic, you still need to fix that mess.

Here's a good starting point:

http://validator.w3.org/check?verbose=1&am...urrey.sch.uk%2F

[Kami-]

Hi,

How about you cleanse the code and then try it... you might find it actually works if you code it right :)

[p858snake]

Yea i know its a complete mess we are in the process of cleaning it up, but it still does not explain why it renders wrong, but then displays fine when you CTRL + F5 the page.

Because your code is incorrect (and missing in some cases)

And under any circumstances a business/school/company should not let anyone access a non-working website and "because people need to access it" is no excuse.

[minkcar]

BUT IT WAS WORKING, thats what you dont understand, and it works fine if you refresh the page, it just doesnt when you initally load it and thats what i dont understand. how can it not render ok but then render fine when you refresh it? its as though the CSS file isnt being read correctly the first time to position everything correctly.

[DreadBoat89]

BUT IT WAS WORKING, thats what you dont understand, and it works fine if you refresh the page, it just doesnt when you initally load it and thats what i dont understand. how can it not render ok but then render fine when you refresh it? its as though the CSS file isnt being read correctly the first time to position everything correctly.

what are you talking about... i'm using firefox and even if i do a complete refresh, it looks the same.

please understand, the ONLY way for the page to look correct the first time, you need to clean up the mess/errors found in the css file. instead of wondering why it used to work, you should wonder how to make it work again. dwelling in the past solves nothing.

[MasterC]

Tried the site in a couple different browsers, and no amount of refreshing saved it. Might be easier to scrap it and recode the whole thing from scratch.

[seethru]

Going to also agree with other people on here, you need to clean it up. Its quite likely once its clean that it will work properly. Messy code has a way of acting unpredictably.

[Kudos Veteran]

BUT IT WAS WORKING, thats what you dont understand, and it works fine if you refresh the page, it just doesnt when you initally load it and thats what i dont understand. how can it not render ok but then render fine when you refresh it? its as though the CSS file isnt being read correctly the first time to position everything correctly.

It is a mystery :iiam: lmao

[Mikeparkie]

Why not just rebuild it! stupid point i know, but why rush it in the first place and make it a mess. Not insult intended.

[DreadBoat89]

i find it interesting how there are people out there who expect broken code to work correctly...

2+2 != 5, if it did, the world will end

[Starchild]

It renders improperly every time for me. Fix the code.

[p858snake]

BUT IT WAS WORKING, thats what you dont understand, and it works fine if you refresh the page, it just doesnt when you initally load it and thats what i dont understand. how can it not render ok but then render fine when you refresh it? its as though the CSS file isnt being read correctly the first time to position everything correctly.

I've tried in multipul browsers and has never worked properly, even with forced refreshes.