PDA

View Full Version : CSS bugs - layout changes in all browsers - especially Explo


nofx1728
02-10-2006, 10:15 PM
If you could please offer some insight on how to fix these problems I'm encountering with my CSS. I obviously did something wrong.. or do not know enough about css, but my layout got all screwed up in most browsers. Firefox displays it almost accurately, except there is a little to much space between my #maincontent section, and my #cornerbar and #sidebar sections. Also, I'm not sure why this is doing this, but its doing it in Explorer, Firefox, Netscape, and Opera, so it must be something in the code - I set all my page margins to 0; but I have like a 10 pixel gap at the very top of the page. Not quite sure why, or how to fix it. You can view the page here: http://home.bellsouth.net/p/pwp-nofx1728 . Included is my css code, and my html code. Please help me.

thanks,

nofx1728

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
.gradientBackground {
background-image: url(gradient_rectangle.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}


#mainTable {
/*/*/line-height: 1.5em; /* */
}

#mainTable td {
padding: 0px;/*Pads each table cell in modern browsers*/
}

#maincontent {
font-size: 14px; /*/*/font-size: 100%; /* */
}

#logo {
background-color: #FFFFFF;
background-image: url(celeste_logo1.gif);
background-repeat: no-repeat;
}


#cornerbar {
width: 221px;
height: 31px;
font-size: 85%; /*/*/
font-size: 85%; /* */
background-image: url(images/corner.gif);
background-repeat: no-repeat;
}

#sidebar {
Width: 221px;
font-size: 85%; /*/*/
font-size: 85%; /* */
background-image: url(images/side.gif);
background-repeat: repeat-y;
vertical-align: top;
}

#header {
background-color: #25408F;
color: #FFFFFF;
}

#footer {
background-color: #FFFFFF;
color: #000000;
font-size: 70%; /* */
}

td, p, ul, ol {
font-family: Arial, Helvetica, sans-serif;
}

h1:first-child {margin-top: 0;}/*starts first h1 in TD flush top*/
h2:first-child {margin-top: 0;}/*starts first h2 in TD flush top*/
h1 { font-size: 160%; }
h2 { font-size: 140%; }

#sidebar a {
/*/*/padding: 3px;
display: block;
border: 2px dotted #CCC;
text-decoration: none;
line-height: 1em;
width: 160px; /* */
}

#sidebar a:link, #sidebar a:visited {
color: #666;
}

#sidebar a:hover, #sidebar a:active {
color: #FFFFFF;
background-color: #CC0000;
border: 2px solid #000;
}

#sidebar ul {
/*/*/padding-left: 1em;
margin-left: 1em;
list-style-type: none; /* */
}


#sidebar li {
/*/*/margin: 0px 0px 6px 0px; /* */
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" id="mainTable">
<caption>
</caption>
<tr>
<td width="800" colspan="0" id="header"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="50" title="celeste banner">
<param name="movie" value="celeste_banner.swf" />
<param name="quality" value="high" />
<param name="scale" value="noborder" />
<embed src="celeste_banner.swf" quality="high" scale="noborder"pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="50"></embed>
</object></td>
</tr>
<tr>
<td colspan="2" class="gradientBackground"></td>
</tr>
<tr>
<td colspan="2"><div align="center">celeste_logo1.gif</div></td>
</tr>
<tr>
<td colspan="2" class="gradientBackground"></td>
</tr>
<tr>
<td colspan="2"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="800" height="50" title="navigation">
<param name="movie" value="celeste_nav.swf" />
<param name="quality" value="high" />
<param name="scale" value="noborder" />
<embed src="celeste_nav.swf" quality="high" scale="noborder"pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="50"></embed>
</object></td>
</tr>
<tr>
<td id="cornerbar"></td>
<td width="316" rowspan="2" id="maincontent"><p align="center">celeste_group.png</p>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>


Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>


Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p></td>
</tr>
<tr>
<td id="sidebar">

insert some contect here see

what s giong to happen </p>
</td>
</tr>
<tr>
<td colspan="2" class="gradientBackground"></td>
</tr>
<tr>
<td colspan="2" id="footer">

