...

View Full Version : CSS display problem! Overlapping div tags = CSS hates me...



bobleny
06-02-2007, 10:51 PM
Hi, me again! :'(
I don't know how to fix this problem...
http://www.firemelt.net/crow/

CSS:


.text_body_box_declare
{
background-color: #ffffff;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0px;
border-style: solid;
border-bottom-style: none;
width: 200px;
border-width: 2px;
border-color: #0000ff;
padding-top: 1px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 1px;
text-align: center;
}


.text_body_box
{
background-color: #ffffff;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
border-style: solid;
border-width: 2px;
border-color: #0000ff;
width: 100%;
padding: 0px;
}


.text_body_box_date_time
{
margin: 0px;
padding: 0px;
}


.text_body_box_date
{
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-bottom: 2px;
border-width: 2px;
border-color: #0000ff;
border-style: solid;
border-top-style: none;
border-left-style: none;
width: 175px;
padding-top: 1px;
padding-left: 3px;
padding-right: 5px;
padding-bottom: 1px;
float: left;
}

.text_body_box_time
{
background-color: #ffffff;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 2px;
border-width: 2px;
border-color: #0000ff;
border-style: solid;
border-top-style: none;
border-right-style: none;
width: 75px;
padding-top: 1px;
padding-left: 3px;
padding-right: 5px;
padding-bottom: 1px;
float: right;
}


.text_body_box_text
{
margin: 0px;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 2px;
}


HTML:


<div class="text_body_box_declare">Welcome</div>
<div class="text_body_box">
<div class="text_body_box_date_time">
<div class="text_body_box_date">September 31, 2009</div>
<div class="text_body_box_time">12:54 PM</div>
</div>
<div class="text_body_box_text">
Some text.
</div>
</div>


If you look at the blue boxes, the text should be under the date and time. It looks sorta like <div class="text_body_box_text"> is inside of <div class="text_body_box_date_time">.

I tried display: block; thinking it would treat the two as a block and hoped <div class="text_body_box_date_time"> would stay underneath <div class="text_body_box_text">, but it didn't work...

What should I do?

Arbitrator
06-03-2007, 11:19 AM
You, apparently, donít understand how floats work. Text flows around floated elements, but it can still flow along the floatís side. Containing Floats (http://www.complexspiral.com/publications/containing-floats/) is a good article relating the basics of how floats work.

If you find this behavior to be undesirable, you can force subsequent elements below the floats. For example, to force an element below the nearest previous float in the indicated direction, you would use the clear property. Since you have floats in both directions that you want to clear, you would use the clear: both declaration.


.text_body_box_text { clear: both; }

Also, though this is unrelated to your issue, you might want validate your document (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2F). Form control elements are not allowed as direct children of the form element under the Strict DTDs. You need to put a buffer element between them. Example:


<form Ö>
<div>Ö</div>
<!-- or -->
<fieldset>Ö</fieldset>
</form>However, you donít appear to be actually using the form element since you just filled in the action attribute with an erroneous URI (#). For that reason, you may want to omit it altogether; you could simply remove it or replace it with a more generic element such as a div or fieldset .

Finally, you might want to put line breaks after each of your div elements and use indentation before them to make your code more readable.

bobleny
06-03-2007, 09:26 PM
Thanks a lot!

The link you gave me helped a lot!

I always validate my source code, until now, I've ignored the errors that it gave about the <input>, because I didn't understand what they meant. I'm glade you explained to me. I was unaware that input fields needed to be in a container, not that I know why.
----------------------

I had two other question about validation though, what do the warnings mean in my CSS?
CSS Validation (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2Fcss.css&warning=1&profile=css21&usermedium=all)

How come my HTML is validated as "Tentatively passed", why not regular pass?
HTML Validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2F)

I'm sure it has something to do with this "character encoding" it keeps mentioning, but I don't know what that is or how to add it...

_Aerospace_Eng_
06-03-2007, 10:35 PM
They are just that warnings. Its making sure you don't have text that has the same background color. Since the nav_links and right_links are in different elements you don't need to worry about those elements. I would try this for your CSS

html, body {
background:#fff;
height:100%;
margin:0;
padding:0;
color:#000;
line-height:15pt;
word-spacing:2pt;
font-family:courier;
}

#main_body {
background:#fff;
width:80%;
min-height:100%;
min-width:480px;
margin:0 auto;
padding:0;
}

