PDA

View Full Version : Help with CSS Layout

bluephoenix
07-18-2003, 04:00 AM
I've written valid XHTML1 strict webpages, and used CSS and <div> elements for my layout as opposed to <table> per W3C's recommendations.

But, the page display is totally wacked in Netscape!

Please view acmgfcu.org/temp/find.php (http://www.acmgfcu.org/temp/find.php) in both MSIE and Netscape, and offer any suggestions on how to correct the problem.

Thanks a million...

-Tim
MotherNatrsSon
07-18-2003, 05:10 AM
I used Netscape 7 and IE 5.1.6 on a Mac to look at it and it is way better in Netscape than IE. I tried validating your css but it told me in an error to validate the xhtml. I validated the xhtml and it validates as xhtml strict. The CSS validator at W3C said you had an error in your xhtml so it couldn't validate your CSS.

CSS Validator http://jigsaw.w3.org/css-validator/validator-uri.html

xhtml validator http://validator.w3.org/

One of these is not working correctly it seems.

Copy and Paste your CSS here??

MNS
Roy Sinclair
07-18-2003, 02:29 PM
Yep, it looks pretty bad in Netscape 4 and Mozilla 1.3 (which is the *real* code behind Netscape 7).

I'd suggest you turn on some small borders on all your tables for testing. Your stylesheet suspiciously sets a default width for all tables near the top and since you're using tables for layout that would be the first place I'd look.
giz
07-19-2003, 02:58 AM
You should export the CSS to an external file and call it with instructions in the <head> section of the HTML file. Most people use this one, but it can cause problems:

<link type="text/css" rel="stylesheet" src="/path/file.css">

It is better to use this slightly longer version of this, again placed in the <head> section of the HTML file:

<meta http-equiv="Content-Style-Type" content="text/css">

<style type="text/css">
@import url(path/file.css);
</style>

This version hides the CSS from older versions of Netscape (like NS 4 for example) that cannot handle CSS. This stops those versions from displaying a corrupted page with overlapping elements.
meow
07-19-2003, 08:29 AM
Yes, but not while asking for help please. It's so much easier when the CSS is embedded. :)

It's wacky in IE5 too. Sometimes the middle part drops below all the rest, leaving a huge blank space.
MotherNatrsSon
07-19-2003, 03:24 PM
There is an external stylesheet as well as some inline CSS. There may be some conflicts. That is why I asked for the CSS to be copied and pasted here.

MNS
loomer
07-20-2003, 02:32 AM
Originally posted by MotherNatrsSon

CSS Validator http://jigsaw.w3.org/css-validator/validator-uri.html

xhtml validator http://validator.w3.org/


MNS

Wow.. What great tools! :D
Scrowler
07-20-2003, 07:08 AM
Looks fine in IE 6.0
giz
07-20-2003, 08:16 AM
The version at http://validator.w3.org/detailed.html allows you to set options first.
bluephoenix
07-22-2003, 01:03 AM
...sure thing. Here's what I've got so far for the CSS. It's not pristine and needs some cleaing up, but that's exactly what I'm trying to do :)

The Microsoft CSS is at
http://www.acmgfcu.org/temp/css/msiecss.css

I then copied that into the Netscape CSS and took it from there...
http://www.acmgfcu.org/temp/css/nscpcss.css

The page's source code is:


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
<head>
<title>Find Us</title>
<meta name='description' content='This is the location information for ACMG Federal Credit Union.' />
<meta name='keywords' content='ACMG locations, locate ACMG, Where is ACMG?, ACMG branchs, ACMG branch locations, ACMG office locations' />

<?php
include('include/head.php');
?>

<h2>Find Us</h2>
<div style='width: 455px; margin-bottom: 30px;'>
<div style='width: 285px; float: left;'>
<img src='gif/map.gif' alt="Map Showing ACMG's Locations" style='border: black 1pt solid;'/>
</div>
<div style='width: 150px; float: right;'>
<p><b>Solvay Office</b><br/>
1753 Milton Avenue<br/>
Solvay, NY 13209<br/>
Phone: 488-4433<br/>
Fax: 488-9201<br/>
Toll Free: 1-800-634-9239<br /></p>

<p><b>Liverpool Office</b><br/>
7555 Morgan Road<br />
Liverpool, NY 13088<br />
Phone: 457-9301<br />
Fax: 457-3815</p>

<p><b>On the Internet</b><br/>
E-mail: <a href="mailto:mail@acmgfcu.org" onmouseover="self.status='E-mail mail@acmgfcu.org'; return true;" onmouseout="self.status=''; return true;">mail@acmgfcu.org</a><br/>
Web Site: <a href="http://www.acmgfcu.org">www.acmgfcu.org</a></p>
</div>
</div>
<div>
<table id='hours' cellpadding='4' cellspacing='0'>
<tr><th colspan='6'>Office &amp; Drive-Thru Hours</th></tr>
<tr><th> </th><th>Monday</th><th>Tuesday</th><th>Wednesday</th>
<th>Thursday</th><th>Friday</th></tr>

<tr><th class="th">Solvay Office</th><td>9am&ndash;5pm</td>
<td>10am&ndash;5pm</td><td>9am&ndash;5pm</td>
<td>9am&ndash;6pm</td> <td>9am&ndash;6pm</td></tr>

<tr><th class="th">Solvay Drive-Thru</th><td>8am&ndash;5pm</td>
<td>10am&ndash;5pm</td> <td>8am&ndash;5pm</td>
<td>7:30am&ndash;6pm</td> <td>7:30am&ndash;6pm</td></tr>

<tr><th class="th">Liverpool Office</th><td>9am&ndash;5pm</td>
<td>10am&ndash;5pm</td> <td>9am&ndash;5pm</td>
<td>10am&ndash;6pm</td> <td>9am&ndash;5pm</td></tr>
</table>
</div>
<?php include('include/incl02.php'); ?>


The end results after the included php's processing can be seen just by viewing the page's source.

-Tim
MotherNatrsSon
07-22-2003, 01:19 AM
Both of your CSS files validate. Someone with more knowledge of css positioning is going to have to help you because I am not going to be able to figure this all out too easily.

I will say I see little in your css in the way of position: absolute; or position:relative; or position: x 10(px, em, or %); y(px, em, or %);....

MNS