PDA

View Full Version : CSS/Ajax Error



TomBower
Apr 12th, 2010, 06:01 PM
I am working on a little portfolio for myself and I have decided to link up all my previous workings into one page (Figure 1). I then decided to link them up using an Ajax/jQuery Page Loader so they appeared in the div below (Keeping the header part at all times, effectively).

The problem is, when I click the links, the pages load but the CSS for the 'minisites' are all messed up as you can see by figure 2 which is supposed to be a wordpress blog.
http://f.justupload.it/ff3454f1ab799278d09cb756ac636e00.png

What is wrong? Please help.

abduraooft
Apr 12th, 2010, 06:13 PM
What is wrong? Please help. There's absolutely no way to debug an image and suggest the possible corrections. Can we have a link to your page? Or you may host a demo page, to illustrate the issue, at somewhere like freehostia.com.

TomBower
Apr 12th, 2010, 06:15 PM
http://bowerberry.info/ There you go.

Excavator
Apr 12th, 2010, 07:33 PM
Hello TomBower,
You have a few markup errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbowerberry.info%2F) that are wrecking your page, the biggest being the lack of a DocType Declaration. See the link about DocTypes in my signature line. You should probably go with an HTML 4.01 Strict.

What the validator does not seem to find is your index page has a #main and so does the blog you load into it. You also have a #wrapper with a width of 980px and an absolute positioned #main relative to the body of the document set at 100% width.

It would be much easier to just put the header at the top of each page and do away with most or all of that absolute positioning.


In your embedded styles, try commenting out #main like this -
#bannerimg {
background-image: url('header.png');
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 205px;
z-index:1; }

/*#main {
position: absolute;
top: 206px;
left: 0px;
width: 100%;
height: 100%;
z-index:3; }*/


#date {
position: absolute;
top: 76px;
right: 30px;
z-index: 2;
font-family: Tahoma, Verdana, Arial;
font-style:normal;

The embedded #main is taking precedence over the #main that is in your linked style.css. Removing the embedded one seems to fix some issues... you are still re-using an id and that is invalid.

TomBower
Apr 12th, 2010, 08:16 PM
Hello TomBower,
You have a few markup errors (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fbowerberry.info%2F) that are wrecking your page, the biggest being the lack of a DocType Declaration. See the link about DocTypes in my signature line. You should probably go with an HTML 4.01 Strict.

What the validator does not seem to find is your index page has a #main and so does the blog you load into it. You also have a #wrapper with a width of 980px and an absolute positioned #main relative to the body of the document set at 100% width.

It would be much easier to just put the header at the top of each page and do away with most or all of that absolute positioning.


In your embedded styles, try commenting out #main like this -
#bannerimg {
background-image: url('header.png');
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 205px;
z-index:1; }

/*#main {
position: absolute;
top: 206px;
left: 0px;
width: 100%;
height: 100%;
z-index:3; }*/


#date {
position: absolute;
top: 76px;
right: 30px;
z-index: 2;
font-family: Tahoma, Verdana, Arial;
font-style:normal;

The embedded #main is taking precedence over the #main that is in your linked style.css. Removing the embedded one seems to fix some issues... you are still re-using an id and that is invalid.

Thankyou for the very helpful and indepth troubleshooting. I have validated it and I am still recieving the same problem. It is currently only on my localhost but I will upload if you wish.

Excavator
Apr 12th, 2010, 08:48 PM
Thankyou for the very helpful and indepth troubleshooting. I have validated it and I am still recieving the same problem. It is currently only on my localhost but I will upload if you wish.

It seems to display fine on this end. http://bowerberry.info/ - I looked at your blog page in FF3.6, IE8 and IE7 and the original problem seems fixed. It's still not valid though.

Yes, you should always upload your most current version so we are all looking at the same thing.

TomBower
Apr 12th, 2010, 10:23 PM
I have updated it. The only error is the analytic's code which Isn't in my control.