.align_right {
text-align:right;
}

.align_left {
text-align:left;
}

.align_center {
text-align:center;
}

.float_right {
float:right;
}

.float_left {
float:left;
}

.admin_text_edit {
height:15px;
margin:10px;
bottom:0;
left:0;
}

hr.short {
background-color:#00f;
width:40%;
margin-left:0;
margin-bottom:2px;
}

hr.long {
background-color:#00f;
width:100%;
margin-left:0;
margin-top:5px;
margin-bottom:5px;
}

.login_input {
margin:5px;
}

/* Start of Header ---------------------------------------------------- Start of Header */
#header {
background:#090;
height:80px;
position:relative;
}

#header_nav {
position:absolute;
bottom:0;
left:0;
}

a.nav_links, a.nav_links:link, a.nav_links:visited {
border:1px solid #00F;
border-bottom:0;
margin:0 3px;
padding:1px 0;
width:160px;
color:#000;
text-decoration:none;
display:block;
text-align:center;
float:left;
}

a.nav_links:hover, a.nav_selected {
border-color:#000;
}
a.nav_selected {
background:#FFF;
}

/* End of Header -------------------------------------------------------- End of Header */
/* Start of Right Panel ------------------------------------------ Start of Right Panel */
#right_panel {
width:140px;
margin:10px 0 5px 0;
float:right;
}

.right_panel_box {
background:#960;
margin:0 0 10px 0;
border:1px solid #000;
width:100%;
padding:3px 2px;
float:right;
text-align:center;
}

.right_panel_text_lable {
color:#000;
line-height:15pt;
word-spacing:2pt;
font-family:courier;
text-decoration:underline;
text-align:center;
}

.right_panel_text {
color:#000;
line-height:15pt;
word-spacing:2pt;
font-family:courier;
text-align:center;
}

.right_panel_link {
margin-top:3px;
}

a.right_panel_link:link {
color:#00f;
text-decoration:underline;
}

a.right_panel_link:hover {
background-color:#000;
color:#960;
text-decoration:underline;
}

/* End of Right Panel ---------------------------------------------- End of Right Panel */
/* Start of Text Body ---------------------------------------------- Start of Text Body */
#text_body {
width:78%;
margin:10px 0 5px 1px;
float:left;
display:inline;
}

.text_body_box_declare {
background-color:#fff;
margin:0 auto;
width:200px;
border:2px solid #00F;
border-bottom:0;
padding:1px 5px;
text-align:center;
}

.text_body_box {
background:#fff;
margin:0 auto 10px;
border:2px solid #00F;
width:100%;
padding:0;
}

.text_body_box_date {
background:#fff;
margin:0;
border:2px solid #00F;
border-top:0;
border-right:0;
width:175px;
padding:1px 5px 1px 3px;
float:left;
}

.text_body_box_time {
background:#fff;
margin:0;
border:2px solid #00F;
border-top:0;
border-right:0;
width:75px;
padding:1px 5px 1px 3px;
float:right;
}

.text_body_box_text {
margin:0;
padding-left:5px;
padding-right:5px;
padding-top:2px;
padding-bottom:2px;
display:block;
clear:both;
}

/* End of Text Body -------------------------------------------------- End of Text Body */
Its what you have already but its been optimized using shorthand notation and fixed a few bugs that IE had (double margin bug, look it up).

As to the tentatively passed. Add this within the head part of your document.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Arbitrator
06-03-2007, 10:39 PM
I always validate my source code, until now, I've ignored the errors that it gave about the <input>, because I didn't understand what they meant. I'm glade you explained to me. I was unaware that input fields needed to be in a container, not that I know why.Yeah, the DTD says ďnoĒ, so thatís the basic ďwhyĒ. Why the authors of HTML 4.01 felt the need to make that a requirement though is escapes me. Maybe they were trying to encourage use of the fieldset and legend elements.