Celeste and Associates, P.A. </p></td>
</tr>
</table>
</body>
</html>

domedia
02-11-2006, 01:46 AM
2 things you have to do :)

First remove this emtpty tag which creates most of the white space on top of the page.: <caption>
</caption>

Then you have to go through the way you're commenting stuff in your CSS file. CSS comment should only be done this way:

/* This is a comment */

Your CSS file has some examples of too many slashes/stars which confuses the browser.

With those 2 things set you should be all good :)

nofx1728
02-11-2006, 03:47 AM
This is my first time using CSS, and I got a lot of help from projectseven.com - which I found from adobe Dreamweaver forum in a post about CSS. In one of their articles they say "The nested double comments around the declaration hides the style from Netscape 4, which does not do very well with line-height" http://projectseven.com/tutorials/css/css_td/page3.htm

Is this wrong?

BTW <caption> </caption> worked perfectly. Thank you very much. I'm waiting to change comments in CSS until I see your response to the question above.

Thanks for your help, I really appreciate it.

nofx1728

domedia
02-11-2006, 05:24 AM
Netscape 4 is not used anymore (for the most part).
I manage a large number websites in my dayjob, and none of them get any nn4 users (of significant number, meaning more than 1%). These websites mostly get U.S traffic.

I remember reading some stats where there was still some userbase for NN4 in germany, but that was a while ago. Unless your website stats tells you that you have a large enough number of NN4 users, I would have no problem forgetting about them if I were you.

There's no reason why you should use a CSS hack to support an old browser not being used anymore, when you at the same time risk future compatability.

In P7's defense, the article is probably old, from a time when supporting nn4 was good development. I used to do that too, but with seperate stylesheets for different browsers.. glad those days are gone.. :wink:

nofx1728
02-11-2006, 11:29 PM
Ok.. I eliminated the double comments, and validated my CSS online. However, I'm still having major problems in Explorer and Opera. My #maincontent is appearing all the way to the right - past everything on the page, and my #sidebar is appearing all the way down on the page - as opposed to right underneath #cornerbar . I have no clue how to fix this. Here is my CSS, if you have any idea how to fix this, please help. Thanks for all the support so far.

nofx1728

html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset {
margin: 0;
padding: 0;
border: 0;
}

body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
}
.gradientBackground {
background-image: url(gradient_rectangle.jpg);
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}


#mainTable {
line-height: 1.5em;
}

#mainTable td {
padding: 0px;
margin: 0px;
}

#maincontent {
font-size: 14px; font-size: 100%;
}

#logo {
background-color: #FFFFFF;
background-image: url(celeste_logo1.gif);
background-repeat: no-repeat;
}


#cornerbar {
width: 221px;
height: 31px;
font-size: 85%;
background-image: url(images/corner.gif);
background-repeat: no-repeat;
}

#sidebar {
Width: 221px;
font-size: 85%;
background-image: url(images/side.gif);
background-repeat: repeat-y;
vertical-align: top;
}

#header {
background-color: #25408F;
color: #FFFFFF;
}

#footer {
background-color: #FFFFFF;
color: #000000;
font-size: 70%;
}

td, p, ul, ol {
font-family: Arial, Helvetica, sans-serif;
}

h1:first-child {margin-top: 0;}
h2:first-child {margin-top: 0;}
h1 { font-size: 160%; }
h2 { font-size: 140%; }

#sidebar a {
padding: 3px;
display: block;
border: 2px dotted #CCC;
text-decoration: none;
line-height: 1em;
width: 160px;
}

#sidebar a:link, #sidebar a:visited {
color: #666;
}

#sidebar a:hover, #sidebar a:active {
color: #FFFFFF;
background-color: #CC0000;
border: 2px solid #000;
}

#sidebar ul {
padding-left: 1em;
margin-left: 1em;
list-style-type: none;
}


#sidebar li {
margin: 0px 0px 6px 0px;
}

domedia
02-12-2006, 12:38 AM
nofx1728, I'll look into this, but it won't be til tomorrow :)