Layout Problems

All Forums >> [Web Development] >> General Web Development

Message

Nicole -> Layout Problems (1/9/2005 19:28:32)

I'm nearing the end (hopefully) of creating my first valid XHTML website using CSS. I've decided to validate it using "Transitional" rather than "Strict", as it was an old template that used tables for layout, many of them nested. It seems to me as if XHTML Transitional is more lenient on the width attribute, can anyone varify that at all?

So the site is valid, but i still have 4 visual properties with the site that aren't quite right and having spent a long time trying to figure them out, i'm wondering if anyone here can help at all?

This is the website and i'd like it to appear as close to the template as it existed on my portfolio page.

There is too little padding above the banner compared to the original.
There is a small white space at the bottom of the table containing the banner which i can't seem to eliminate.
The links in the navigation should be a lighter grey to begin with.
The main body of the page (containing the 3 columns) should have widths of 25%, 55% and 20% respectively but i'm having a terrible time trying to get that to happen.

Can anyone perhaps compare the XHTML to my css code

body {
background-color: #f4f0e6;
}

p {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #666666;
font-size: 0.9em;
}

#page table {
border: 1px solid #000000; 
background-color: #ffffff;
padding: 10px;
margin-right: auto;
margin-left: auto;
}

#header table { 
padding: 0px; 
margin-top: 0px; 
margin-bottom: 0px;
align: center;
margin-top: auto;
margin-bottom: auto;
}

#navigation table {
background-color: #b19547;
padding: 5px;
}

#navigation p {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #525252;
text-align: right;
}

#navigation a:link, a:visited, a:active {
color: #525252;
text-decoration: none;
} 

#navigation a:hover {
color: #ffffff;
}

#content table {
border: 0px solid;
padding: 10px;
}

#content h4 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #666666;
font-size: 1.0em;
font-weight: bold;
text-align: left;
}

#content img {
border: 1px solid #000000;
float: left;
margin: 5px;
}

#content ul {
list-style-type: square;
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #666666;
font-size: 1.0em;
text-align: left;
}

#content p {
text-align: left;
}

#lefttop table {
border: 1px solid #000000;
background-color: #f4f0e6;
}

#lefttop h1 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #000000;
font-size: 1.4em;
font-weight: bold;
text-align: center;
margin-top: 0px; 
margin-bottom: 0px;
}

#leftmiddle table {
border: 1px solid #000000;
background-color: #568406;
padding: 10px;
}

#leftmiddle h2 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
text-align: center;
margin-top: 0px; 
margin-bottom: 0px;
}

#right table {
border: 1px solid #000000;
padding: 10px;
background-color: #006897;
text-align: left;
}

#right p {
color: #ffffff;
}

#righttop table {
background-color: #003366;
border: 1px solid #000000;
padding: 10px;
}

#righttop h3 {
font-family: Arial, Verdana, Helvetica, sans-serif; 
color: #ffffff;
font-size: 1.4em;
font-weight: bold;
text-align: center;
margin-top: 0px; 
margin-bottom: 0px;
}

#footer table {
border: 0px solid;
}

#footer p {
font-size: 0.9em;
color: #666666;
text-align: right;
margin-top: 0px;
margin-bottom: 0px;
}

#footer a:link, a:visited, a:active {
color: #666666;
text-decoration: none;
text-align: right;
} 

#footer a:hover {
color: #000000;
text-align: right;
}

and possibly enlighten me a little (or a lot) about why these 4 things just aren' working for me?

Thanks

Nicole

BobbyDouglas -> RE: Layout Problems (1/9/2005 19:39:28)
Although using the em font size looks good, it really doesn't make too much of a difference. I noticed that on some computers, using em font size will alter the entire website. Just a suggestion, as I ran into a problem with it.

Nicole -> RE: Layout Problems (1/9/2005 20:24:41)
Thanks Bobby, I really have to do a lot more reading on that subject, i was under the impression that ems were the way to go, even though the font size looks weird on my screen with my browser text-size setting set to small. I'll have to change it to medium. You have helped to fix problem 4 though, i realised the length of the word "Testimonials" was probably setting the width for that cell because it was so long. So, i've changed the size of that font and the widths of those cells now appear normal. One problem down, 3 to go... Nicole

BobbyDouglas -> RE: Layout Problems (1/9/2005 20:34:06)
Wow, I fixed a problem without trying! This has been an issue with one of my recent sites. I changed to a fixed width, and the issue went away. Everything else is a fixed width (but still a liquid design), so I used a fixed font size. I noticed this issue comes up a lot with people running IE 5.x-6.x on the lower screen resolutions. Glad to see you got it fixed though.