I had two other question about validation though, what do the warnings mean in my CSS?
CSS Validation (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2Fcss.css&warning=1&profile=css21&usermedium=all)Those are just to warn you about possible color conflicts.

For one, it's common that authors donít bother to test their pages with images off; a lot of times you end up with sites that are hard to read or not readable at all when images are off (of before theyíre downloaded). A glaring example of this is the popular gaming Web site, IGN.com, which has had this problem for as long as I can remember. If you want to be able to test with images disabled easily, I suggest downloading the Web Developer extension for Firefox and using the ďImages > Replace Images with Alt AttributesĒ command; you can use that to test the quality (and presentation) of your alt text simultaneously.

The second reason for the warning is to ensure that your colors work when the user has specified default colors for the background, text, and hyperlinks (visited and unvisited states). I find that a lot of sites assume that the default background color is white, the default text color is black, the default unvisited hyperlink color is blue, and the default hyperlink visited color is purple. I actually spent several weeks browsing with colors off of the defaults and found that a lot of sites were unreadable. For example, with my default text color of lavender (light purple) on a default background color of black, sites that only specified the background color (to be white) would end up with lavender text on white. You can test this stuff for yourself by going to ďTools > Options > Options tab > Fonts & Colors > Advanced buttonĒ in Firefox. Internet Explorer et al have similar options. The general rule of thumb is that, if you specify any text or background colors, you need to specify them (including hyperlink colors) for the current and and all child elements.

Anyway, now you know. No one ever explains those warnings (even the validator) since the explanations take a long time.


How come my HTML is validated as "Tentatively passed", why not regular pass?
HTML Validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2F)

I'm sure it has something to do with this "character encoding" it keeps mentioning, but I don't know what that is or how to add it...Basically, if your document contains mis‐encoded characters, it automatically fails validation. Since you didnít declare the encoding, whatever reads your document (browser, validator, script, etc.) may fall‐back to the wrong encoding. It just happened to fall back to the right one when the validator read it.

With regard to fixing it, you need to find out what your document encoding is. Itís typically ISO-8859-1. You can take a guess that this is right if you use no special or foreign (to English and west European language) characters. If you canít find out or donít want to guess, then you can save the document again and make sure that you choose the settings. In Windows, the ISO encoding gets listed as ANSI. Different editors have different ways of doing it; some let you change it when you save and others from a menu. Personally, I would recommend UTF-8; this is the default with XHTML (as XML) and it can represent every character in every language directly typed into the file.

You can declare (but not encode) it by using:

HTTP headers sent by your server or configured via server language like PHP. This is the most compatible, while correct, method.
<?xml version="1.0" encoding="UTF-8"?>: The XML declaration is the officially recommended and most correct method of specifying the encoding for an XHTML document. Itís not often used because it triggers quirks mode in Internet Explorer 6. That issue was fixed in version 7. Note that Internet Explorer still does not support (real) XHTML even though it recognizes (and ignores) the declaration now.
<meta http-equiv="Content-Type" name="text/html; charset=UTF-8"/>: This method is generally wrong and should not be relied upon in XHTML. Itís ignored under real XHTML. It works fine in HTML (and XHTML as HTML) though.
These difficulties are one of the many reasons that I promote HTML over XHTML. Few people have a clue how to use XHTML correctly.

------------

I really need to collect my thoughts and write this stuff down somewhere. I find my self re‐explaining it over and over.

bobleny
06-04-2007, 01:35 AM
I've liked the idea of being able to add that "Validated as XHTML 1.0 Strict" tag on my sites, but I never can!

For example, the following line won't pass validation. I get 2 errors and I have no idea what to do about them...
<form action='index.php?page=admin&admin=edit' method='post'>

It has a problem with the "=" (equal) signs and the "&" (and) symbol.

------
Here use this code with the validator:
http://validator.w3.org/


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
<title>Home - Go MAD</title>
</head>
<body>
<div id="main_body">
<!-- Start of Header -->

<div id="header">
<div id="header_nav">
<div class='nav_selected'>Home Page</div><a href='index.php?page=base' class='nav_links'>Knowledge Base</a><a href='index.php?page=admin' class='nav_links'>Admin Panel</a> </div>
</div>
<!-- End of Header -->

