Weird... How do I fix this?

**fillup07** · Nov 2, 2002 15:01

Ok, you guys helped me with my site layout and CSS and it was great.

But now, I changed my page over to XHTML (basically, all I had to do was add a doc type) and it is different.

I am using the same CSS file for both:
Here is the XHTML version: http://www.syscompsjax.com/test1.asp
Here is the original version...how I want it to look: http://www.syscompsjax.com/test2.asp

There is a difference in the width of the menu, but I am not very concerned with that (doesn't make much of a difference to me).

What I am concerned with, is the fact that the left menu on the XHTML version continues past the screen when it isn't needed, and is causing a not needed scroll bar.

What are the basic differneces in layout between the HTML and XHTML, and how do I fix my page so that it appears as I want it now?

**Rick** · Nov 2, 2002 15:15

Using IE5.5 at 1024 res in Win 2K I couldn't see what you meant. The menu bar goes to the bottom of the page and no-further, it does this on both test1.asp and test2.asp - i.e. I does what it says it should in the CSS - 100% of the page!

XHTML and HTML - the difference is that XHTML is stricter in its syntax. For example in HTML the following is correct:

PHP Code:


<img src="image.jpg">

in XHTML you would need to do this:

PHP Code:


<img src="image.jpg" alt="Picture of a computer" />

Note the / at the end to close the tag, in XHTML all tags must be closed, and the alt tag in XHTML all images must have the alt tag.

All tags and arguments must be lower case (for example onclick replaces onClick), everything must have a value. I.e.

PHP Code:


<td class=new nowrap> 

// would have to become

<td class="new" nowrap="nowrap">

Note that the class tag is now surrounded by quotes (this is required by XHTML) and nowrap is defined (also required)

There are more changes, for more infomation see the W3C infomation on XHTML standards at: http://www.w3.org/TR/xhtml1/

also tutorials etc on W3Schools at: http://www.w3schools.com/xhtml/

Good luck

Rick

**fillup07** · Nov 2, 2002 15:34

Rick,

I appreciate the response. I know the basic differences between XHTML and HTML in terms of the syntax, but I don't understand why these two pages with the same exact code (except the doctype) look different.

I am running IE 6 at 1024 resolution on Win XP.

But test1 produces a scrollbar, and the "bottom" border of the menu is not seen unless you scroll down.

test2 has no scrollbar, and the bottom of the border is whereever the bottom of the browser is.

Maybe you could check again, and if not, I'll post screenshots of what I'm talking about.

**Rick** · Nov 2, 2002 15:51

I've refreshed the page several times etc - but I can't see any scroll bars

sorry!

Rick

**slider** · Nov 2, 2002 16:26

I'm seeing the scroll bar problem. I looked at your page and your style sheet and suspect that your header div is bumping the main div down. If you changed the color of your main div I bet you would see that it, too, is being bumped down, not just the menu div (as the menu div is inside the main one)...

Maybe try nesting the header div inside the main div also, or try un-nesting them all.

**Ruchir** · Nov 3, 2002 07:57

well, i saw ur pages... and found that one simple code >

Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

was making the difference... i have never got any of my sites validated or asswociated with w3g... so i don't know what does that code do... but it reads like its for xhtml transition...... so, that's the line making the difference i feel...

**Rick** · Nov 3, 2002 08:02

PHP Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Defines the document as XHTML 1.0 - its required for the document to be validated

Rick

**DougBTX** · Nov 3, 2002 09:46

Originally posted by fillup07
I am running IE 6 at 1024 resolution on Win XP.

Believe it or not, your "problem" is the above ^^^

Without the doctype, IE6 will display what IE5 would (which is what you want, but what is also wrong)

When I first looked at your page, I didn't see a differance, because Mozilla displayed them both "properly" (ie with the scroll bar)

Setting height:100% according to the standards, is basically not what you want to do, which is why you have problems

Try adding lots of content to your page: you will see that your menu will just stop part way down. (not sure what it does in IE5, but whatever it is, it (probably) shouldn't be.)

So, to fix it: Do what you did for the header, the background image, but set it on the <body> element. Look up background-repeat somewhere, and set it to repeat-y, so that you don't get the background over the entire page.

That should be enough, but if not, just reply

Douglas

PS: Rick: The reason you see the page how you do, is because IE5 displayed the page... how IE5 displays the page

(which is wrong...)

**Rick** · Nov 3, 2002 16:22

Originally posted by DougBTX
PS: Rick: The reason you see the page how you do, is because IE5 displayed the page... how IE5 displays the page

(which is wrong...)

I never trust how IE renders pages, I ain't a fan of microsofts standards defiance, I just thought it a little strane two IE users couldn't see the same problem

Rick

**fillup07** · Nov 6, 2002 16:03

Originally posted by DougBTX

So, to fix it: Do what you did for the header, the background image, but set it on the <body> element. Look up background-repeat somewhere, and set it to repeat-y, so that you don't get the background over the entire page.

That should be enough, but if not, just reply

I've been trying a lot, but I can't get it to work.

First I did what you said, and got the picture to stretch across by being the background of <body>.

I colored the main div grey, and my page (well, this test page anyways) is looking awful.

Here's the page:
http://www.syscompsjax.com/test3.asp

But since that's so messed up and stuff (looks, and CSS), it would probably be better if you worked off of
http://www.syscompsjax.com/test1.asp

While setting the background of the main div grey (which I might do permanetly in the future), it blocks the view of the body background. Also, the page is too wide (I have no idea why), and the left menu doesn't extend far enough.

Instead of using the background for the header, I also tried setting a header div inside the main div, but couldn't get that to work either.

Please help.
Phil

**DougBTX** · Nov 7, 2002 14:05

The problem I see at the moment, is that you want to be in control too much. Let go a bit.

(Also, the "First I did what you said" bit means I told you to do something I didn't want you toi do from the start: so bad me)

Code:

body
{
	height: 100%;
}

Just one question: "Why?"

You need to simplify, simplify, simplify, the whole thing. Remember: this is easy.

You want images in the top corners? No flapping around, just do it:

Code:

#topright
{
 position:absolute;
 top: 0px;
 right: 0px;
}

(did you see that I copied most of that from your style sheet you have already?)

Code:

#topleft
{
 position:absolute;
 top: 0px;
 left: 0px;
}

You could use img#topleft if you wanted, but I generally don't bother. I think it looks neater. It doesn't really matter anyway, but does give you some more flexability.

Clean up your image tags too:

Code:

<a href="/" id="topleft"><img src="images/topleft.jpg" alt="System Components Corparation" title="Welcome!" /></a>
<img id="topright" src="images/topright.jpg" alt="www.syscompsjax.com" />

Perhaps people will disagree with me, but I like my image tags like that. Means you can go from XHTML Strict if you want to

While I'm pestering, you should really add language attributes too:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Next, that first bg image. You were good before (I think, didn't really look)

Code:

<div id="topbg"></div>

#topbg 
{
height: 102px;
background-image: url('/images/middlestretch.jpg');
}

Make sure that that div tag is above any other inline content in your page.

Repeat: (this is what I was talking about in my last post)

Code:

<div id="leftbg"></div>

#topbg 
{
width: ???px;
background-image: url('/images/leftbg.jpg');
background-repeat: repeat-y;
}

leftbg.jpg is a croped screenshot of your current left menu, trimmed for repeating.

One left menu:

Code:

#menu
{
position: absolute;
top: 0px;
left: 0px;
width: 150px;
padding: 2em 1em 0 0;
text-align: right;
margin: 0;
}

<div id="menu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/login.asp">Login</a></li>
<ul><a href="/contact.asp">Contact</a></li>
</ul>
</div>

Look up alistapart.com to find out how to format you list (and yes, it should be a list) I'm not going to spell everything out to you

(in fact, I've probably already told you too much for your own good..)

Code:

#main	{
margin-left: 170px;
margin-top: 1em;
padding: 0;
}

<div id="main"><p>content<p></div>

Set your fonts (using em's) for <h1> (etc), <p> and <li> tags. Don't set them for divs, or bodys, or whatever. Keep it simple.

Put text in menus (<li>) or paragraphs (<p>) or headers (<h1>, <h2>, <h3>...).

That should be it for the most part. (I may not have helped you atall, but that is allways the risk)

Douglas

User Tag List

Thread: Weird... How do I fix this?

Thread Tools

Display

Weird... How do I fix this?

Bookmarks

Bookmarks

Posting Permissions