Nicole -> RE: Layout Problems (1/10/2005 2:06:22)
Well it seems as if i've finally succeeded, yet i'm not so sure. I'm not sure if i was doing the right thing, but i was editing, uploading, editing, uploading...etc all day, and it seems my computer couldn't keep up as i was getting my changes right, but my computer had cached old versions and wasn't showing the updated page. Has anyone else had a similar problem to this? If so, how can it be fixed? I'm still having that problem with one aspect of that page. The links in the navigation are sometimes showing as light and others a dark grey. Can anyone please tell me what colour these links appear to them, and whether they change colour when you refresh the page? Thanks a million guys, i'd still like more padding at the very top of the page, but i'm afraid i'm exhausted, that'll have to wait until tomorrow. Nicole

Charles W Davis -> RE: Layout Problems (1/10/2005 14:37:49)
Nicoleoz, I suggest that you change cellpadding to some number other than 0 (zero). The text abuts the borders and makes reading difficult.

Nicole -> RE: Layout Problems (1/10/2005 15:23:10)
Well thanks Charles, It looks perfect in IE, but ridiculous in Firefox and Opera, thanks for reminding me that i should check the other browsers. Looks like i have a few more days work to go on this template and here i was thinking it was practically finished. I thought the whole idea of validating code was so that it appeared the same in all browsers? Nicole

jaybee -> RE: Layout Problems (1/10/2005 16:08:30)
quote: cached old versions and wasn't showing the updated page. Has anyone else had a similar problem to this? If so, how can it be fixed? Ctrl + F5 If that doesn't work then put a ? on the end of the url in the address bar. The links appear to be very pale grey changing to white when you hover. Hardly any contrast change at all. Refreshed page and nothing changed.

BobbyDouglas -> RE: Layout Problems (1/10/2005 16:11:35)
I thought the whole idea of validating code was so that it appeared the same in all browsers? - This was my assumption, but I was apparently very wrong. It helps, but WILL NOT make it appear the same in all browsers. Sometimes it makes me wonder why I should spend so much time validating code. The reason is, because most people cannot find out what works, and what doesn't work, so they validate their code in order to hopfully clear up the problems. It helps, but it takes a long time for some sites.... Someone ought to move this to the CSS forum. Since that is your issue, and maybe Deb will take a look if she has the chance. Jaybee, shift + F5 reloads the page without using the cache.

jaybee -> RE: Layout Problems (1/10/2005 16:31:32)
quote: validating code was so that it appeared the same in all browsers Eh? Where did you get that idea. Noooo. You validate the code so you have a better change of it appearing similar in all browsers but that's your lot. You only need to take a look at the box model explanation to find out that valid code doesn't help you when IE adds borders and padding to the box size whereas the Gecko browser include it. CTRL F5 usually has the desired effect when I keep seeing the old page. If that doesn't work then I use the ? method.

jaybee -> RE: Layout Problems (1/10/2005 18:04:39)
Nicole, I've taken a look at the html and the css and you seem to be a bit confused over the tables and divs issue. You don't need both. You have a table with a div in it then another table in that, then a div then....... Part of the problem is that you're trying to use full css but using FP design mode as well and the two are incompatible. I've sent you a breakdown of the problems by PM.

BobbyDouglas -> RE: Layout Problems (1/10/2005 22:10:35)
CTRL F5 usually has the desired effect when I keep seeing the old page - What does control F5 do?

Kitka -> RE: Layout Problems (1/11/2005 1:29:01)
quote: - What does control F5 do? Does a forced refresh from the server, rather than pulling it out of local cache. However, drawback is that sometime a page can be cached somewhere upstream of your ISP, so you still don't see the latest even with the Ctrl F5 (same as holding down Control while you click Refresh button with your mouse). I have a contributor to one of my sites who cannot see the changes till the next day after a publish. No amount of refreshing makes any difference. His ISP denies any problem. [:@]

BobbyDouglas -> RE: Layout Problems (1/11/2005 1:36:09)
Control + Refresh does the same thing as Shift + refresh?

Nicole -> RE: Layout Problems (1/11/2005 2:16:52)
Hi Kitka, I used to have that "next day" problem with Ihug and so did an old friend of mine. Were they the server by any chance? I'm now with TPG and the problem still occurs, but mainly in the night. I've looked at the list of files in a directory as i update them by ftp and there can be up to 10 cached versions of the same file, and no way i can see to delete them. Nicole

Kitka -> RE: Layout Problems (1/11/2005 3:18:59)
quote: Were they the server by any chance? No, it was shoalhaven.net.au The person concerned has since moved to the same ISP we use, and that problem and other minor but niggling issues, were resolved. I have heard similar reports about ihug and TPG though.

Kitka -> RE: Layout Problems (1/11/2005 3:23:53)
quote: Control + Refresh does the same thing as Shift + refresh? Seems like it!

Page: [1]

0.09375