<!-- Start of Right Panel -->

<div id="right_panel">
<div class="right_panel_box">
<div class="right_panel_text_lable">Related Links</div>
<div class='right_panel_link'><a href='http://www.google.com' class='right_panel_link'>Google</a></div><div class='right_panel_link'><a href='http://www.yahoo.com' class='right_panel_link'>Yahoo!</a></div> </div>

<div class="right_panel_box">
<div class="right_panel_text_lable">Login</div>

You are now logged in! <form action='#' method='post'><div class='login_input'><input type='submit' name='logout' value='Log Out' /></div></form> </div>
</div>
<!-- End of Right Panel -->


<!-- Start of Text Body -->
<div id="text_body">
<div class='text_body_box_declare'>Date / Time</div><div class='text_body_box'><div class='text_body_box_date'>June 03, 2007</div><div class='text_body_box_time'>3:31 PM</div><div class='text_body_box_text'>The date / Time fields have been fixed! This means that when you have text like this, it will be under the date and time rather that between the date and time; It looks a lot better.<br />

<br />
Mean while, I am working on the Admin Panel. You won't be able to see it, but it will be nice. You will just have to take my work on it!<br />
<br />
Later, I will add a calender to the right side of this. It will come in handy!<div class='admin_text_edit'><div class='float_right'><form action='index.php?page=admin&admin=delete' method='post'><div class='hidden'><input type='hidden' name='id' value='20' /></div><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='login_input'><input type='submit' name='delete' value='Delete' /></div></form></div><div class='float_right'><form action='index.php?page=admin&admin=edit' method='post'><div class='hidden'><input type='hidden' name='id' value='20' /></div><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='login_input'><input type='submit' name='edit' value='Edit' /></div></form></div></div></div></div><div class='text_body_box_declare'>Pointless</div><div class='text_body_box'><div class='text_body_box_date'>June 03, 2007</div><div class='text_body_box_time'>2:56 PM</div><div class='text_body_box_text'>Here is some meaning less text, who's sole purpose is to create a paragraph, so that people may see what happens when a paragraph is displayed in this blue box. You should note that the first couple lines of the paragraph are between the date and time. This is not a good thing, it looks like crap. This text should appear under the date and time, but for some reason it is somewhat sharing the space. I don't quite understand it.<div class='admin_text_edit'><div class='float_right'><form action='index.php?page=admin&admin=delete' method='post'><div class='hidden'><input type='hidden' name='id' value='19' /></div><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='login_input'><input type='submit' name='delete' value='Delete' /></div></form></div><div class='float_right'><form action='index.php?page=admin&admin=edit' method='post'><div class='hidden'><input type='hidden' name='id' value='19' /></div><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='login_input'><input type='submit' name='edit' value='Edit' /></div></form></div></div></div></div><div class='text_body_box_declare'>Lets Roll!</div><div class='text_body_box'><div class='text_body_box_date'>June 02, 2007</div><div class='text_body_box_time'>9:11 PM</div><div class='text_body_box_text'>Hey hot stuffs, lets roll!<div class='admin_text_edit'><div class='float_right'><form action='index.php?page=admin&admin=delete' method='post'><div class='hidden'><input type='hidden' name='id' value='18' /></div><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='login_input'><input type='submit' name='delete' value='Delete' /></div></form></div><div class='float_right'><form action='index.php?page=admin&admin=edit' method='post'><div class='hidden'><input type='hidden' name='id' value='18' /></div><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='login_input'><input type='submit' name='edit' value='Edit' /></div></form></div></div></div></div><div class='text_body_box'><div class='text_body_box_text'>Page 1 </div></div><div class='add_post'><form action='index.php?page=admin&admin=add' method='post'><div class='hidden'><input type='hidden' name='page' value='home' /></div><div class='hidden'><input type='hidden' name='pt' value='Home' /></div><div class='hidden'><input type='hidden' name='date' value='June 03, 2007' /></div><div class='hidden'><input type='hidden' name='time' value='7:29 PM' /></div><div class='login_input'><input type='submit' name='add_new' value='Add New Post' /></div></form></div><hr class='long' /><div class='text_body_box_declare'>Contact</div><div class='text_body_box'><div class='text_body_box_text'>The best way to contact me is via emial. <a href='mailto:bobloonytic@ncweb.com'>bobloonytic@ncweb.com</a></div></div> </div>

<!-- End of Text Body -->
</div>
</body>
</html>


I don't suppose any knows what to do about that?

koyama
06-04-2007, 01:58 AM
I've liked the idea of being able to add that "Validated as XHTML 1.0 Strict" tag on my sites, but I never can!
since Arbitrator is offline at the moment... Why are you wanting XHTML? Read an earlier post by Arbitrator: http://codingforums.com/showpost.php?p=569539&postcount=9


For example, the following line won't pass validation. I get 2 errors and I have no idea what to do about them...
<form action='index.php?page=admin&admin=edit' method='post'>

It has a problem with the "=" (equal) signs and the "&" (and) symbol.

A literal ampersand is written as &amp;. You need to write like this:


<form action='index.php?page=admin&amp;admin=edit' method='post'>

This is even necessary in HTML.

bobleny
06-04-2007, 03:41 AM
This works:
<form action='index.php?page=admin&amp;admin=edit' method='post'>

Until you do this:
echo "<form action='index.php?page=admin&amp;admin=edit' method='post'>";

Then it turns back into this:
<form action='index.php?page=admin&admin=edit' method='post'>

Guh.... I don't know what to do about that.... This is no fun....

_Aerospace_Eng_
06-04-2007, 04:18 AM
Are you using an editor to add that? It should stay the way it is if you are using the "code" view of whatever editor you are using.

Arbitrator
06-04-2007, 04:32 PM
I've liked the idea of being able to add that "Validated as XHTML 1.0 Strict" tag on my sites, but I never can!Itís actually easier to get a valid HTML 4.01 Strict document, if you want to make things easier on yourself.


For example, the following line won't pass validation. I get 2 errors and I have no idea what to do about them...
<form action='index.php?page=admin&admin=edit' method='post'>All ampersands need to be escaped in XHTML, even within script and style elements. In HTML 4.01, there is an exception where an ampersand doesnít need to be escaped if immediately followed by certain characters, although the exception does not apply in this case (assuming that the document were HTML).


It has a problem with the "=" (equal) signs and the "&" (and) symbol.You probably know about the character entity references &amp; or &nbsp;. The validator (and browsers) are supposed to read your hyperlink URI as having the (nonexistent) entity reference &admin; since the ampersand character starts a new reference. (The equals sign (=) implicitly terminates the character entity reference in HTML since itís not a valid entity reference character; in XHTML, this is simply an error since entity references are required to end with a semicolon (;).)


since Arbitrator is offline at the moment... Why are you wanting XHTML? Read an earlier post by Arbitrator: http://codingforums.com/showpost.php?p=569539&postcount=9I would affirm the sentiment, of course. Avoid XHTML when possible unless youíre willing to give up on Internet Explorer users since Internet Explorer doesnít support (real) XHTML. HTML 4.01 can do all of the same things as XHTML (as HTML) while being much more lenient. If you want to test drive real XHTML, try using the real file extensions of *.xhtml and *.xht or use the PHP header() method to change the Content-Type header to application/xhtml+xml.


This works:
<form action='index.php?page=admin&amp;admin=edit' method='post'>

Until you do this:
echo "<form action='index.php?page=admin&amp;admin=edit' method='post'>";

Then it turns back into this:
<form action='index.php?page=admin&admin=edit' method='post'>

Guh.... I don't know what to do about that.... This is no fun....In the spirit of practice (Iím a PHP newb), I used the echo method and got &amp; in the output as expected. _Aerospace_Eng_ is probably onto something.

bobleny
06-04-2007, 05:52 PM
Yeah, I finally got this, "&amp;", to echo. I think it wasn't uploading right.... :p

I don't use .xhtml or .xht because, I don't have a web page that isn't written almost entirely in PHP.

Check this out:
XHTML Validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2F)
CSS Validation (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2Fcss.css&warning=1&profile=css21&usermedium=all)
---------------

I happy! I am working on the other pages that only the Admin can see... I am loading the page and copying the source code over to it.
--------------------------------------

I absolutely despise internet explorer, and I gave up all hope for it years ago. There isn't many Microsoft products that I do like. That includes windows, which is why I am on Linux.

Unfortunately, the site I am working on will be mostly viewed on IE. I am not doing anything fancy though. It is all CSS except for the forms. It should be fine.
--------

There are many reasons I support XHTML over HTML:
The biggest, I'm tired of looking at HTML that looks like this:
<HtML>
<BODY>
<B><FONT COLOR=RED>Hello, I know not.</B></FONt>
</HTML
</body>

*Then they wonder why it doesn't work. "Hmm.. Couldn't tell ya..."
------------

Anyways thanks for your help!

Arbitrator
06-04-2007, 06:47 PM
I don't use .xhtml or .xht because, I don't have a web page that isn't written almost entirely in PHP.Such was my guess and why I also suggested the PHP method. I wasnít suggesting that you serve real XHTML to Internet Explorer either.

However, you may notice significant problems when serving it correctly since real XHTML follows the rules of XML rather than HTML. For example, two commonly overlooked differences are (A) that the primary background must be applied to the html (not body) element in XHTML and (B) document.write() doesnít work in any XML language, including XHTML. Note that a validator will not catch either of those problems.


Check this out:
XHTML Validation (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2F)
CSS Validation (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2Fcss.css&warning=1&profile=css21&usermedium=all)Well done.


There are many reasons I support XHTML over HTML:
The biggest, I'm tired of looking at HTML that looks like this:
<HtML>
<BODY>
<B><FONT COLOR=RED>Hello, I know not.</B></FONt>
</HTML
</body>

*Then they wonder why it doesn't work. "Hmm.. Couldn't tell ya..."The particular sample that you provided is not correct HTML and doesnít provide a valid argument. Correct HTML:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en-Latn-US">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML 4.01 Strict Document</title>
<meta name="Author" content="Patrick Garies">
<meta name="Created" content="2007-06-04">
<style type="text/css">
* { margin: 0; padding: 0; }
html { background: white; color: black; }
p { margin: 1em; }
</style>

</head>
<body>

<p>This is a correctly written HTML document.</p>

</body>
</html>As you can see, HTML can be just as well‐authored. On the other hand, XHTML (as HTML) can be just as poorly authored as a lot of HTML out there.

bobleny
06-04-2007, 07:41 PM
True... Funny thing is, You really can't see my XHTML code anyways... Not that it matters, here is the only tags I am using.


<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css.css" rel="stylesheet" type="text/css" />
<title></title>
</head>
<body>
<div><form><input /><textarea></textarea></form></div>
<a href></a>
</body>
</html>


I don't have any other tags.... Thats why I'm not to concerned about XHTML compatibility with IE...

That is what I call pure CSS. The whole thing is done with CSS.

Meeting the XHTML validation is nothing more to me than a challenge. It is something to strive for....

_Aerospace_Eng_
06-04-2007, 07:51 PM
I see you stuck with your long drawn out CSS using a lot of redundant things.

bobleny
06-04-2007, 07:59 PM
I see you stuck with your long drawn out CSS using a lot of redundant things.

Yeah, is that a problem? I'm not real good with CSS you know, and for me to use short hand is out of the question. I am not good with CSS so I tend to place redundancies only keep the browser(s) from doing anything unexpected....

What would you recommend that I do? If you know of any detailed CSS guides, I would be more than happy to take a look.

It is the detail that I need. Like, someone said, <div> is by default 100% of it's parent element. Is that default for IE 1.3?

I need to know them kinds of things. Like floats, I didn't know that when they floated, they didn't expand their parent element. I wish I would of known that a long time ago!

_Aerospace_Eng_
06-04-2007, 08:29 PM
www.htmldog.com is a good site to learn what you need to know about CSS including shorthand properties. I gave you a stylesheet that has the shorthand stuff in it already. Just to help you understand how big of a difference it makes. The CSS I gave you is 209 lines, and your CSS with the same formatting techniques is 329 lines. File size wise the 209 line one is 4.00kb on disk, and yours is 8.00kb on disk. In the end it adds up. Save on bandwidth.

bobleny
06-04-2007, 09:00 PM
lol, it's actually 407 lines at 5.6KB, and I got plenty of bandwidth to spare...

I will check out that guide, maybe I'll learn something good.

Thanks again for everyones help.

_Aerospace_Eng_
06-04-2007, 09:13 PM
lol, it's actually 407 lines at 5.6KB, and I got plenty of bandwidth to spare...

I will check out that guide, maybe I'll learn something good.

Thanks again for everyones help.
I was referring to the formatting techniques I used. As is yes yours is 407 lines. Also remember about your users. They would be downloading a smaller file so loading times would be faster as well.

Arbitrator
06-05-2007, 05:59 PM
True... Funny thing is, You really can't see my XHTML code anyways...Not sure what you mean. I can see your pseudo‐XHTML just fine.


Not that it matters, here is the only tags I am using.Yes, and, based upon your code and the context in which itís being served, youíre clearly not using any of XHTMLís features.


I don't have any other tags.... Thats why I'm not to concerned about XHTML compatibility with IE...The main point is that you will overlook correct use of XHTML because you are neither testing nor serving your documents in an XML environment. XHTML is also a lot more strict and difficult to get right when compared to HTML. Itís also ridiculous to serve XHTML as HTML when you really understand how HTML (SGML) works.


That is what I call pure CSS. The whole thing is done with CSS.Not sure what youíre getting at here. Itís definitely good to use CSS instead of HTML/XHTML for layout. At the same time, you shouldnít overlook the quality of the structure that the CSS applies to (the HTML/XHTML).


Yeah, is that a problem? I'm not real good with CSS you know, and for me to use short hand is out of the question. I am not good with CSS so I tend to place redundancies only keep the browser(s) from doing anything unexpected....I would really get into the habit of using shorthand since it simplifies your code. This makes it more readable, faster to type, easier to maintain, and cuts down on file size.

It seems that you fear that shorthand will lead to browser compatibility issues; Iím aware of no such issues.


It is the detail that I need. Like, someone said, <div> is by default 100% of it's parent element. Is that default for IE 1.3?Internet Explorer didnít support CSS until version 3. Read The History of Internet Explorer (http://www.microsoft.com/windows/ie/community/columns/historyofie.mspx), if interested. As far as Iím concerned, Internet Explorer 6 and 7 are the only variants that you need to code for. Some will argue that Internet Explorer 5 on Macintosh is still relevant though.


lol, it's actually 407 lines at 5.6KB, and I got plenty of bandwidth to spare...As _Aerospace_Eng_ mentioned, it adds up. No point in being inefficient if you can help it. Not everyone in the world is using broadband; even in ďadvancedĒ countries like the United States thereís a lack of broadband availability in rural areas (like where I am) with only overpriced satellite connections available.

bobleny
06-05-2007, 08:49 PM
Arbitrator, do you think having an XHTML 1.0 Strict validated web site will be of value when I start implementing AJAX into my scripts? After all, AJAX does deal with XML.....
----------

My file went from 407 lines at 5.6KB to 308 lines at 3.9KB. That's a big difference. The guide helped out a lot. It told me what the short hands are.
CSS Validation (http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.firemelt.net%2Fcrow%2Fcss.css&warning=1&profile=css21&usermedium=all)
---------

Thanks again for every ones help!

Arbitrator
06-05-2007, 10:24 PM
Arbitrator, do you think having an XHTML 1.0 Strict validated web site will be of value when I start implementing AJAX into my scripts? After all, AJAX does deal with XML.....Iím not sure because I donít know AJAX. XHTML as HTML is not XML though.

While I donít know AJAX, if itís that XmlHttpRequest stuff, then I do know that you can use that to import into HTML. The only possible issue that I can think of is if youíre importing literal code by using something like innerHTML (if thatís possible?) instead of DOM methods. If you import an empty element (an element with no end tag) literally from an XML document and insert it into an HTML document, then it would have the wrong syntax.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum